CODEWITHSUNDEEP
jqueryslideshowhref
Minato Arisato
Minato Arisato

Reputation: 17

How to put a href in each img inside a div (slideshow Jquery)

I got a Jquery Slideshow from http://jonraasch.com/blog/a-simple-jquery-slideshow everything is working fine. I want to put a hyperlink for each picture inside the div, but when I put ahrefs inside it, it only displays the first picture and not the other pictures.

The sample is inside the link:http://jonraasch.com/blog/a-simple-jquery-slideshow

NOTE:I want Different Links for every picture in the slideshow.

Upvotes: 0

Views: 1892

Answers (2)

Harshit Tailor
Harshit Tailor

Reputation: 3281

Try this :-

-----change in js----

    var $active = $('#slideshow a.active');

    if ( $active.length == 0 ) $active = $('#slideshow a:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow a:first');

------change is css-------

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:350px;
}

#slideshow a {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow a.active {
    z-index:10;
    opacity:1.0;
}

#slideshow a.last-active {
    z-index:9;
}

</style>

---change in html---

<div id="slideshow">
   <a href="#"> <img src="image1.jpg" alt="Slideshow Image 1" class="active" /></a>
    <a href="#"> <img src="image2.jpg" alt="Slideshow Image 2" /></a>
    <a href="#"> <img src="image3.jpg" alt="Slideshow Image 3" /></a>
    <a href="#"> <img src="image4.jpg" alt="Slideshow Image 4" /></a>
</div>

Upvotes: 0

Jo&#227;o Dias
Jo&#227;o Dias

Reputation: 1108

You could use the each function.

var images = $('#slideshow').children('img');
$.each(images,function(){
   images.wrap('<a href="#"></a>');
});

NOTE: Haven't tried this code myself. Sorry.

Upvotes: 3

Related Questions