Running jQuery before loading pictures

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 a开发者_开发知识库bout 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

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

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

@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.