I would like to use this gallery in my website. The only issue is that when clicking next to load the picture, it takes a lot of time. I would like to preload the next two images, when the user clicks the image to enlarge it.
I came across this solution but it's manually coding the image names, but my images are loaded dynamically. Is there any other way I can do it?
I recommend using this gallery - http://dimsemenov.com/plugins/royal-slider/gallery/ it does exactly what you need - preloads nearby images and you may set how much to preload. But note that it's commercial and costs around 10 bucks.
You can use the solution you mentioned, you just need to extract the src attribute of the gallery's images:
preload($('#gallery-images img').map(function() { return this.src; }));
This will actually call the preload function with the needed array.
Here's a simple-ish solution. You can add a click event to the thumbs so that when one is clicked it preloads the next three images. Some way of preloading the next image once you are in individual image navigation would still have to be worked out though, but hopefully this will hep you get there..
$("#content img").on("click",function(){ // use .live instead if you are using an older version of jQuery
var next = $(this).next();
for (var i = 0; i < 3; i++)
{
var img = new Image();
img.src = next.attr("alt");
next = next.next();
}
});
If your images are stored in a mysql you could use the solution you found with a few modifications adding a json encode from the sql query of image names. Passing the information onto jQuery for preloading
require_once('JSON.php');
$json = new Services_JSON();
$out = $json->encode($query)
