javascript - Isotope.js sort by href? -
i'm building wordpress site , using isotope.js thumbnails on home page, these thumbnails link posts, i'm trying button on click toggle between masonry layout , layout groups these thumbnails href, possible? thank in advance.
here's html:
<a class="thumbnail large-img" href="http://wordpresssite.com/post/post-title/"> <img width="624" height="352" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage.jpg" class="attachment-full"/> </a> <a class="thumbnail med-img" href="http://wordpresssite.com/post/post-title/"> <img width="500" height="357" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage2.jpg" class="attachment-full"/> </a> <a class="thumbnail med-img" href="http://wordpresssite.com/post/another-post-title/"> <img width="500" height="357" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage3.jpg" class="attachment-full"/> </a> <a class="thumbnail port-img" href="http://wordpresssite.com/post/another-post-title/"> <img width="300" height="420" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage4.jpg" class="attachment-full"/> </a> <a class="thumbnail med-img" href="http://wordpresssite.com/post/yet-another-post-title/"> <img width="500" height="357" src="http://wordpresssite.com/wp-content/uploads/2013/03/postimage5.jpg" class="attachment-full"/> </a>
and here attempt:
$('a.entry').each(function(){ var href = jquery(this).attr('href'); var groupclass = jquery(this).attr('class'); var count = 0; $('a.entry').each(function(){ if ( href === jquery(this).attr('href') ) { $(this).attr('data-symbol', count); } else { count++; } }); }); $(function(){ var $container = $('#boxes'); $container.isotope({ layoutmode : 'masonry', masonry: { columnwidth: 324 }, getsortdata : { symbol : function( $elem ) { return $elem.attr('data-symbol'); }, category : function( $elem ) { return $elem.attr('href'); } } }); var $optionsets = $('#options .option-set'), $optionlinks = $optionsets.find('a'); $optionlinks.click(function(){ var $this = $(this); // don't proceed if 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' false boolean value = value === 'false' ? false : value; options[ key ] = value; if ( key === 'layoutmode' && typeof changelayoutmode === 'function' ) { // changes in layout modes need logic changelayoutmode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; }); });
basically instead of sorting href, i've sorted data-symbol. sorry didn't post code originally, trying figure out. didn't expect "do job me".
...thanks in advance.
Comments
Post a Comment