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
Post a Comment