asked on 7/13/2011

Make javascript / jquery image slideshow fade occur on hover

Hola,

I have a page with 3 galleries on, I want them to only begin their fades on hover / roll over. I have wrapped a link around the gallery and assume I need to edit the javascript to make this work but no idea how to.

Any help gratefully received!

jon

javascript:


function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});







html





<a href="#"><div id="slideshow">
 

<img src="images/products/album1.jpg" alt="" class="active" />
<img src="images/products/album2.jpg" alt="" />
<img src="images/products/album3.jpg" alt="" />
<img src="images/products/album4.jpg" alt="" />
<img src="images/products/album5.jpg" alt="" />

 
 

  
  </div></a><!-- end of slideshow -->






css:


#slideshow {
    position:relative;
float:left;
width:250px;
height:250px;
margin:0px 0 10px 0;
display:inline;
overflow:hidden;
}
	

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
	opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
	opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

Last Comment

7/13/2011

7/13/2011

Replace line 29 to 31 :

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

Open in new window

By :

	var timer = null;
	$(document).ready(function() {
		$('#slideshow IMG.active').mouseover(function() {
			if(timer==null) {
				timer = setInterval( "slideSwitch()", 5000 );
			}
		})
	})

Open in new window

leakim971

7/13/2011

Or if you want to stop it when the mouse leave the images, replace line 29 to 31 by :

	var timer = null;
	$(document).ready(function() {
		$('#slideshow IMG.active').hover(function() {
			if(timer==null) {
				timer = setInterval( "slideSwitch()", 5000 );
			}
		}, function() { 
			clearInterval(timer);
			timer = null; 
		});
	})

Open in new window

igloobob

7/13/2011

ASKER

hi leakim971,

thanks for looking at this.

That seems to work (the second option you suggested), on hover the start fading, if mouse off they stop, they don't start again though when you hove back over?

Also, as there are 3 galleries on the same page, currently hover over sets all playing together as they have the same id. When I tried to give them separate ids and added the extra lines for these new ids into the js and css it messes things up and they stop working.

Any ideas?

cheers

<a href="#"><div id="slideshow">

<img src="images/products/album1.jpg" alt="" class="active" />
<img src="images/products/album2.jpg" alt="" />
<img src="images/products/album3.jpg" alt="" />
<img src="images/products/album4.jpg" alt="" />
<img src="images/products/album5.jpg" alt="" />

</div></a>

<a href="#"><div id="slideshow">

<img src="images/products/frames1.jpg" alt="" class="active" />
<img src="images/products/frames2.jpg" alt="" />
<img src="images/products/frames3.jpg" alt="" />
<img src="images/products/frames2.jpg" alt="" />
<img src="images/products/frames3.jpg" alt="" />

</div></a>

<a href="#"><div id="slideshow">

<img src="images/products/thanks1.jpg" alt="" class="active" />
<img src="images/products/thanks2.jpg" alt="" />
<img src="images/products/thanks3.jpg" alt="" />
<img src="images/products/thanks4.jpg" alt="" />
<img src="images/products/thanks5.jpg" alt="" />

</div></a>

ASKER CERTIFIED SOLUTION

leakim971

7/13/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

igloobob

7/13/2011

ASKER

that doesn't seem to work, I tried implementing that to my own page and no luck, no luck either when I just copy the entire code above into a new blank page... nothing happens on hover. Any further ideas?

Thanks for the help!

leakim971

7/13/2011

>Any further ideas?

I changed css code a bit (remove/renamed some class), and I replace ID by CLASS for the div. ID must be unique in a document.
The first image have the class astFaded by default

leakim971

7/13/2011

My test page work not for you?

igloobob

7/13/2011

ASKER

no the test page does not work. I noticed that the first slideshow style still is an id # so also tried changing that to a class but neither way works..

igloobob

7/13/2011

ASKER

just noticed my path to the jquery file is wrong, I am re trying now...

leakim971

7/13/2011

test
leakim971-478344.flv

igloobob

7/13/2011

ASKER

ha ha yes that works a treat now thank you! i just needed to make that first style a class

.slideshow {
position:relative;
float:left;
width:250px;
height:250px;
margin:0px 0 10px 0;
display:inline;
overflow:hidden;
}

and also correct the path to the jQuery file.

Thank you!