Question

jQuery的新手，所以希望有人可以帮助这个基本的东西：我发现用户3571366提供的Colorbox这个很棒的功能，并且工作得很好。

<link href="popup/colorbox.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="popup/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.colorbox({href:"popup/popup_image.jpg", open:true});
});
</script>

但是，如何使popup_image.jpg可点击（即用户点击图片以获取网址？）

Answer 1

对于一个静态链接，您可以使用以下代码

$.colorbox({
    href:"", 
    open:true,
    onComplete:function(){
        $('#cboxLoadedContent').click(function(){
            window.location.replace('http://www.google.com/');
        })
    }
});

对于动态图片，您可以为data-url链接添加anchor值，以便点击它会动态重定向到该链接。

<强> HTML

<a class="group1" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee." data-url="http://stackoverflow.com/questions/26623556/colorbox-function-how-to-make-image-clickable">Stackoverflow</a>

<强> JS

$(".group1").colorbox({rel:'group1',onComplete:function(e){
    if($(e.el).data('url'))
        $('#cboxLoadedContent').prop("onclick", null).unbind('click').click(function(){
                window.location.replace($(e.el).data('url'));
        })
}});

<强>更新

使用以下代码替换您的代码。

$.colorbox({ 
    href:"http://s3.argim.net/files/s/gatobailedw7_4ew.gif", 
    open:true, 
    onComplete:function(){ 
        $('#cboxLoadedContent').click(function(){ 
            window.location.replace('http://google.com');
        }) 
    }
});

注意：不要忘记添加http://

Colorbox功能如何使图像可点击

1 个答案: