[Plugin: Meteor Slides] Add loading icon?

I think I’ve got it!

I’ve been studying this tut – http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/

We would need both the jquery-1.4.3.min.js and jquery.preloader.js files and reference them in a file like header.php in the theme directory

The only problem is there is a jQuery conflict with WordPress inside the jquery.preloader.js file, so I simply stated

var $j = jQuery.noConflict();

and replaced all $ signs with $j.

Around line 71 where it says

var icon = jQuery("<img />",{

must become

var icon = $j("<img />",{

as well. In this spot the loading icon is referenced but I didn’t find it necessary so I just used the CSS method below.

Then, make sure to call the function, which in my case is in my theme folder’s header.php file:

<script type="text/javascript">
jQuery(function($){
	$("div.meteor-slides").preloader();
	});
</script>

Lastly, just set up the preloader class with a loading gif image – get one from http://ajaxload.info if you don’t have one; something like this in the css file:

.preloader {
   background:url(loading.gif) center center no-repeat #ffffff;
   display:block;
}

The preloader must be set to display:block or display:inline-block otherwise the loading icon won’t display

And that’s it! Now all the images inside my meteor slideshows (I have 8 on my webpage) preloads with the loading icon first 🙂

Josh – I know you can integrate this 10 thousand times better than I have, and if you do I will be forever grateful! For now I will make do with this hack 😉 I have tested it and it works in Opera, Safari (PC, Mac, and iPhone/iPads), Firefox, Chrome, and IE 9, 8, and 7 – I don’t have 6 installed nor do I have a desire to 😉

Best,
Kayla

Hi Josh,

Thank you very much for your time.

Unfortunately my method doesn’t seem to work on a gallery with over 50 images in it, so I don’t think it’s doing what I think it’s doing 🙁

Kayla