How to set target for zoomed image in jQuery zoom plugin by Jack Moore

Question

I'm using both the zoom and colorbox plugins by Jack Moore. I've got everything working fine except for being able to specify a different target area for the zoomed image to display in.

The settings documentation on this page: http://www.jacklmoore.com/zoom/ says,

"target false A selector or DOM element that should be used as the parent container for the zoomed image."

I've tried setting it like any other option, but I'm not having any luck. For example,

$(document).ready(function(){
$('#target-img').zoom({magnify:2,
            callback: function(){
                $(this).colorbox({href: this.src, magnify: 2, target: '#zoom-window'});
            }
});

});

The zoomed image stays in the parent container. See this fiddle for a full example:

http://jsfiddle.net/contendia/MFrV3/2/

Answer 1

the target option only apply to the .zoom plugin not the .colorbox so you need to set the target in the .zoom call like this

$(document).ready(function(){
    $('#target-img').zoom({    
           magnify:2,
           target:$("#zoom-window").get(0)//target need to be the html element 
    }).colorbox({href: $("img",this).attr("src")});//you can chain the colorbox call
    //get attr src of the img inside the target-img
});    

to get the src of the img you need to get the actual img inside the #target-img div and to retrieve the src you need to use .attr
http://jsfiddle.net/MFrV3/15/