Question

Hi
I’m having a problem with creating a dynamic gallery with php and jQuery.
In simple words, I have got a hundred pictures I want displayed in a nice form (for a photographer’s website). Pictures have been optimized, so the whole gallery weights about 10mb.

I am using the galleryView plugin. php is used to take all filenames from the images’ folder and create an unordered list of s.
GalleryView then gets the list and creates a neat gallery.

The problem I’ve got is that you have to wait for the gallery to show until all the pictures are downloaded. with 10mbs, it takes ages.

Is there a simple option of running the gallery after only a few files are downloaded?

Or does anyone maybe know a better way of doing it? some nice jQuery gallery plugin that can handle many images? I’ve been quite unsuccessful searching for one.

Thanks in advance

Answer 1

There doesn’t appear to be any native support of preloading images in galleryView. From the specs:

I’ll look into pre-loading images in future version

So you have to roll your own.

Take a look at the jQuery .load() function.

Show the first image once it’s loaded, then load the others in the background.

Let’s say the first image is in id = first

$(function() { // <== doc ready

      // do something after first image is loaded
    $("#first").load( /* show the first image */ );

      // do something after all images loaded
    $("img").load( /* do the main gallery loop */ )
});

Modify the above as needed. Let’s say if you want to show the first big image and first 5 thumbnails, etc.

---

Here’s how I’d start. I think it’d probably look smoother if you preloaded not just the 1st image, but as many images as it takes to fill up the first row of thumbs.

Show a temporary div with just one image until all the images load:

HTML:

<div id="temp"></div>
<div id="photos" class="galleryview">
    <img id="first" ... />
    <img ... />
    <img ... />
    <img ... />
    ...
</div>

JS:

$(function() { // <== doc ready

    var $photos = $("#photos"), $temp = $("#temp"),
        $first = $("#first");

      // Hide gallery:
    $photos.hide();      

      // show temp when 1st img loaded
    $first.load( $temp.append( $first.clone() ) );

      // To make things look smooth you can also make 
      // a quick gallery view out of temp. This only has 1 image.
    $temp.galleryView({
        panel_width: 800,
        panel_height: 300,
        frame_width: 100,
        frame_height: 100,
    });

      // do full gallery when all imgs loaded
    $("img").load( 
          // remove the temp gallery
        $temp.remove();
          // show gallery
        $photos.galleryView({
            panel_width: 800,
            panel_height: 300,
            frame_width: 100,
            frame_height: 100,
        });
    );
});