Quicksand: Cached Images disappear after sorting in Chrome

Question

Problem:

The first time you visit my projects page and filter the results everything works fine. But for some reason in Chrome whenever I filter the second time all images disappear (it sets the opacity is set to 0).

Portfolio Page

I cant seem to figure out where it's doing this and the fact that it only happens in Chrome makes it that much more confusing.

Here is the jquery codeJquery:

if (jQuery().quicksand) {

    (function($) {

        $.fn.sorted = function(customOptions) {
            var options = {
                reversed: false,
                by: function(a) {
                    return a.text();
                }
            };

            $.extend(options, customOptions);

            $data = jQuery(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 : (valA > valB) ? -1 : 0;              
                } else {        
                    return (valA < valB) ? -1 : (valA > valB) ? 1 : 0;  
                }

            });

            return $(arr);

        };

    })(jQuery);

    jQuery(function() {

        var read_button = function(class_names) {

            var r = {
                selected: false,
                type: 0
            };

            for (var i=0; i < class_names.length; i++) {

                if (class_names[i].indexOf('selected-') == 0) {
                    r.selected = true;
                }

                if (class_names[i].indexOf('segment-') == 0) {
                    r.segment = class_names[i].split('-')[1];
                }
            };

            return r;

        };

        var determine_sort = function($buttons) {
            var $selected = $buttons.parent().filter('[class*="selected"]');
            return $selected.find('a').attr('data-value');
        };

        var determine_kind = function($buttons) {
            var $selected = $buttons.parent().filter('[class*="selected"]');
            return $selected.find('a').attr('data-value');
        };

        var $preferences = {
            duration: 500,
            adjustHeight: 'auto'
        }

        var $list = jQuery('#items');
        var $data = $list.clone();

        var $controls = jQuery('.selector');

        $controls.each(function(i) {

            var $control = jQuery(this);
            var $buttons = $control.find('a');

            $buttons.bind('click', function(e) {

                var $button = jQuery(this);
                var $button_container = $button.parent();
                var button_properties = read_button($button_container.attr('class').split(' '));      
                var selected = button_properties.selected;
                var button_segment = button_properties.segment;

                if (!selected) {

                    $buttons.parent().removeClass();
                    $button_container.addClass('selected');

                    var sorting_type = determine_sort($controls.eq(1).find('a'));
                    var sorting_kind = determine_kind($controls.eq(0).find('a'));

                    if (sorting_kind == 'all') {
                        var $filtered_data = $data.find('li');
                    } else {
                        var $filtered_data = $data.find('li.' + sorting_kind);
                    }

                    var $sorted_data = $filtered_data.sorted({
                        by: function(v) {
                            return $(v).find('strong').text().toLowerCase();
                        }
                    });

                    $list.quicksand($sorted_data, $preferences, function(){ $("a[rel^='prettyPhoto']").prettyPhoto(); });

                }

                e.preventDefault();

            });

        }); 

    });

}

