Solution for loading large JQuery image gallery

Question

I'm upgrading some image galleries on a university website (needs to be standards compliant, to some degree). Most galleries are many pages of HTML. I've been using the jQuery plugin, Galleriffic, as well as some PHP code I wrote, to generate nice paginated galleries, and it looks great so far. I have two problems though.

The first problem, is that even when JS is enabled, it still takes a while to load. From what I understand about JS, all elements must be loaded into DOM for JS to manipulate them, so the thumbnails all must load up on the page before the JS kicks in. Can I do something to prevent all thumbnails from loading, and only have it load the ones on each page of the gallery? This way, load time is distributed across each page.

The second problem, is that when Javascript is disabled, all 400+ thumbnails have to load on the page. This is the expected behavior, and it works fine for smaller galleries, but not well for large ones. Is it possible to paginate it in PHP, but use JS (when enabled) to prevent the pagination?

I'm not extremely proficient in JS, so I was hoping there was a solution I'm just completely unaware of, and can implement without a complete overhaul.

Answer 1

Bit of a brainstorming suggestion...

It may make sense in your case to write the original markup (using PHP) to include only the first page of results. This approach should allow your document to complete and your JS to begin in a reasonable amount of time.

With the page fully loaded, you could then use jQuery -- $.ajax() -- to get more images... either all of them new pages on an as-needed basis, depending on the problem size you want to engineer this for.

Watch out as this may interfere with invoking the gallerific plugin properly. I'm not familiar with it, and I can't say for certain. If it does, you might need to complete the process of loading the additional images before kicking off gallerific.

Answer 2

Well, first you could make a PHP page which loads the gallery, showing e.g. 25 images at a time. Clicking the pagination button, the page reloads and displays the next 25 images.

That should be pretty straight forward. No JS / jQuery needed.

Then you can add you JS script. E.g. I have a dropdown list to select which gallery I wanbt to use. In jQuery I have added a listenere on selectbox.change.

OnChange, I do a jQiery.post and reload the same page, now getting my next 25 images. The list result (list of images) I return from my jQuery.post as HTML.

Then I just say jQuery('#gallery').html(data);

Here is part of my code in my gallery.php file:

   // If Type is set to e.g. 'jquery', then we know tis page load is from a jQuery request.
    if ( (isset($_POST['type'])) && (isset($_POST['page'])) )
    {
        //This is a jQuery request
        $jQueryReq  = 1;
        $page         = $_POST['page'];
    }


<?php if($jQueryReq == 0) { ?>
  Default html oupthere when there is no jquery request
<?php } else if($jQueryReq == 1) {  ?>
  Here you put the code that gets the images and displays them on the page    
<?php }?>

And here is pseudo jQuery code. Notice the return type of the post is HTML

  // Retrieve and list images
  jQuery.post("wp-content/imageGallery/gallery.php", { id: itemID, page: pagenr },
  function(data){
    jQuery('#galleryContainer').html(data);
    // Here you can add other jQuery functions to interact with images
  }, "html"); 

Hope this gives you some idea how you can use PHP / jQuery to show image gallery