Slickr for Mootools

I was implementing slickr, a flickr plugin for wordpress, on my newest site http://scenemap.net yesterday, and I realized right away that it wasn’t going to be compatiable with my code because I exclusively use mootools. So, I rewrote the javascript for mootools. You can get the code here or look at it here:
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();
});
 
 
Other updates you will need to make for this to work:
  • 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”.

RSS feed | Trackback URI

Comments »

No comments yet.

Name (required)
E-mail (required - never shown publicly)
URI
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

Trackback responses to this post

23 queries in 1.116 seconds | Code is Poetry | sLajax.com