Zooming in and zooming out in one div

Question

I wanted to implement into my jQuery site option to zoom in and zoom out. This site uses a lot of jQueryUI Draggable elements (even like one of top of the other) and everything is working just fine, until I try to add a scaling option into it. The only way I tried is using -webkit-transform: scale(0.5) and it totally ruined all my draggables. The handles had wrong clip box and were almost unusable. Moreover, a whole page is being messed by this transform thing.

It looks way better when I use the browser built-in Ctrl + + / - option. It works just like I want it to work BUT the draggable area isn't the only thing on this site. The UI surrounding my area are getting smaller/bigger as well with the rest of the site.

I'm looking for a solution of zooming in and zooming out on my one div . I'm using jQuery only (because of my site structure limitations) so I'm not going to add any canvas areas to it.

If there's more info needed, just ask. I tried to mention every single important detail.

EDIT: Here's a screenshot for you to understand my page structure:

All UI elements are fixed on the site and the draggable center area is absolute .

Answer 1

$(document).ready( function() { $('#div img').hover(

function() {
    $(this).animate({ 'zoom': 1.2 }, 400);
},
function() {
    $(this).animate({ 'zoom': 1 }, 400);
});

});

$("#ZoomIn").click(ZoomIn());

$("#ZoomOut").click(ZoomOut());

function ZoomIn (event) {

$("#div img").width(
    $("#div img").width() * 1.2
);

$("#div img").height(
    $("#div img").height() * 1.2
);

},

function ZoomOut (event) {

$("#div img").width(
    $("#imgDtls").width() * 0.5
);

$("#div img").height(
    $("#div img").height() * 0.5
);

}

Answer 2

Try using http://jaukia.github.io/zoomooz/

JS:-

$(document).ready(function() {
    $("#element").click(function(evt) {
        $(this).zoomTo({targetsize:0.75, duration:600});
        evt.stopPropagation();
    });
});