Reputation: 37
I'm doing an image gallery using javascript and when I click on an image to enlarge it, instead of enlarging to the center of the page it enlarges completely off the page. How do I get the images to move to the center while they are enlarging? My gallery is due at midnight and I just can't seem to get it to work! My prof hinted that I need to make the images move up and to the left while they are enlarging. I would really appreciate it if someone could help!
Upvotes: 1
Views: 51
Reputation: 3258
Without seeing the code I can only explain the concepts. You have to use both JS and CSS. Here is an example:
This the JS:
$(document).ready(function(){
if($(".myImage img").width() > $(".myImage").width()) {
var url = $(".myImage img").prop("src");
$(".myImage").css("background","url("+url+") no-repeat center center").empty();
}else{
$(".myImage img").width($(".myImage").width()).height($(".myImage").height());
}
});
This is the HTML:
<div class="myImage">
<img src="http://cdn.walyou.com/wp-content/uploads//2010/12/facebook-profile-picture-no-pic-avatar.jpg" width="350"/>
</div>
and finally the code in the CSS:
.myImage { border:1px solid #000; width:300px; height:300px; overflow:hidden; }
Upvotes: 1