CODEWITHSUNDEEP
jqueryhtmlcss
Abhinav
Abhinav

Reputation: 961

center zoom an image after clicking on it (JQuery)

I wrote a jquery function to zoom the image. The first line hides all the images and the last line zooms the current image. In between i have written code based on logic for displaying image in the center. But it is not working, can anybody help? 

     $("img").animate({opacity: "0.001", left: '0px'})

     var imgPosX = ( $(window).width() - $("this").width() )/2; 
     var imgPosY = ( $(window).height() - $("this").height() )/2; 

     $(this).css({"top": imgPosY+"px", "left": imgPosX+"px"}); 
     $(this).animate({opacity:"1", zoom: '150%'}, 'medium');},

Upvotes: 0

Views: 1793

Answers (4)

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

try this working DEMO

$(function(){

    $("img").css({opacity: "0.001", left: '0px'});

    objthis= $("img").eq(0);
     var imgPosX = ( $(window).width() - objthis.width() )/2; 
     var imgPosY = ( $(window).height() - objthis.height() )/2; 

     objthis.css({"position":"relative","top": imgPosY+"px", "left": imgPosX+"px"}); 
     objthis.animate({opacity:"1", zoom: '150%'}, 'medium'); 
});

Upvotes: 0

Neeraj
Neeraj

Reputation: 158

Instead of changing top and left try margin-left and margin-right

Upvotes: 0

Neil
Neil

Reputation: 5782

I would suggest to use a jQuery plugin since they're easy to find and do virtually anything you ask for. Take a look at this example for a possible alternative. This has the added advantage that you can have thumbnails and load the full photo when you pass your mouse over (avoiding having to download all full-scale images at once).

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Remove the "s surrounding this:

 var imgPosX = ( $(window).width() - $(this).width() )/2;
 var imgPosY = ( $(window).height() - $(this).height() )/2;

The this is a keyword in JavaScript not a string.

Upvotes: 2

Related Questions