Home/ Questions/Q 7612183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T01:50:45+00:00

I am creating a slideshow using jquery based on the code given here –

  • 0

I am creating a slideshow using jquery based on the code given here – http://snook.ca/archives/javascript/simplest-jquery-slideshow

This is the sample code: 

<html>
<head>
<style>
.fadein { position:relative; width:500px; height:332px; }
.fadein img { position:absolute; left:0; top:0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){
      $('.fadein :first-child').fadeOut()
         .next('img').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});



</script>
</head>
<body>
<div class="fadein">
  <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg">
  <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg">
  <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg">
</div>
<a href="#"><img id="try" src="http://freeimagesarchive.com/data/media/29/12_sky.jpg" /></a>
</body>
</html>

What I want is, when I hover over the image with the id try, the slideshow should get hidden for a certain duration and show a static image instead and regains the slideshow after few moments..I am pretty novice in jquery, can someone help me out in this??
Thanx..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If i understood your requirement correctly,

    this fiddle has the solution.

    I just added two event listeners(mousenter, mouseleave) for image element try and used 2 variables to keep track of hover state & slide show image source.

    var tryHovered = false;
var actualSrc = '';
$('.fadein img:gt(0)').hide();
setInterval(function() {
if(!tryHovered){
    $('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}
}, 3000);



$('#try').mouseenter(function(e) {
     tryHovered = true;
     actualSrc = $('.fadein :first-child').attr('src');
    $('.fadein :first-child').attr('src', this.src);//Replace this.src with any other static image path that you want to display.
}).mouseleave(function(e) {
     tryHovered = false;
     $('.fadein :first-child').attr('src', actualSrc);
});​
    • 0