Change data-fancybox-group when isotope gallery is filtered

[kallym]

Hi,

I am setting up a simple gallery with a page of thumbnails. I'm using fancybox to open a dynamic page with larger image and more detail. I'm using Isotope to filter the thumbnails. I'm using the data-fancybox-group attribute with thumbnail option to cycle through the enlargement pages.

Everything is working, but when I select a filter to view a smaller selection of thumbnails on the gallery page (landscapes or still-life for example). I am still getting ALL of the thumbnails in Fancybox. I know that the data-fancybox-group can be dynamically  changed using jQuery, but have searched for a code example and cannot find one.

I don't have a link yet as the site has not launched. But the fancybox commands and isotope commands are both pretty standard. 

I think the code I need to add in code should be something similar to this:

$("a", this).attr('data-fancybox-group',thisID);

Can anyone tell me the correct syntax and where I need to add it?

Thank you!!

My html code (links created dynamically):

[code]

<div class="box <?php echo $colWid; ?> <?php echo $filters; ?>"> 

<a href="large.php?id=<?php echo $id; ?>" id="pic<?php echo $id; ?>" title="<?php echo $safeTitle; ?>" class="fancybox-thumbs fancybox.ajax" data-fancybox-group="gallery" ><?php echo '<img src="images/'. $thumb .'" alt="'. $title .'" class ="border'. $border .'">'; ?></a>

</div>

[/code]

For Fancybox:

[code]

$(document).ready(function() {

$('.fancybox').fancybox();

$('.fancybox-thumbs').fancybox({

prevEffect : 'none',

nextEffect : 'none',

closeBtn  : true,

arrows    : true,

nextClick : true,

helpers : {

thumbs : {

width  : 50,

height : 50

}

}

});

});

[/code]

for isotope:

[code]

 $(function(){

      

      var $container = $('#container');

 $container.imagesLoaded( function(){

      $container.isotope({

        itemSelector : '.box',

  isFitWidth:true,

        masonry : {

          columnWidth : 56

        }

      });

    });

      

      

      var $optionSets = $('#options .option-set'),

          $optionLinks = $optionSets.find('a');

      $optionLinks.click(function(){

        var $this = $(this);

        // don't proceed if already selected

        if ( $this.hasClass('selected') ) {

          return false;

        }

        var $optionSet = $this.parents('.option-set');

        $optionSet.find('.selected').removeClass('selected');

        $this.addClass('selected');

  

        // make option object dynamically, i.e. { filter: '.my-filter-class' }

        var options = {},

            key = $optionSet.attr('data-option-key'),

            value = $this.attr('data-option-value');

        // parse 'false' as false boolean

        value = value === 'false' ? false : value;

        options[ key ] = value;

        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {

          // changes in layout modes need extra logic

          changeLayoutMode( $this, options )

        } else {

          // otherwise, apply new options

          $container.isotope( options );

        }

        

        return false;

      });

      

    });

[/code]

[JFK]

use the isotope (v1.5+) callback to change the data-fancybox-group attribute within the filter function

something like

$('#filters a').on("click", function(){

  var selector = $(this).attr('data-filter'); 

  $('#container').isotope({ filter: selector }, function(){

    if(selector == "*"){

     $(".fancybox").attr("data-fancybox-group", "gallery");

    } else{ 

     $(selector).find(".fancybox").attr("data-fancybox-group", selector);

    }

  });

  return false;

});

I am using the selector ".fancybox" in my example for links like 

<a class="fancybox" href="bigImage.jpg"><img src="thumb.jpg" ....

make sure you use yours

[kallym]

Thank you! I changed it slightly - to match my fancybox class - .fancybox-thumbs.  But, I don't know where to put the code. I tried it in a few places, and while it doesn't produce any errors, neither does it produce result - just no changes, In firebug I can see the divs dynamically changing for the isotope classes, but the data-fancy-box attribute is not changing.

Aha! I looked it over closely once more and found that the attribute data-filter needed to be changed to data-option-value in my code. It works! Thank You!! 

$('#filters a').on("click", function(){

  var selector = $(this).attr('data-option-value'); 

  $('#container').isotope({ filter: selector }, function(){

    if(selector == "*"){

     $(".fancybox-thumbs").attr("data-fancybox-group", "gallery");

    } else{ 

     $(selector).find(".fancybox-thumbs").attr("data-fancybox-group", selector);

    }

  });

  return false;

});

[JFK]

share a link with the issue and I will tell you what is happening and how to fix it