This fix is awsome is there any way we could integrate it with quicksand.js my boss ask me to make a gallery but it mess up when it filters this is what i have so far in my js files
function fixThumbnailMargins() {
$('.row-fluid .thumbnails').each(function () {
var $thumbnails = $(this).children(),
previousOffsetLeft = $thumbnails.first().offset().left;
$thumbnails.removeClass('first-in-row');
$thumbnails.first().addClass('first-in-row');
$thumbnails.each(function () {
var $thumbnail = $(this),
offsetLeft = $thumbnail.offset().left;
if (offsetLeft < previousOffsetLeft) {
$thumbnail.addClass('first-in-row');
}
previousOffsetLeft = offsetLeft;
});
});
}
// Fix the margins when potentally the floating changed
$(window).resize(fixThumbnailMargins);
fixThumbnailMargins();
});
/*===============================================*/
/* functions for portfolio
/*===============================================*/
$(document).ready(function(fixThumbnailMargins){
// get the action filter option item on page load
var $filterType = $('#filterOptions li.current a').attr('class');
// get and assign the thumbnails element to the
// $holder varible for use later
var $holder = $('ul.thumbnails');
// clone all items within the pre-assigned $holder element
var $data = $holder.clone();
// attempt to call Quicksand when a filter option
// item is clicked
$('#filterOptions li a').click(function(e) {
// reset the current class on all the buttons
$('#filterOptions li').removeClass('current');
// assign the class of the clicked filter option
// element to our $filterType variable
var $filterType = $(this).attr('class');
$(this).parent().addClass('current');
if ($filterType == 'all') {
// assign all li items to the $filteredData var when
// the 'All' filter option is clicked
var $filteredData = $data.find('li');
}
else {
// find all li elements that have our required $filterType
// values for the data-type element
var $filteredData = $data.find('li[data-type=' + $filterType + ']');
}
// call quicksand and assign transition parameters
fixThumbnailMargins();
$holder.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad'
});
return false;
});
});
and on my html i have
<div id="gallery" class="row-fluid">
<div class="page-header">
<h2>Meet our team</h2>
</div>
<div class="row-fluid">
<div class="filter_wrapper">
<ul class="nav nav-pills" id="filterOptions">
<li class="current"><a class="all" href="#">All</a></li>
<li><a class="website" href="#">Websites</a></li>
<li><a class="logos" href="#">Logos</a></li>
<li><a class="building" href="#">Buildings</a></li>
<li><a class="photo" href="#">Photografy</a></li>
</ul>
</div>
</div>
<ul class="thumbnails">
<li class="span6" data-id="id-1" data-type="website">
<div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team"> <h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
</li>
<li class="span6" data-id="id-3" data-type="logos">
<div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team"> <h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
</li>
<li class="span6" data-id="id-4" data-type="website">
<div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team"> <h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
</li>
<li class="span6" data-id="id-5" data-type="website">
<div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team"> <h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
</li>
<li class="span6" data-id="id-6" data-type="building">
<div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team"> <h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
</li>
<li class="span6" data-id="id-7" data-type="building">
<div class="thumbnail pics"> <a href="#"><img src="images/comun/picture450.jpg" alt="" /><div class="pics-overlay-link"></div></a>
<div class="caption team"> <h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>
</li>
</ul>
</div>
the script here works great when the page loads and resize but when i hade some elements it breaks again, im not so good wth js mostly php going crazy to try to fix it
