I want to animate the image and keep it exactly in the center of the currently opened window. I have tried the following, but it is not working please suggest how to improve the code to get it working.

   // get image dimensions
   var h = $(this).height();
   var w = $(this).width();

    //get div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    var  pY = Math.round((div_h - h) / 2) + 'px';
    var  pX = Math.round((div_w - w) / 2) + 'px';

    $(this).animate({
        opacity:"1", 
        top: pY+"px",
        left: pX+"px",
        zoom: '500%'
    }, 'medium')

I want to animate the image and keep it exactly in the center of the currently opened window. I have tried the following, but it is not working please suggest how to improve the code to get it working.

   // get image dimensions
   var h = $(this).height();
   var w = $(this).width();

    //get div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    var  pY = Math.round((div_h - h) / 2) + 'px';
    var  pX = Math.round((div_w - w) / 2) + 'px';

    $(this).animate({
        opacity:"1", 
        top: pY+"px",
        left: pX+"px",
        zoom: '500%'
    }, 'medium')

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 8, 2012 at 8:28 DrColossos 13.1k33 gold badges4848 silver badges6868 bronze badges asked Oct 8, 2012 at 8:25 AbhinavAbhinav 96122 gold badges1111 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

It really depends on the rest of your markup. Your code works for me this way:

(check the demo)

HTML:

<div id="imgContainer">
<img src="your-image.jpg">
</div>​

CSS:

html, body, #imgContainer {
    width:100%; height:100%;
}
#imgContainer > img {
    position:absolute; top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:200px;
    max-width:100%;
    max-height:100%;
}

jQuery:

$('#imgContainer > img').on('click',function(){
   var h = $(this).height();
   var w = $(this).width();

    //get div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    var  pY = Math.round((div_h - h) / 2) + 'px';
    var  pX = Math.round((div_w - w) / 2) + 'px';

    $(this).animate({
        opacity:"1", 
        zoom: '500%'
    }, 1000)

});

You can use jQuery zoom plugin. Following is the usage example:

// Example:
$(document).ready(function(){
    $('a.photo').zoom({url: 'photo-big.jpg'});
});

// Using ColorBox with Zoom
$(document).ready(function(){
    $('a.photo').zoom({
        url: 'photo-big.jpg', 
        callback: function(){
            $(this).colorbox({href: this.src});
        }
    });
});