0

Looking for a (simple) way to create a slideshow for my website I found the following question here: How to create image slideshow in html?. I borrowed the (corrected) code, adapted it to my needs and now I have what I wanted, but the transition between the images is too fast. It's not about the speed of the slideshow, but the blending or fading from one image into the next. The changes come too suddenly. I want them to happen gradually and smoothly. What can I add to it or how can I change it to slow it down? Here is it:

<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
        var step=1;
        function slideit()
        {
            document.images.slide.src = eval("image"+step+".src");
            if(step<2)
                step++;
            else
                step=1;
            setTimeout("slideit()",2500);
        }
        slideit();
</script>
</body>

Thank you for your help.

Community
  • 1
  • 1
LaloCast
  • 1
  • 1
  • 1

2 Answers2

2

You can do it by doing following change in your code

setTimeout(slideit(),10000);

instead of

setTimeout(slideit(),2500);

Here 2500 means 2.5 seconds and 10000 means 10 seconds, according to need you can use any parameter.

Hope this can solve your problem.

Viral Shah
  • 2,263
  • 5
  • 21
  • 36
  • 1
    **Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.** [Refer Doc here under Passing string literals](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout) – Vinay Dec 30 '14 at 02:59
  • **@JJPA and @gp: The issue is not the _speed_ of the slideshow, but the _blending_ or _fading_ from one image into the next. The changes come too suddenly. I want them to happen gradually and smoothly** – LaloCast Dec 30 '14 at 13:10
  • please update the question accordingly and check my answer for that. – gp. Dec 30 '14 at 17:08
0

As per your comment, you want to show the transition between image changes, then use jquery and do this in sequence:

  1. Animate opacity to 0 (fadeOut),
  2. change the image,
  3. animate the opacity to 1 (fadeIn)

or write your own animation logic to do the same without jquery.

Solution using jquery:

var $slide = $(document.images.slide);

function slideit() {
    //fadeout the last image.
    $slide.fadeOut(function () {
        document.images.slide.src = eval("image" + step + ".src");
        //after changing the image, fadeIn the new image.
        $slide.fadeIn(function () {
            if (step < 2) step++;
            else step = 1;
            //everything is done... now run the timer for next slide.
            setTimeout(slideit, 5500);
        });
    })
}

jsfiddle: http://jsfiddle.net/vaf84vLd/

gp.
  • 8,074
  • 3
  • 38
  • 39
  • Your _jsfiddle_ result is what I want. How can one make the fading run even more slowly? I've changed my code but it doesn't work. What am I doing wrong? Here is it using jquery: `` Thank you! – LaloCast Dec 31 '14 at 16:55
  • http://api.jquery.com/fadein/ to set custom timing of fadeIn and fadeOut. for eval, since you are only setting the image url (string), why don't you put the urls in an array and access from array using 0 based index e.g. `imageurls[step-1]` – gp. Dec 31 '14 at 17:35
  • Another thing: I’ve checked the link JJPA posted yesterday (see above), where they urge programmers to avoid using **eval()**, saying it is (potentially) dangerous: **code in the alternate syntax is a string of code you want to execute after delay milliseconds (using this syntax is not recommended for the same reasons as using eval())**. I would like to replace it, but don’t know what to use instead. – LaloCast Dec 31 '14 at 17:37
  • first of all, you wont need eval if you use an array. second, eval is evil but in your case since you are not **eval**uating any user input which could do any damage, it's still safe here. But it's not required here so avoid. – gp. Dec 31 '14 at 17:41
  • **“why don't you put the urls in an array and access from array using 0 based index”**. I wish I could do all this entirely on my own, but unfortunately, when it comes to programming, I am still a novice. Happy New Year! – LaloCast Dec 31 '14 at 18:19