Search code examples
jqueryhtmlcloudzoomingclickable

Making the inner zoom image on the Cloud Zoom plugin clickable (jQuery)

I am using the Cloud Zoom jQuery plugin for the 'inner zoom' function (link to plugin page). I want it so that when someone is hovering over an image, they can click on the zoomed-in image to go to a link. Does anyone know how this is accomplished?

Thanks in advance!

Solution

  • Cloud-Zoom generates a div called "wrap" on each image that is using the cloud-zoom. We can add a "click" capability to the #wrap div using jQuery. In this example, we'll make a custom attribute called "myurl" where you'll specify where you want the image to link to.

    In your <head> tag:

    <script>
jQuery(window).load( function() {
    jQuery('div#wrap').click(function(){ window.location=$(this).find("a").attr("myurl");
     return false; });
});
</script>

    Then you'll add myurl="http://www.website.com" to the <a> of each cloud-zoomed image. Your html should look like this:

    <a href='main.jpg' myurl="http://www.bungy.com/" class='cloud-zoom'
    rel="position: 'inside', adjustX: 0, adjustY: 0, showTitle: false">
    <img src="thumb.jpg" style="opacity: 1;"/>
</a>

    Let me know how this works out for ya.