So, having the day off, I decided to mess around a little with image manipulation. There are a ton of tutorials out there about LightBox and other similar jQuery plugins, but my goal was to make something simple without needing to have another page to load so I could see the image…to make it a little bit larger, so to say. I have a ton of other ideas about messing with images, but no clue how do them yet! Remember, I’m learning as I go here!!
It’s also worth it to note that the layout I intend to use this on is pretty generic. When you take a look at the example you will see what I mean. The image pane is off to the left and the text is to the right. The goal was to hover over the image and have it expand without displacing the text. It would be very easy to take this concept and put it in any page, but I will leave that for you, or maybe another tutorial!
As always: Here is the demo and the source code.
Step 1: Setup the HTML
Open a new file called index.html, then copy the code below a couple times and paste it into your ‘index.html’ file. Don’t forget to add the required jQuery script line as well as referencing any external links (like .css & .js files).
Basically, we make a ‘div’ for the image(s) and apply a class to them, then we make a class for the text which includes the section title and text:
<head>
<title>Image Enlargement</title>
<style type="text/css">
@import url(style.css);
</style>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body></body> tags. You can copy it a few times if you want
<div class="image">
<img src="images/flowers1.jpg" class="resize" />
</div>
<div class="text">
<h2>Beautiful flowers</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
Step 2: Styling the image and stuff
The next step is to work on styling the images and text. If you load the page right now, you will see that everything is just going straight down the page, nothing like what you saw in the demo. So, lets fix that!
Now we need to style the elements that we created in our HTML:
/* I'm using CSS to set the original width/height of the image.
Also adding a border and some padding to give it a frame feel,
and taking it out of normal flow by setting positioning to absolute*/
img.resize{
width:100px;
height:67px;
border:1px solid #000000;
padding:2px;
position:absolute;
z-index:1;
}
/* we give the p element some margin from the images to the left*/
.text{margin-left:120px;}
Step 3: The jQuery!
First off, recall that it’s a good thing to have your markup, styles, and scripts separate, it’s called semantics! For this tutorial I have not followed that rule, instead, I am just trying to keep it simple for you. We are going to place the following script in between the <head></head> tags.
Also, a important point: We don’t want to target this effect to all of the images on the page, hence the <img> class of ‘resize’. Now, only images with this class will get the jQuery action performed on them:
$(document).ready(function(){
Now we want to take current images with the class of ‘resize’ and store their width/height in the respective variables. Then, we are going to divide the two so we can get the proportion. This keeps the aspect ratio correct so our image doesn’t get all out of wack:
// get img width
var oWidth = $('img.resize').width();
// get img height
var oHeight = $('img.resize').height();
//You could always multiply the multiplier if you want to make the image adjust to a larger size. Keep in mind though it will get more blurry
var mpx = (oWidth / oHeight);
Now, lets get to the function. Target
<img> tags with the class resize when we hover over them and start running the function:
$('img.resize').hover(function(){
$(this)
//stops the event from happening in case of an abrupt mouseOut
.stop()
//custom animation effect to change the width and height of the img
.animate({
//take the original width/height X multipler and tag on the 'px'
width: (oWidth * mpx) +'px',
height: (oHeight * mpx) +'px'
//space the animation out over 1 sec (deals in milliseconds)
},1000);
},
//this is just like a mouseOut effect to take the img back to the original size
function(){
$(this)
//stops the event from happening in case of an abrupt mouseOut
.stop()
//this animation shrinks the image back to original size
.animate({
width: oWidth +'px',
height: oHeight +'px'
},1000);
});
});
Further Explanation of .hover()
You’ll notice that there are actually two functions here. Believe it or not, they both belong to the .hover() event. The way it works with jQuery is that you can specify an on/off state for hover: hover({over},{out}).
So, the first function you see takes care of the hover over state:
$('img.resize').hover(function(){
$(this)
.stop()
.animate({
width: (oWidth * mpx) +'px',
height: (oHeight * mpx) +'px'
},1000);
},
And the second function handles the leave (out) state:
function(){
$(this)
.stop()
.animate({
width: oWidth +'px',
height: oHeight +'px'
},1000);
});
Closing Notes
All said and done, this is actually very easy to do. Hopefully you see the power in jQuery and all the built in events and such, I know I do! There is so much potential with the .animate() effect, that this tutorial doesn’t even tap the possibilities!
Until next time!
Hi, thanks for this tutorial. I modified it slightly so that the event is triggered when you mouseOver an ‘a’ tag and it resizes the image contained within it. However, when you specify the href=”" attribute within the ‘a’ tag then in Internet Explorer (suprise suprise) the image first quickly contracts before expanding?!! If you don’t specify the href=”" then it works just fine! Very strange.
Do you know of any reason for this?
@PaulS
Sorry, i didn’t escape the tags, i was referring to the <a> tag…
@PaulS
Hi Paul,
Can you post your code and CSS? I’ll try to duplicate on me end and see what we come up with.
Gotta love IE!!!
I used a modified version of the code to toggle rollovers using the
<a>tag however I find that if you mouse over the options too quickly they will remain highlighted without fading back to their original state. Is there any way to avoid this?Hi Tol,
I guess it depends on how the code was modified. The .stop() function should be stopping any action that happens once the opposite happens (ie. the actual function is a MousOver, .stop() kicks in when there is a MouseOut. Can you post a link to your code/demo?
Thanks
Great concept…
thanks…
This is GREAT! Something lightweight and simple image expansion. Exactly what I’m looking for!
This got my mind working on a way to do a media page for videos. But I had one problem, the mpx variable was a little misleading. The calculation gets the proportion of the width and height but cannot make the picture any larger than that. If we change mpx to a constant, like 2, then the proportion is still maintained because of the way you wrote the rest of the code, manipulating the width and height by the same variable, mpx. One problem with keeping mpx = (oWidth / oHeight) is that the width and height could be the same which would result in mpx = 1. Then the image would not change at all. Also, if height (ex. 200) is greater than width (ex. 100) then mpx is a fraction (ex. 0.5). So the image will actually get smaller.
I think the solution is to make mpx a constant, like 2 for the image size to double.
Hi, all.
First off, thanks for the code Justin. Very cool!
Im still new to this stuff, but I’m trying to use it for an online store I’m building (link).
I’m trying to figure out if there is a way I can specify the x and y attributes, so that the resize function originates from the center of the image rather than the top left. I’m thinking I would have to move the image simeoultaneously with the resize. Any ideas are appreciated!
[...] http://justinfarmer.com/?p=14 [...]
interesting material, where such topics do you find? I will often go
thanks for the catch. I’ll get in there and fix it….
it´s nice
Awesome! Thanks.
Thanks for this. It works great. But I’ve got one question. If you have a picture that is taller than it is wide, and change the image size in the CSS, the image gets smaller. What do you need to do to get it to grow if the image is taller than it is wide?
I have the same problem as Paul.
(although I use a floated DIV instead of an A as the hover element)
Hi,
I’m trying out your code but it’s just not working.
Here’s my code : -
PD Projects Page
@import url(style.css);
This is the header.
Our Projects
Nullam dolor. Nulla mauris quam, pulvinar sed, tristique et, elementum eget, neque. Etiam porttitor, urna id venenatis placerat, orci enim ullamcorper mauris, suscipit placerat mi odio et lorem. Vestibulum dui elit, porttitor rutrum, accumsan quis, dignissim eget, ligula. Proin mollis.
Home
Projects
Enquiry
Contact
Our Subsidiaries
P&D Interior Design
P&D Engineering
afdjlka;dsjalkdsfjlkdsafjakdlfjksaldfjakdfkadfjadsklfj.
This is the right sidebar.
Copyright 2009-2010.
Thanks so much, this code is great. But I just tested my site on safari and that causes the images to shrink and completely disappear?
I’m building an interactive timeline for school, and thought that this effect was great for what I’m trying to do.
Any thoughts on how to change this? I changed the mpx to a constant of 2 because most of my images are vertical, and that seemed to do the trick.
Thanks!
Nice post, i did use this helpful jquery tutorial and i learnt a lot, thanks to you man.
Какие слова… супер, замечательная мысль
Если нужна помощь сюда http://animalszone.net/bespozvon
Thank You very much……., I really appreciate your code…
[...] 3 : Zoom image Please upgrade your browser Visit SiteDownload [...]
[...] 15. Inline Image Enlargement with jQuery [...]
so what do you think?
Amazing post! This could help a great deal of men and women learn about this matter. Do you need to incorporate video clips together with these? It would not having any doubt assist out. Your reason was spot on and owing to you; I most likely won’t need to detail each tiny point to my buddies. I can just direct them here.I can’t discover how you can subscribe to the comments by means of feedburner. I desire to retain on leading of this, how can I achieve that?