Good morning all,
I'm fairly familiar with PHP, and have in the past done some Javascript coding.
The company I work for has started using JQuery for some graphical elements such as banner rotation and lightboxes.
I have found and modifed JQuery code that allows me to create a gallery of thumbnails, with a simple fade-in/out action when you click on each of the thumbnails.
My trouble is that the pictures I am using for the large images are taking a while to load, so I thought i'd look for a simple JQuery preloader.
I'm having a bit of trouble trying to combine a 'for each' loop and the preloader.
On the page itself, I have some PHP which loads each of the thumbnails and assigns the relevant class to each of them:
for ($picnum = 1; $picnum <= 15; $picnum++) {
echo('<a href="#" rel="images\pic'.$picnum.'.jpg" class="image"><img src="images\pic'.$picnum.'.jpg" class="thumb" border="0"/></a>');
}
(this loads 15 images, and the gallery is functional).
In the JQuery code, I've added a bit of code for Preloading that I found:
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}
(now i'm not even sure if that's right - or if it works?)
The next bit of code I have is meant to loop through the images that have been loaded on the page, and then preload them.
function example() {
var imagesource = '';
for(var i = 0; i < $('#preloadimages a').length; i++) {
imagesource += $('#preloadimages a')[i].rel + "\n";
}
$.preloadImages(imagesource);
}
<body onload="example()">
- I'm pretty sure i've made a right hash of this code, and that there's a really simple reason why it's not working, but any information or help that you could give me would be greatly appreciated!
Many thanks in advance,
Rachael