Andrea

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