HTML Below is the html i'm using on my page. I've looked at it over and over and everything seems fine.

    <ul class="selector">

      <li><a data-value="all" href="#">All</a></li> 
      <li><a data-value="web" href="#">Web</a></li> 
      <li><a data-value="print" href="#">Print</a></li> 

      <li><a data-value="uni" href="#">University Projects</a></li>

    </ul> 

    <div class="clear"> </div>

    <ul id="items" class="glow gallery">

        <!--  Villas on great bay  -->                          
        <li data-id="id1" class="web">

            <a class="group" href="#thevillas"><img src="images/projects/thevillas/thumb.jpg" alt="Website: The Villas on Great Bay" /></a>
            <p>The Villas on Great Bay<br /><span>Beachfront Villa Web Page, 2010</span></p>

        </li>

        <!--  GEDsxm  -->
        <li data-id="id2" class="web">

            <a class="group" href="#GEDsxm"><img src="images/projects/gedsxm/thumb.jpg" alt="Website: GEDsxm.com" /></a>
            <p>GED SXM<br /><span>Academic Online training Site, 2009</span></p>

        </li>

        <!--  Weightlifting  -->
        <li data-id="id3" class="print uni">

            <a  rel="weightlifting" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/1.jpg"><img src="images/projects/weightlifting/thumb.jpg" alt="Logo for FSU Weightlifting Club" /></a>

            <a  rel="weightlifting" style="display:none" class="group" title="Logo Design for the new Weightlifting club at FSU" id="single_image" href="images/projects/weightlifting/2.jpg"></a>

            <p>FSU Weightlifting<br /><span>Logo Design, 2009</span></p>

        </li>

        <!--  Sintelligence Logo  -->
        <li data-id="id11" class="print">

            <a class="group" title="Sintelligence Logo" href="images/projects/sintel/1.jpg"><img src="images/projects/sintel/thumb.jpg" alt="Sintelligence Logo" /></a>
            <p>Sintelligenceo<br /><span>Logo Design, 2006</span></p>

        </li>

        <!--  Egyptian Night  -->
        <li data-id="id4" class="print uni">

            <a class="group" title="Poster for TCC's International Student Services" href="images/projects/egypt/1.jpg"><img src="images/projects/egypt/thumb.jpg" alt="An Egyptian Night Poster" /></a>
            <p>TCC's Intl. Student Services<br /><span>An Egyptian Night Poster, 2009</span></p>

        </li>

        <!--  ISS Magazine Ad  -->
        <li data-id="id5" class="print uni">

            <a class="group" title="ISS Magazine Add" href="images/projects/isoad/1.jpg"><img src="images/projects/isoad/thumb.jpg" alt="ISS Magazine Ad" /></a>
            <p>TCC's Intl. Student Services<br /><span>Featured Magazine Ad, 2009</span></p>

        </li>

        <!--  Alacarte ad 1  -->
        <li data-id="id6" class="print">

            <a class="group" title="Kitchens Alacarte Newspaper Add" href="images/projects/alacarte/ad1/1.jpg"><img src="images/projects/alacarte/ad1/thumb.jpg" alt="Alacarte Newspaper Ad" /></a>
            <p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p>

        </li>

        <!--  Alacarte ad 2  -->
        <li data-id="id7" class="print">

            <a class="group" title="Kitchens Alacarte Newspaper Add v2" href="images/projects/alacarte/ad2/1.jpg"><img src="images/projects/alacarte/ad2/thumb.jpg" alt="Alacarte Newspaper Ad" /></a>
            <p>Kitchens Alacarte<br /><span>Newspaper Ad, 2010</span></p>

        </li>

        <!--  FPSI  -->
        <li data-id="id8" class="print uni">

            <a class="group" title="Florida Public Safety Institute Logo Drafts" href="images/projects/fpsi/1.jpg"><img src="images/projects/fpsi/thumb.jpg" alt="FPSI Logo Drafts" /></a>
            <p>Florida Public Safety Institute<br /><span>Logo Drafts, 2009</span></p>

        </li>

        <!--  Helicopter -->
        <li data-id="id9" class="print">

            <a  rel="heli" class="group" title="Leeward Islands Helicopters Post Card Front" id="single_image" href="images/projects/helicopter/1.jpg"><img src="images/projects/helicopter/thumb.jpg" alt="Leeward Islands Helicopters Post Card Front" /></a>

            <a  rel="heli" style="display:none" class="group" title="Leeward Island Helicopters Post Card Back" id="single_image" href="images/projects/helicopter/2.jpg"></a>

            <p>Leeward Islands Helicopters<br /><span>Post Cards, 2009</span></p>

        </li>

        <!--  ISS Logo  -->
        <li data-id="id10" class="print uni">

            <a class="group" title="International Student Services Logo" href="images/projects/iss/1.jpg"><img src="images/projects/iss/thumb.jpg" alt="ISS Logo" /></a>
            <p>International Student Services Logo<br /><span>Logo Design, 2010</span></p>

        </li>


        <!--  VDL Poster  -->
        <li data-id="id12" class="print">

            <a class="group" title="Superbowl Party Poster" href="images/projects/vdl/1.jpg"><img src="images/projects/vdl/thumb.jpg" alt="Superbowl Party Poster" /></a>
            <p>Superbowl Party Poster<br /><span>Logo Design, 2009</span></p>

        </li>
                                              </li>


    </ul>

Updated: I thought it might help adding that if i've never visited the site before it works fine the first time in chrome. But after refresh images disappear again.

Answer 1

Figured it out! Turns out it had nothing to do with quicksand but rather a bit a jquery code i was running to fade in images when the page was loaded. :)

Answer 2

The problem doesn't seem to be occurring in firefox. It does occur in chrome. It could be as simple as including your scripts in your header instead of your footer.