Hello,
I am trying to create a picture gallery that can be sorted based on certain category.
These are some examples or references on how to do it :
http://isotope.metafizzy.co/sorting.html
The only difference is that mine is using real picture instead of text which makes the sorting function does not work as it suppose to.
http://www.innovation.web.id/One2/One/portfolio.php
How to make these sorting function works on pictures without text?
portfolio.php
<div id="sorts" class="button-group">
<button data-sort-by="original-order">Photography</button>
<button data-sort-by="name">Branding</button>
<button data-sort-by="symbol">Web Design</button>
<button data-sort-by="number">number</button>
<button data-sort-by="weight">weight</button>
<button data-sort-by="category">category</button>
</div>
<div id="box">
<div class="item transition metal" data-category="transition">
<img class="name" src="Images/Portfolio/portfolio1.jpg" width="270px">
</div>
<div class="item metalloid" data-category="metalloid">
<img class="name" src="Images/Portfolio/portfolio2.jpg" width="270px">
</div>
<div class="item transition metalloid2" data-category="metalloid2">
<img class="name" src="Images/Portfolio/portfolio3.jpg" width="270px">
</div>
<div class="item transition metalloid3" data-category="metalloid3">
<img class="name" src="Images/Portfolio/portfolio4.jpg" width="270px">
</div>
<div class="item transition metalloid4" data-category="metalloid4">
<img class="name" src="Images/Portfolio/portfolio5.jpg" width="270px">
</div>
<div class="item transition metalloid5" data-category="metalloid5">
<img class="name" src="Images/Portfolio/portfolio6.jpg" width="270px">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script>
$(function(){
/*var $grid = $grid.isotope({*/
var $container = $('#box').isotope({
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[\(\)]/g, '') );
}
}
});
// sort items on button click
$('#sorts').on( 'click', 'button', function() {
var sortByValue = $(this).attr('data-sort-by');
$container.isotope({ sortBy: sortByValue });
});
});
</script>
I try to place class inside <img> in order to make it work, but it does not work yet. Any clue how to make sort function works for pictures without text? and also how to place the picture category so that the sort function would work on picture for that certain category?
Thanks in advance.