Howdy!

I use Slider to view my comics panels on my website (warning, it's a bit NSFW): http://www.theimpostor.me/issue/impostor-part-one

I was reading somewhere that there was a preloader in some versions of slider - is there any chance it might be incorporated into the module, or if anyone would mind letting me know how I might go about customising the jquery to include a preloader without breaking the module?

Cheers and thanks!

Comments

ArgentOfChange’s picture

ArgentOfChange commented
Category: support » feature
ArgentOfChange’s picture

ArgentOfChange commented

Here's a solution based on MPaler's Preloader (http://drupal.org/node/503400) provided by the dude himself.
Caveat: unfortunately applying this solution will change the horizontal scrolling to vertical, but I thought I might as well post this and do a follow-up once I manage to get it sorted.

  1. Paste the following into the head of page.tpl.php. Make sure that it sits before the closing tag and after the bit that loads all the other javascripts:
    <script type="text/javascript">
<!--//--><![CDATA[//><!--
var path_to_slider = '/sites/all/modules/slider';
//--><!]]>
</script>
  <script type="text/javascript"> </script>
  <script type="text/javascript"> 
<!--//--><![CDATA[//><!--

$(document).ready(function() {
  $(".scrollContainer").hide();
  vCycleImages = setInterval(function() {
     var bImgLoaded = true;
     var images = $(".scrollContainer img.imagefield");

     for (var i = 0; i < images.length; i++) {
        var img = images[i];
        if (img.complete == false)
           bImgLoaded = false;
     }

     if (bImgLoaded) {
        $(".scrollContainer").show("normal");
        clearInterval(vCycleImages);
     }
  }, 1000);
});

//--><!]]>
</script>
  2. Create a preloader gif (you can go to http://www.ajaxload.info/), save it in your theme's images directory and set it as a background for div class="scroll" in your theme's CSS stylesheet:
    .scroll {background:url(images/ajax-loader.gif) no-repeat center;}
  3. Still on the CSS, set the display for div class="scrollContainer" to hidden:
    .scrollContainer { display: none; }

    4. Clear your caches and serve.