Change fading image by clicking on link jQuery

Question

I created an image fading slideshow reading this article. The code looks like this:

$(document).ready(function() {
    $('#iPhoneExample img:gt(0)').hide();
    setInterval(function() {
        $('#iPhoneExample :first-child').fadeOut(1000)
        .next('img').fadeIn(1000)
        .end().appendTo('#iPhoneExample');
    }, 3000);
});

and this is the HTML and CSS:

<div id="iPhoneExample">
<img src="photo1.png" alt="" />
<img src="photo2.png" alt="" />
<img src="photo3.png" alt="" />
<img src="photo4.png" alt="" />
<img src="photo5.png" alt="" />
<img src="photo6.png" alt="" />
</div>

#iPhoneExample {
    width:305px;
    height:597px;
    background:url('immagini/iphoneBg.png') center no-repeat;
    position:relative;
    margin:0px 20px 0px 94px;
}
#iPhoneExample img {
    position:absolute;
    top:106px;
    right:22px;
    bottom:104px;
    left:25px;
}

Now I want to do this. When the page loads, the slideshow starts but I have 6 links, one for each image that I want to use to show the corresponding image... For example the slideshow starts and shows photo3 but if I click on photo5 link, the slideshow must show photo5 and then continue to photo6 etc.

I believe I should use the .click function but I don't know what to write inside it. I'm a newbie with jQuery.

Thank you so much for your help!

You can do one thing, use clearInterval whenever a photo is clicked, replace the old photo by the new photo, get its current position (whether this is he 3rd or the 4th image, for example), and apply setInterval for the next photo to replace this photo. This way, if the user doesn't click a photo, the setInterval will go on, while if the user clicks a photo, it will redefine itself and go on... — SexyBeast, Jun 28 '12 at 10:17
Yes I think it's exactly what I'm looking for but can you show me some code because I rarely use jQuery and I can't do so much... Thanks! — matteodv, Jun 28 '12 at 10:18

score 0 · Accepted Answer · answered Jun 28 '12 at 20:16

<html>
<head>
<style>
div { width: 850px; height: 350px; background: green; }
</style>
<script type = "text/javascript" src = "jquery.js"></script>
<script type = "text/javascript" />
$(function() {
arr = ['photo1.jpg','photo2.jpg','photo3.jpg','photo4.jpg','photo5.jpg','photo6.jpg'];
$("#iPhoneExample").append("<img src = '"+arr[0]+"' />");
timer = setInterval(function() {
var curnum = parseInt(($("#iPhoneExample").find("img").attr("src").match(/\d/g))[0]);
var nextnum = curnum > 5 ? 0 : curnum;
$("#iPhoneExample img").replaceWith("<img src = '"+arr[nextnum]+"' />");
},3000);
$("a").click(function(e) {
  if ($("a").filter(function() { return $(this).hasClass("clicked"); }).length)
    {
      clearInterval(newtimer);
    }
  else {
        $("a:first").addClass('clicked');
       }    
  e.preventDefault();
  var curnum = parseInt(($(this).attr("href").match(/\d/g))[0]);
  nextnum = curnum-1;
  clearInterval(timer);
  $("#iPhoneExample").html("<img src = '"+arr[curnum-1]+"' />");
  newtimer = setInterval(function() {
  nextnum = nextnum + 1 > 5 ? 0 : nextnum + 1;
  $("#iPhoneExample").html("<img src = '"+arr[nextnum]+"' />");
  },3000);
  });

});
</script>
</head>
<body>
<div id = "iPhoneExample"></div>
<a href = "www.photo1.html">Photo1</a>
<a href = "www.photo2.html">Photo2</a>
<a href = "www.photo3.html">Photo3</a>
<a href = "www.photo4.html">Photo4</a>
<a href = "www.photo5.html">Photo5</a>
<a href = "www.photo6.html">Photo6</a>
</body>
</html>

Change fading image by clicking on link jQuery

1 Answers1