Isotope with Fancybox filtering -


i implemented isotope.js wordpress site. use display gallery easy fancybox plugin add zooming functionality images. problem isotope filtering. added rel attribute images when filter categories fancybox still cycles through images.

i need add rel attribute dynamically based on category i'm filtering. i'm struggling problem 3 days now. i've read bunch of post, tried view things still can't make work.

most of posts give solution data-fancybox-group attribute can't use must use rel attribute (it doesn't work me anyway).

here's wp code:

<ul id="filters">     <li><a href="#" data-filter="*" class="selected">all</a></li>     <?php          $terms = get_terms("polygraphy-categories");          $count = count($terms);          if ( $count > 0 ){               foreach ( $terms $term ) {                   echo "<li><a class='filterbutton' href='#' data-filter='.".$term->slug."'>" . $term->name . "</a></li>\n";             }         }      ?> </ul>  <?php $the_query = new wp_query( 'post_type=polygraphy' ); ?> <?php if ( $the_query->have_posts() ) : ?>      <div id="isotope-list">     <?php while ( $the_query->have_posts() ) : $the_query->the_post();      $termsarray = get_the_terms( $post->id, "polygraphy-categories" );       $termsstring = "";      foreach ( $termsarray $term ) {          $termsstring .= $term->slug.' ';      } ?>  <div class="<?php echo $termsstring; ?> poli">     <?php         if ( has_post_thumbnail()) {             $full_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');             echo '<a class="fancybox" href="' . $full_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';             the_post_thumbnail('thumbnail');             echo '</a>';         }     ?> </div>  <?php endwhile;  ?>  </div>  <?php endif; ?> 

and js code:

jquery(function ($) {     $(window).load(function(){         var $container = $('#isotope-list');          $container.isotope({              itemselector : '.poli',              layoutmode : 'masonry'         });          var $optionsets = $('#filters'),         $optionlinks = $optionsets.find('a');          $optionlinks.click(function(){             var $this = $(this);              if ( $this.hasclass('selected') ) {                 return false;             }             var $optionset = $this.parents('#filters');             $optionsets.find('.selected').removeclass('selected');             $this.addclass('selected');              var selector = $(this).attr('data-filter');             $container.isotope({ filter: selector });              return false;         });     }); }); 

i told code should work doesn't:

$('.filterbutton').on("click", function(){     var selector = $(this).attr('data-filter');     if(selector == "*"){         $(".fancybox").attr("rel", "gallery");     } else{          $(selector).find(".fancybox").attr("rel", selector);     }     return false; }); 


Comments

Popular posts from this blog

sql - invalid in the select list because it is not contained in either an aggregate function -

Angularjs unit testing - ng-disabled not working when adding text to textarea -

How to start daemon on android by adb -