¿Cómo aplicar jQuery quicksand (ordenar) sin perder una cartera basada en jQuery?

Cuando uso jQuery para aplicar arenas movedizas (una secuencia de comandos para ordenar listas), encuentro que pierdo los títulos de mi cartera para los elementos de mi lista.

¿Cómo mantengo mis listas en la lista después de que alguien haya ordenado la lista?

El problema está en: http://digitalstyle.co/portfolio.html

El código de arenas movedizas

// Custom sorting plugin (function($) { $.fn.sorted = function(customOptions) { var options = { reversed: false, by: function(a) { return a.text(); } }; $.extend(options, customOptions); $data = $(this); arr = $data.get(); arr.sort(function(a, b) { var valA = options.by($(a)); var valB = options.by($(b)); if (options.reversed) { return (valA  valB) ? -1 : 0; } else { return (valA  valB) ? 1 : 0; } }); return $(arr); }; })(jQuery); // DOMContentLoaded $(function() { // bind radiobuttons in the form var $filterType = $('#filter input[name="type"]'); var $filterSort = $('#filter input[name="sort"]'); // get the first collection var $applications = $('#applications'); // clone applications to get a second collection var $data = $applications.clone(); // attempt to call Quicksand on every form change $filterType.add($filterSort).change(function(e) { if ($($filterType+':checked').val() == 'all') { var $filteredData = $data.find('li'); } else { var $filteredData = $data.find('li[data-type=' + $($filterType+":checked").val() + ']'); } // if sorted by size if ($('#filter input[name="sort"]:checked').val() == "size") { var $sortedData = $filteredData.sorted({ by: function(v) { return parseFloat($(v).find('span[data-type=size]').text()); } }); } else { // if sorted by name var $sortedData = $filteredData.sorted({ by: function(v) { return $(v).find('strong').text().toLowerCase(); } }); } // finally, call quicksand $applications.quicksand($sortedData, { duration: 800, easing: 'easeInOutQuad' }); }); }); 

El Hover Over Code

 $(document).ready(function() { // ################################# // PORTFOLIO GRID // ################################# $(".portfolio li").hover(function () { $(this).find('div.content').fadeIn("fast"); }, function() { $(this).find('div.content').fadeOut("fast"); }) // ################################# // IMAGE FADE OPACITY WHEN HOVER // ################################# $(function() { $(".portfolio div img").css("opacity", "1"); // ON MOUSE OVER $(".portfolio div img").hover(function () { // SET OPACITY TO 100% $(this).stop().animate({ opacity: 0.5 }, "fast"); }, // ON MOUSE OUT function () { // SET OPACITY BACK TO 100% $(this).stop().animate({ opacity: 1 }, "fast"); }); }); $('.portfolio .content').each(function() { $('.portfolio .content').hover(function() { $(".portfolio img").not(this).stop().animate({opacity: 0.6}, 400); }, function() { $(".portfolio img").not(this).stop().animate({opacity: 1}, 300); }); }); // ################################# // Lightbox for images // ################################# $(".portfolio a.folio-zoom").fancybox({ 'titlePosition' : 'over' }); }); // END OF DOCUMENT READY 

Cómo se ve mi encabezado JS

            function setEqualHeight(columns) { var tallestcolumn = 0; columns.each( function() { currentHeight = $(this).height(); if(currentHeight > tallestcolumn) { tallestcolumn = currentHeight; } } ); columns.height(tallestcolumn); } $(document).ready(function() { setEqualHeight($(".pontent-container > div")); `enter code here`});    

cambiar

 $(".portfolio li").hover(function () { $(this).find('div.content').fadeIn("fast"); }, function() { $(this).find('div.content').fadeOut("fast"); }) 

a

 $(".portfolio li").on('hover', function () { $(this).find('div.content').fadeIn("fast"); }, function() { $(this).find('div.content').fadeOut("fast"); }) 

ACTUALIZACIÓN Sácalo a una función

 $.fn.showContent = function() { var $this = $(this); $this.hover(function () { $this.find('div.content').fadeIn("fast"); }, function() { $this.find('div.content').fadeOut("fast"); }) } 

A continuación, en la cartera de código de desplazamiento

 $(document).ready(function() { $('.portfolio li').showContent(); }) 

Y en tu código de arenas movedizas.

 .... } }); } // finally, call quicksand $applications.quicksand($sortedData, { duration: 800, easing: 'easeInOutQuad' }); $('.portfolio li').showContent(); }); 

No pude resolver el error de cernido con .live () o .on () como se describe en las respuestas anteriores. Resuelvo esto comentando la función de callback dentro de jquery.quicksand.js

 var postCallback = function () { /*if (!postCallbackPerformed) { postCallbackPerformed = 1; // hack: // used to be: $sourceParent.html($dest.html()); // put target HTML into visible source container // but new webkit builds cause flickering when replacing the collections $toDelete = $sourceParent.find('> *'); $sourceParent.prepend($dest.find('> *')); $toDelete.remove(); if (adjustHeightOnCallback) { $sourceParent.css('height', destHeight); } options.enhancement($sourceParent); // Perform custom visual enhancements on a newly replaced collection if (typeof callbackFunction == 'function') { callbackFunction.call(this); } }*/ 

Esto hizo el truco, todo funciona como antes y también se resolvió con un error de reemplazo de imagen de retina después del filtrado, que se utiliza para obtener las imágenes estándar (no estaba llamando al script retina.js de nuevo).