Change fading image by clicking on link jQuery

StackOverflow https://stackoverflow.com/questions/11242418

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!

Was it helpful?

Solution 

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top