Home/ Questions/Q 639771
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T20:52:47+00:00

I am using one of snook.ca script for simple slideshow. Here it is in

  • 0

I am using one of snook.ca script for simple slideshow. Here it is in a nutshell:

<div class="fadein">
    <img src="banner1.jpg" width="645" height="307"/>
    <img src="banner2.jpg" width="645" height="307"/>
    <img src="banner3.jpg" width="645" height="307"/>
</div>
<script>
    $(function(){
        $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

Now I have tried to make these images clickable at while in slideshow. So my markup will be something like:

<div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" bwidth="645" height="307"/></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>

How do I achieve this functionality without making the script too complicated. Please note that <img/> tags are provided to me and I have no control over it.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Working from CrazyJugglerDrummer‘s try, you’d want to hide and then cycle the as, not the imgs. Otherwise you’ll be looking for next('img') where it doesn’t exist.

    update Seems like it’s a mix of CSS and js. I have it working now, like so:

    <div class="fadein">
  <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307"/></a>
  <a href="google.com"><img src="banner2.jpg" width="645" height="307"/></a>
  <a href="live.com"><img src="banner3.jpg" width="645" height="307"/></a>
</div>
<script>
$(function(){
    $('.fadein a:gt(0)').hide();
setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>

    with CSS

    .fadein { position:relative; width:645px; height:307px; }
.fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
img { border:0; display:block; }

    You have to make sure your anchors and images are displayed block, and that the absolute position is set on your anchor. Also you need to further specify the :first-child so as not to fade the image.

    further update Using 1.3.2 jQuery and XHTML Strict. Works in FF, IE6 – 8, Safari, Chrome, and Opera.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
  .fadein { position:relative; width:645px; height:307px; }
  .fadein a { position:absolute; left:0; top:0; display:block; text-decoration:none; }
  img { border:0; display:block; }
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function(){
  $('.fadein a:gt(0)').hide();
  setInterval(function(){$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');}, 4000);
});
</script>
</head>
<body>
  <div class="fadein">
    <a href="yahoo.com"><img src="banner1.jpg" width="645" height="307" alt="1" /></a>
    <a href="google.com"><img src="banner2.jpg" width="645" height="307" alt="2" /></a>
    <a href="live.com"><img src="banner3.jpg" width="645" height="307" alt="3" /></a>
  </div>
</body>
</html>
    • 0