-1
<ul class="slides">
<li class="slide" data-slide="1">
    <img src="smiley1.gif" alt="Smiley face1">
</li>
<li class="slide selected" data-slide="2">
    <img src="smiley2.gif" alt="Smiley face2">
</li>
</ul>

How do i add a link to the selected image(class:slide selected) using Jquery?

satish
  • 1
  • you means source or redirect link – Omi Jul 20 '17 at 19:02
  • Please provide code example of what you tried. – Fabien Jul 20 '17 at 19:28
  • Check this https://stackoverflow.com/a/179717 – Chidi Ekuma Jul 20 '17 at 19:46
  • Hello and welcome to StackOverflow. Please take some time to read the help page, especially the sections named ["What topics can I ask about here?"](http://stackoverflow.com/help/on-topic) and ["What types of questions should I avoid asking?"](http://stackoverflow.com/help/dont-ask). And more importantly, please read [the Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922). You might also want to learn about [Minimal, Complete, and Verifiable Examples](http://stackoverflow.com/help/mcve). – herrbischoff Jul 20 '17 at 19:57

1 Answers1

1

You can use jQuery and the wrap() function to loop through all images in the list and put a link around it, the following example will navigate to the image itself.

$(document).ready(function(){
    $('.selected img').each(function(){
        $(this).wrap('<a href="' + $(this).attr('src') +'"></a>');
    })
})

If you want to add a link to another page/site replace $(this).wrap('<a href="' + $(this).attr('src') +'"></a>') with $(this).wrap('<a href="www.google.com"></a>') like this

$(document).ready(function(){
    $('.selected img').each(function(){
        $(this).wrap('<a href="www.google.com"></a>');
    })
})

If you want to use javascript to just navigate to another website after clicking on the image you you can set window.location.href on the click event like such

$(document).ready(function(){
    $('.selected img').click(function(){
        window.location.href='www.google.com';
    })
})
CumminUp07
  • 1,936
  • 1
  • 8
  • 21
  • 1
    Great solution! but to answer to the requirement you could try better something like: `$('.selected img').each(function(){...`. That way you only address the selected one – DIEGO CARRASCAL Jul 20 '17 at 19:33
  • @CumminUp07: Thanks for you solution, but I want to navigate to a link for example(https://google.com) when the user clicks on the Image. Can you please help? – satish Jul 20 '17 at 20:44