Question

So I’m afraid this is another one of those slideshow questions that clutters up Stack, but I’m pretty new to jQuery and javascript and wanted to have a go at writing something myself rather than using plugins etc. What I need is pretty straight forward stuff:

Couple of boxes containing images with a class name of .slideshow, thus:

<div class="box b1">
  <a href="#" title="Project Title" class="slideshow 2000">
    <img src="img/portfolio/1.jpg" alt="Portfolio Item">
    <img src="img/portfolio/2.jpg" alt="Portfolio Item">
  </a>
</div>

<div class="box b2">
  <a href="#" title="Project Title" class="slideshow 2000">
    <img src="img/portfolio/1.jpg" alt="Portfolio Item">
    <img src="img/portfolio/2.jpg" alt="Portfolio Item">
  </a>
</div>

Each one is looping round the images happily then I hover on it and it pauses, then it continues on mouseout… Easy, right? ……

My jQuery currently looks like this (I’m in no-conflict mode…hence jQuery):

jQuery(".slideshow").each(function(){
    var $this_s;
    var $that = jQuery(this);

    $that.find("img:gt(0)").hide(); //hide all images after first one

    function slide($this_s){
        $this_s.find(":first-child").hide().next('img').show()
        .end().appendTo($that);
    }
    var int = $that.attr("class");
    int = int.replace("slideshow ", "");

    interval = setInterval(slide($that), int);
    $that.hover(function(){
        interval = clearInterval(interval);
    },function(){
        interval = setInterval(slide($that), int);             
    });
});

At the moment it’s doing a peculiar thing where on MouseEnter it does nothing, then MouseLeave it changes to the next image. I feel I’m almost there, I just can’t work out why setInterval isn’t doing it’s thang!

I have tried it without my funny little get interval from classname thing, and stuck a number inthere instead but still no joy.

Any help (again) would be much appreciated!

Thank you!

Answer 1

The second parameter (the delay) that setInterval() uses an int value to set it, you may want to consider using parseInt(int) when setting it, like so:

int = int.replace("slideshow ","");
int = parseInt(int);

or

interval = setInterval(slide($that), parseInt(int));

Hope this helps.