CODEWITHSUNDEEP
jqueryimagejquery-isotope
Pat
Pat

Reputation: 1203

jQuery Isotope with Images

I'm working with the jQuery Isotope library for personal image gallery. I've followed the instructions and even used the sample code, but I'm having an issue where when the page loads, it loads all images straight down. Then after a few seconds, it mason's them into place.

I am using the imagesLoaded library as well, but am wonder if there is a way to load them in place, or hide them while loading, or something? It looks sloppy when they load in a long, straight line, then mason into place after a few seconds.

I thought the imagesLoaded would have hid the images, or loaded them in place, but it's not.

My code and a few photos to illustrate what I mean:

// Isotope Settings
    $(function(){

    var $container = $('#mason');
    $container.imagesLoaded( function(){
        $container.isotope({
            itemSelector : '.box',
            masonry : {
                columnWidth: 270
            }
        });
    });

    $container.infinitescroll({
        navSelector  : '#page_nav',    // selector for the paged navigation 
        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
        itemSelector : '.box',     // selector for all items you'll retrieve
        loading: {
            finishedMsg: 'No more pages to load.',
            img: 'http://i.imgur.com/qkKy8.gif'
        }
    },
    // call Isotope as a callback
        function( newElements ) { 
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $container.isotope( 'appended', $newElems, true ); 
            });
        }

    );
    });

Upvotes: 2

Views: 2694

Answers (1)

Jean-Paul
Jean-Paul

Reputation: 21150

What you basically want to do is hide the images initially and then show them only after everything is loaded. This is done fairly easily with CSS and jQuery.

Put all the images in a wrapping div

<div id="wrapper">

    //put your images here
    <img src="awesomeImage" class="image" />

</div>

Set the initial display of the wrapper to none (CSS)

#wrapper { display:none; }

Show the images only after the page is done with loading (jQuery)

$(document).ready(function() {
    $("#wrapper").show();
});

That should resolve the issue.

You can find a working example here: jsFiddle

Before looking, note that the pictures will be stored in your cache memory. So the demonstration will probably only work the first time you view it. I put multiple images in there which are orignally fairly large and then downsized them. Usually this will increase loading time (which we wanted for the demonstration) such that you can see that it actually works :)

I hope this will help you out!

Good luck!

Upvotes: 1

Related Questions