Search code examples
jquerygalleryfullscreenflickr

Integrating Flickr with Codrops FullScreen Gallery Problems

I'm currently putting together a Flickr gallery with the use of the Codrops full-screen gallery. I've managed to import the flickr images from a flickr account and I've got the full-screen images working with non-flickr images but when telling the flickr to work with the Codrops gallery its seems to stop working.

Website URL: http://www.media21a.co.uk/development/fullthrottle/flickr/ This is the Flickr document: http://www.media21a.co.uk/development/fullthrottle/wp-content/themes/fullthrottle/js/flickrImport.js This is the Gallery document: http://www.media21a.co.uk/development/fullthrottle/wp-content/themes/fullthrottle/js/gallery.js

I know how to get it working with fancybox (lightbox) but i'm not sure how to get it workig with the codrops gallery.

function attachFancyBox()
{
    $(".fancyBox").fancybox();
} 

    /*  BEGIN OPTIONAL FANCYBOX PARAMS */
    "rel":"casabelmonte",            // Rel tag to enable forward/back buttons on fancybox
    "imageLink":"preview",         // Tells the script to grab the image url for fancybox to show
    "className":"fancyBox",     // Class for attaching fancybox
    "callback":attachFancyBox  // Once the images show attach the fancybox script
    /* END */

If needed here is my Global script:

$(window).load(function() {


    $(".dropgallery a, #fp_thumbtoggle").removeAttr("title");

    $('#fp_thumbtoggle, .dropgallery img').click(function() {
        $('#fp_thumbtoggle').toggleClass("active");

        if ($('#fp_thumbtoggle').hasClass('active')){
            $('#fp_thumbtoggle').animate({top:'65px'});
        }else{
            $('#fp_thumbtoggle').animate({top:'185px'});
        }
        $('.dropgallery').slideToggle('500');

    });

    });

I've managed to get Youtube & Vimeo videos imported and it works great, if you could help me out on this i'll sure add your link within the coding on the website and i'll add a couple shout outs on facebook & twitter : ).

Solution

  • You try to bind click handler (for thumbs) for elements that don't exists yet, since they're dynamically loaded. To make it work, replace line (in gallery.js):

    $thumbScroller.find('.content').bind('click', function(e){

    to:

    $thumbScroller.find('.content').live('click', function(e){

    That will make thumbnail clicking work. After that, in flickrImport.js change the url that is fitted in the alt attribute of image from _m to _b size, so that after you click the big version of the image is loaded, not the _m size again. Example:

    alt="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_m.jpg"

    change to:

    alt="http://farm'+photo.farm+'.static.flickr.com/'+photo.server+'/'+photo.id+'_'+photo.secret+'_b.jpg"

    EDIT: I forgot to mention - there were two functions missing (showNav() and hideThumbs()). They are called from within of gallery.js.