Home/ Questions/Q 8981711
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T20:24:17+00:00

So i have this great slideshow code which works perfectly with my img tags

  • 0

So i have this great slideshow code which works perfectly with my img tags until I wrap them in an anchor tag. instead of just grabbing the img tag the slideshow also grabs the anchor tags and displays them. In other words instead of cycling through 4 images, it cycles through 4 images and then 4 anchor tags. This results in 4 blank images after the initial images. 

      <script type="text/javascript">

      $(function(){
          $('div.fadein  a img.bestof:gt(0)').hide();
          setInterval(function(){
        $('div.fadein a img.bestof:first-child').fadeOut()
           .next('img.bestof').fadeIn()
           .end().appendTo('.fadein');}, 
        3000);
      });

      </script>

      <style>
      .fadein { position:relative; width:200px; height:160px; }
      .fadein img { position:absolute; left:0; top:0; }
      </style>

      <div class="fadein">
        <?php foreach ($array as $image){
          print("
           <a href='$image[link]' target='$target'><img src='$image[image]' class='bestof' style='width:200px; height:160px;' ></a>
         "); } ?>
      </div>

Any suggestions I need the anchor tags so that I can make each image clickable. I tried just cycling through the Anchor tags but then no images popped up.

Here is the Generated HTML.

<script type="text/javascript">

$(function(){
    $('div.fadein  a img.bestof:gt(0)').hide();
    setInterval(function(){
      $('div.fadein a img.bestof:first-child').fadeOut()
         .next('img.bestof').fadeIn()
         .end().appendTo('.fadein');}, 
      3000);
});

</script>

<style>
.fadein { position:relative; width:200px; height:160px; }
.fadein img { position:absolute; left:0; top:0; }
</style>

<div class="fadein">

     <a href='http://google.com' target='_blank'><img src='http://4.bp.blogspot.com/-PilKprMNhpo/TVc4rKk_gKI/AAAAAAAAAWo/O3wPK3kIH_8/s1600/two_flowers.preview.jpg' class='bestof' style='width:200px; height:160px;' ></a>

     <a href='http://hooplaha.com' target='_blank'><img src='http://www.redbudfarms.com/wp-content/uploads/2011/01/cone-flowers-preview.jpg' class='bestof' style='width:200px; height:160px;' ></a>

     <a href='http://facebook.com' target='_blank'><img src='http://images.fanpop.com/images/image_uploads/Flower-Wallpaper-flowers-249398_1693_1413.jpg' class='bestof' style='width:200px; height:160px;' ></a>

     <a href='http://bing.com' target='_blank'><img src='http://www.rosarian.com/graphics/images/rose.jpg' class='bestof' style='width:200px; height:160px;' ></a>

     <a href='http://linkedin.com' target='_blank'><img src='http://blog.zap2it.com/pop2it/rainbow-roses.jpg' class='bestof' style='width:200px; height:160px;' ></a>
   </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    demno: http://jsbin.com/welcome/61090

    <script type="text/javascript">
    $(function() {
        $('div.fadein  a:gt(0)').hide();
        setInterval(function() {
            $('div.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');
        }, 1000);
    });

</script>

<style>
    .fadein a {
        position: absolute;
        left: 0;
        top: 0;
        display: inline-block;
    }
    .fadein {
        position: relative;
    }
    .fadein img, .fadein, .fadein a {
        width: 200px;
        height: 160px;
    }
</style>
    • 0