Thread

Hi,

We have a gallery set up to show one image, with pagination to link to others.

To avoid waiting for the image to load after each choice of next page, we’d like to be able to preload the next image. What is the recommended way of accessing the next image url to be able to do this?

The relevant code from our template is as follows (the order by filename is a tweak we’ve made to allow easy resequencing on future gallery updates):

<div id="gallery">
     {exp:gallery:entries gallery="{embed:gallery_name}" orderby="filename" sort="asc" columns="1" rows="1" log_views="off"} 
     {entries} 
     {row}
     {image_url}</a> 
     <h2>{title}</h2>
<p>     {caption}<br />
     {/row} <br />
     {/entries} <br />
     {paginate} <br />
     <div class="pagination"> <br />
         <br />
         {if previous_page}<a href="http://{auto_path}">Previous Page</a> {/if}{current_page} of {total_pages}{if next_page} <a href="http://{auto_path}">Next Page</a>{/if}<br />
         {pagination_links}<br />
     </div> <br />
     {/paginate}<br />
     {/exp:gallery:entries}<br />
</div>

Moved to HTML, CSS, and Design Help by Moderator

I’m not aware of any method to pre-load images. But perhaps someone in the community has done so.

You could use a animated .gif and applying it to the image background, so while the images is loading you can have the animated .gif moving. Just a idea.

Here’s a hack:

Load the next and/or previous image into a div set to display:none.

It will increase your load time, but next time the image is called it will already be cached.

You could also look in to an image crossfade script, which will smooth the transition.

Or lightbox: http://kerenorconsultants.com/index.php/main/photos

(Click one).