08/26/09
Slickr for Mootools
javascripthover edges to scroll
var slickrchangeddiv;
var delayfades = 1000;
function slickrInit(target){
$(target).setStyles({'opacity':0,'display':'block'});
new Fx.Morph(target,{duration: delayfades}).start({'opacity':[0,1]});
$$('#slickr a').each(function(anchor,i){
anchor.removeEvents();
var relAttribute = String(anchor.getAttribute('rel'));
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('slickrajaxcontent|slickrajaxmenu'))){
anchor.addEvent('click',function(e){ //When this matching item is clicked, trigger AJAX updates
new Event(e).stop();
slickrchangeddiv = this.getAttribute('rel');
slickrrelurl = this.getAttribute('href'); //the url that has the new content
new Fx.Morph(slickrchangeddiv,{ duration: delayfades,
onComplete:function(){
new Request.HTML({url:slickrrelurl,
update: slickrchangeddiv,
onSuccess: function() { slickrInit(slickrchangeddiv); }
}).get();
}
}).start({'opacity':[1,0]});
});
}
});
SqueezeBox.assign($$('a[rel=squeeze]'));
}
window.addEvent('load',function(){
new Request.HTML({url:$$('#slickrajaxmenu a')[0].getProperty('href'),
update: $('slickrajaxcontent'),
onSuccess: function(){
slickrInit($('slickrajaxcontent'));
$('slickrajaxmenu').setStyles({'opacity':0,'display':'block'});
new Fx.Morph('slickrajaxmenu',{duration: delayfades}).start({'opacity':[0,1]});
}
}).get();
});
- I implemented squeezebox as the lightbox gallery so you’ll need to get that in your page
- I And I also modified slickr.php slightly. Find all instances of rel=”lightbox[...]” and replace with rel=”squeezebox”.
No comments yet.