CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Kajcioch
Kajcioch

Reputation: 175

Zooming in and zooming out in one div

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: enter image description here

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

Upvotes: 2

Views: 4917

Answers (2)

Waruna Manjula
Waruna Manjula

Reputation: 3497

If you want that image to be zoomed on mouse hover :

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

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

});

​or you may do like this if zoom in and out buttons are used :

$("#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
);

}

Upvotes: 3

Aditya Singh
Aditya Singh

Reputation: 9612

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

JS:-

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

Upvotes: 1

Related Questions