Basic Zoom In Effect for Images using jQuery!
CEan #-Link-Snipped-# asked how can we make images zoom in after a click. We can use .animate() function and change the properties of an image. Lets have a container and place all the images.
If #-Link-Snipped-# was asking about having a set of images and upon clicking on it, making them show in a modal window, then dude, you are asking how to make something like a Lightbox2! 😀 Check it out too! Try this out and let me know your comments.
​And now, lets define a thumbnail size of the images. The original size is 640px x 480px. Lets take the half of it. So, we will keep it as 320px x 240px. We need to define that in the style as:[img]https://lorempixel.com/640/480/nightlife/1/[/img] [img]https://lorempixel.com/640/480/nightlife/2/[/img]​
​.zoom img {
width: 320px;
height: 240px;
}​Now comes the JavaScript part! 😀 We bind the click function of the image to animate its CSS Width and Height properties. That can be done by:​$(".zoom img")​.click(function(){
$(this).animate({
width: '640px',
height: '480px'
}, 1000);
});​Now, you can see the live demo here: Edit fiddle - JSFiddle - Code PlaygroundIf #-Link-Snipped-# was asking about having a set of images and upon clicking on it, making them show in a modal window, then dude, you are asking how to make something like a Lightbox2! 😀 Check it out too! Try this out and let me know your comments.
Replies
-
Manish GoyalThank you praveen for such a quick response
Actually I was looking for something like this
#-Link-Snipped-#
on product image, this is one of my project and i want zoom plugin to work only on click -
PraveenKumar Purushothaman
You mentioned that it shouldn't come on hover right?goyal420Thank you praveen for such a quick response
Actually I was looking for something like this
#-Link-Snipped-#
on product image, this is one of my project and i want zoom plugin to work only on click -
PraveenKumar PurushothamanIn case, you wanna build something like that, it is kind of Image Preview on Hover. You can see a detailed tutorial on how to do that here: #-Link-Snipped-#
You are reading an archived discussion.
Related Posts
most of the chemical engineering student in nigeria tend to to dive into the petroleum sector after graduating is there any sector a chemical engineer can work apart from the...
i am recently working on seminar "finite element analysis of gear" and project "dynamic analysis of helical gear by photoelasticity". if any one have any information please share with me.i...
class box
{
int height;
int width;
int length;
box(int h=0, int w=0, int l=0)
{
height=h;
width=w;
length=l;
}
int vol()
{
return height*width*length;
}
}
public class consdemo...
How noise can be converted into electrical energy??
Real time project ideas based on power electronics??EEE projects??