jquery - 如何在 jQuery 插件中插入图像横幅 slider 的链接？

Question

如何在 jQuery 插件中插入指向图像 slider 的链接？

我从 http://www.jqueryscript.net/slider/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides.html 获得了 slider 源

我尝试像这样插入链接:

<a href="www.google.coom"><img src="blablabla.jpg></a>

但是，它不起作用...(T^T)我在 Chrome 中重新检查(键 F12)

<div class="tgtimg" style="position:absolute !important; height:600px !important; width:100% !important; background:#fff !important; z-index:1 !important; overflow:hidden !important"><img src="http://ikkorea.i.hhosting.kr/main/main_20150710_1.jpg" style="position: absolute; z-index: 1; top: 0px; left: -568.5px; height: 600px; display: block;" class="current"></div>

   <a href="http://search.naver.com/search.naver?sm=tab_hty.top&amp;where=nexearch&amp;ie=utf8&amp;query=%EC%9D%B5%EC%8A%A4%ED%8E%98%EB%94%94%EC%95%84+%EB%8F%84%EC%B0%A9"></a>

我该怎么办？

这是我的网站: http://www.istkunst.co.kr/preview/?dgnset_id=5834

Answer 1

你可以添加一个全局的 class 到你想要被点击的所有图像，并且在 data-link 中添加每个图像的链接，像这样:

HTML :

<div id="content">
    <img class="img_link" data-link="www.google.com" src="1.jpg">
    <img class="img_link" data-link="www.gmail.com"  src="2.jpg">
    <img class="img_link" data-link="www.yahoo.com"  src="3.jpg">
</div>

在调用 responsiveSlides() 之后，创建函数来处理图片点击并重定向到存储在 data-link 中的相关链接。

JS :

$(function(){

    var p=$('#content').responsiveSlides({
        ....
    });

    //Handling click event and redirecting to the related link
    $('.img_link').click(function(){
        window.location.replace($(this).data('link'));
    });

});