CODEWITHSUNDEEP
javascriptjqueryimagehyperlinkslideshow
user3149006
user3149006

Reputation: 13

Need image in Jquery slideshow to be a link

This is what I have for jquery

    $(function(){
        $('#slides').slides({
            preload: true,
            preloadImage: 'img/loading.gif',
            play: 5000,
            pause: 2500,
            hoverPause: true
        });
    });

Here is my HTML 

    <div id="slides">
   <img height="440" width="384" src="img/example-frame.png" alt="Example Frame" id="frame">
      <div class="slides_container"> 
      <a href="try_events_shamrock_race_green_half.htm"><img src="images/slidephotos/race_slide_photos/GS_slide.png" width="395" height="330" alt="Slide 1" /></a> 
      <img src="images/slidephotos/race_slide_photos/RD_slide.png" width="395" height="330" alt="Slide 2" /> 
      <img src="images/slidephotos/race_slide_photos/VH_slide.png" width="395" height="330" alt="Slide 3" />
       <img src="images/slidephotos/race_slide_photos/FHH_slide.png" width="395" height="330" alt="Slide 4" />
       <img src="images/slidephotos/race_slide_photos/HC_slide.png" width="395" height="330" alt="Slide 5" />
       <img src="images/slidephotos/race_slide_photos/CR_slide.png" width="395" height="330" alt="Slide 6" />
       <img src="images/slidephotos/race_slide_photos/CC_slide.png" width="395" height="330" alt="Slide 7" />
       <img src="images/slidephotos/race_slide_photos/BB_slide.png" width="395" height="330" alt="Slide 8" />

      </div>
    <a href="#" class="prev"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev" /></a> <a href="#" class="next"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next" /></a>


  </div>

You can see on the first image ive tried to make it link, but its a no go. Any help would be greatly appreciated, Thanks

Upvotes: 1

Views: 181

Answers (1)

Lee Bailey
Lee Bailey

Reputation: 3624

Depending on what plugin you are using, there may already be a built-in way to do this, but one option would be to add data attributes to your images containing the url you want to link to:

<img src="images/slidephotos/race_slide_photos/FHH_slide.png" width="395" height="330" alt="Slide 4" data-link="http://www.yoursite.com" />

Then you would add a click event handler to the images like this:

 $(document).on('click', '.slides_container img', function(){
        var url = $(this).data('link');
        if (typeof url !== 'undefined')
        {
            window.location.href = url;
        }
    });

Upvotes: 2

Related Questions