Home/ Questions/Q 7856783
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T20:49:01+00:00

So i’ve found this script: <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html

  • 0

So i’ve found this script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple Slide Show with jQuery</title>
    <script type='text/javascript'
    src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js'>
    </script>
    <script type="text/javascript">
        var imgs = [
        'images/emo.jpg',
        'images/icon068.gif',
        'images/icon260.jpg'];
        var cnt = imgs.length;

        $(function() {
            setInterval(Slider, 3000);
        });

        function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
           $(this).attr('src', imgs[(imgs.length++) % cnt]).fadeIn("slow");
        });
        }
</script>
</head>
<body>
    <img id="imageSlide" alt="" src="" />
</body>
</html>

which almost does it for me.

How can it be converted so the images are not hard coded but the script adapts dynamically to number of images? I intend to change slider images quite often – the number of images will not always be the same.

I’m no javascript expert so don’t laugh if it’s something simple.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From looking at the source code, it seems the script should not work: When the array’s length is set to zero, it becomes empty – even if the array’s length is later changed back (tested and verified in Chrome).

    Check the jQuery cycle plugin (http://jquery.malsup.com/cycle/). Since you are already using jQuery (or the script is), this might be perfect for you – just generate a single div with all the images inside, then tell the plugin to cycle them, then add new images as needed, and the plugin should use them automatically.

    Here is the basic demo for this plugin; the usage is super-easy (link jQuery, link the plugin, include the images, point the plugin to the images):
    http://jquery.malsup.com/cycle/basic.html (source code)

    Here is the list of options you can set to customize the plugin, if you want:
    http://jquery.malsup.com/cycle/options.html
    Of particular interest are: fx(the transition used), speed, easing(the speed curve for the transition).

    Edit: Here’s a little script I wrote (untested):

    Cycler=function(container){
  var container=$(container);
  var running=false;
  var stopping=false;

  this.start=function(){
    stopping=false;
    if(!running) run();
  }

  this.stop=function(){
    stopping=true;
  }

  var run=function(){
    if(stopping){
      running=false;
      stopping=false;
      return;
    }
    running=true;
    var old=container.find(':visible');
    var new=old.nextSibling();
    if(!new.length) new=container.children(':first');

    old.fadeOut('slow');
    new.fadeIn('slow', run);
  }
}

    It’s far from perfect, but you can start from that.

    • 0