Search code examples
jquerypopupcolorbox

Navigate to another page, on clicking image using Colorbox

I can't seem to figure out how to navigate the user to another page, when clicked on the image using Colorbox. Any help is appreciated, thanks!

Here is my code ->

<html>
<head>
    <title>Pop up!</title>
    <link href="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="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(document).ready(function(){
    $.fn.colorbox({href:"Pop_up_Int.jpg", open:true});
});
</script>
</head>
<body>

</body>
</html>
Solution

  • I'm not sure if the version of colorbox you're using will do the trick. The most recent version has a callback (onComplete) and you can utilize it as such:

    $(document).ready(function(){
    var url = "http://www.passmark.com/images/monitortestscreenshot5.gif";
    $.colorbox({href:url, onComplete: function() {
        $('#colorbox img.cboxPhoto').wrap('<a href="'+url+'"></a>');
    }});
});

    Fiddle: http://jsfiddle.net/bes2j53n/1/.