Running jQuery before loading pictures.

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,
        });
    );
});

Answer 2

JQuery Cycle plugin is a ultra-customizable option, check it out @ http://jquery.malsup.com/cycle/

They even have a preloading example @ http://jquery.malsup.com/cycle/add3.html

Answer 3

@Peterajtai

no, you're right, I don't see one. Best way for me is then is start with a few images in place: (below is from galleryview default implementation example):

<div id="photos" class="galleryview">
  <div class="panel">

     <img src="img/gallery/01.jpg" /> 
    <div class="panel-overlay">
      <h2>Effet du soleil sur le paysage</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/tomharry" target="_blank">tomharry</a>.  View full-size photo <a href="http://www.sxc.hu/photo/158829" target="_blank">here</a>.</p>
    </div>
  </div>

  <div class="panel">
     <img src="img/gallery/02.jpg" /> 
    <div class="panel-overlay">
      <h2>Eden</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/emsago" target="_blank">emsago</a>.  View full-size photo <a href="http://www.sxc.hu/photo/152865" target="_blank">here</a>.</p>
    </div>

  </div>
  <div class="panel">
     <img src="img/gallery/03.jpg" /> 
    <div class="panel-overlay">
      <h2>Snail on the Corn</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/baines" target="_blank">baines</a>.  View full-size photo <a href="http://www.sxc.hu/photo/34453" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/04.jpg" /> 
    <div class="panel-overlay">
      <h2>Flowers</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/jazza" target="_blank">jazza</a>.  View full-size photo <a href="http://www.sxc.hu/photo/990169" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/06.jpg" /> 
    <div class="panel-overlay">
      <h2>Alone Beach 2B</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/sgursozlu" target="_blank">sgursozlu</a>.  View full-size photo <a href="http://www.sxc.hu/photo/738279" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/05.jpg" /> 
    <div class="panel-overlay">
      <h2>Sunrise Trees</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/a_glitch" target="_blank">a_glitch</a>.  View full-size photo <a href="http://www.sxc.hu/photo/289581" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/07.jpg" /> 
    <div class="panel-overlay">
      <h2>Waterfall</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/thesaint" target="_blank">thesaint</a>.  View full-size photo <a href="http://www.sxc.hu/photo/174331" target="_blank">here</a>.</p>

    </div>
  </div>
  <div class="panel">
     <img src="img/gallery/08.jpg" /> 
    <div class="panel-overlay">
      <h2>Death Valley</h2>
      <p>Photo by <a href="http://www.sxc.hu/profile/djkmart" target="_blank">djkmart</a>.  View full-size photo <a href="http://www.sxc.hu/photo/270109" target="_blank">here</a>.</p>

    </div>
  </div>
  <ul class="filmstrip">
    <li><img src="img/gallery/frame-01.jpg" alt="Effet du soleil" title="Effet du soleil" /></li>
    <li><img src="img/gallery/frame-02.jpg" alt="Eden" title="Eden" /></li>
    <li><img src="img/gallery/frame-03.jpg" alt="Snail on the Corn" title="Snail on the Corn" /></li>
    <li><img src="img/gallery/frame-04.jpg" alt="Flowers" title="Flowers" /></li>
    <li><img src="img/gallery/frame-06.jpg" alt="Alone Beach" title="Alone Beach" /></li>
    <li><img src="img/gallery/frame-05.jpg" alt="Sunrise Trees" title="Sunrise Trees" /></li>

    <li><img src="img/gallery/frame-07.jpg" alt="Waterfall" title="Waterfall" /></li>
    <li><img src="img/gallery/frame-08.jpg" alt="Death Valley" title="Death Valley" /></li>
  </ul>
</div>

then run ajax like so:

$.ajax({
url: 'getImgSrcs.php', //this will access the server and return srcs for remaining images, let's say pipe delimited for example
data: {'getimages': 'true'}, // this could easily be {getimages: 'block 1'}
type: 'post',
success function(data) {
imgarray = data.split("|"); // split into array giving thumbsrc:fullsrc:title;
$.each(imgarray, function(index) {
var thumbsrc = data[index].split(":")[0];
var fullsrc = data[index].split(":")[1];
var title = data[index].split(":")[2];
$('<div class="panel"></div>')
.append('<img src="' + thumbsrc + '" />')
.append('<div class="panel-overlay"></div>')
.append('<h2>' + title + '</h2>');
.append('<p>View full-size photo <a href="' + fullsrc + '" target="_blank">here</a>.</p>')
.appendTo('#photos');
})
}
})

You could use the same functionality to build list items and appendTo('ul.filmstrip');

Personally I would build the image blocks using a for loop on the php side and bring them in ready to insert

success: function(data) {
$("#photos").append(data);
}

Or you could build an xml feed, or json object and bring that through. Your personal choice.