WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
Add loading icon? (13 posts)

  1. kaylamatthews
    Member
    Posted 2 years ago #

    Hi Josh,

    First I just need to thank you for creating such an awesome plugin - out of all the gallery plugins I've used for various WordPress websites yours is by far the most intuitive and functional!

    I have a relatively big image gallery that will contain about 50 high-resolution images, and as a result the first few images will not load completely before the subsequent images are loaded - i.e. the first image would load to about 50% before fading into the next image, and so on. What's worst is that the gallery is in the center of the home page, and so before it is done loading the footer of the website would not load at all... :(

    I was wondering if there is a way to implement a loading function with a loading gif (something simple like found here http://ajaxload.info) so that the gallery can load all its images in the background while the rest of the website loads; then the gallery would start displaying all its images after all the images are done loading?

    Any input from you would be highly appreciated! Thank you so much for your support in this forum :)

    Kayla

    http://wordpress.org/extend/plugins/meteor-slides/

  2. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Kayla, you're welcome, thanks for trying my plugin!

    One option might be to load a few images first and dynamically load the rest in the background. The jQuery Cycle plugin supports this, here are a few examples:
    http://jquery.malsup.com/cycle/add3.html
    http://jquery.malsup.com/cycle/add4.html

    I haven't tried adding a loader, preloading images, or dynamically loading images, so I will have to experiment a bit and see what I can come up with.

  3. kaylamatthews
    Member
    Posted 2 years ago #

    Thank you so much for the response Josh!

    Unfortunately those two links are a bit over my head, but I will try to play with them and see if anything comes up.

    If you can come up with anything that would be super great! :)

  4. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    I'll let you know what I can figure out!

  5. terryago
    Member
    Posted 2 years ago #

    Has there been any update on this? I too would like to load my images in the background....

  6. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    @terryago No, I haven't had a chance yet, but I'll try to dig into it soon!

  7. terryago
    Member
    Posted 2 years ago #

    @JLeuze Thanks. Great plugin!

  8. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    I'll keep you posted.

  9. kaylamatthews
    Member
    Posted 2 years ago #

    Hi Josh,

    If there are any updates that would be awesome! I know you're really busy, so I am very grateful for your attention on this matter :)

    I just realized that Nivo slider uses it if I hard-code it using HTML and reference the scripts externally, but not the Nivo Slider plugin for WordPress :( I tried looking into their scripts to see what's creating the preloading function but alas it's all way over my head.

  10. kaylamatthews
    Member
    Posted 2 years ago #

    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

  11. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    That's awesome Kayla, thanks for sharing! I'll check it out and see what I can do with it.

  12. kaylamatthews
    Member
    Posted 2 years ago #

    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

  13. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Yeah, depending on the file size, more than 50 images is going to be pushing it.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic