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

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

CSS3 Transition to highlight new elements created in JQuery -