17
2011
jQuery plugin: Easy Image Zoom
An article by qeqnes
I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!
Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. I hope you’ll find this very easy to apply to your own websites.
Take a look at the demo or Download the plugin
Introduction
First I suggest you check out the demo to see what the plugin is all about. Then come back here and continue reading this article 
Markup
I usually start this section of my articles with the same sentence: “the markup couldn’t be simpler” The main idea behind this and other plugins I write is – keeping the markup as simple as possible. No unnecessary elements and bloated HTML. Also markup (for all of my plugins) makes content accessible even with JavaScript turned off, which is important.
All you need for this plugin to work is anchor element containing the small image linking to the large image, but this structure is required:
<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>
The script (and CSS) takes care fo the rest.
Options
This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element’s size, position and appearance. In my demo I am using this definition:
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
You will notice the line-height property… I am using if for vertical alignment of the message text that is displayed while the detailed image is loading. Of course you can use your own positioning methods, your own text, insert extra markup if you want to and add your own CSS to style the preloader. Perhaps some preloader gif as a preloader image? I’ll leave that to you, what I am showing here is a bare-bone example that you can easily customize.
Let’s take a look at the plugin options. Here is a list of them with default values and descriptions:
id
Default value: “easy_zoom”
The ID of the newly created image zoom element. Of course you can use your own, but make sure you update the CSS accordingly.
parent
Default value: “body”
This defines the DOM element where newly created image zoom element will be inserted. You can insert it anywhere you like in the DOM by editing this option.
append
Default value: “true”
If set to true (by default) the newly created element will be inserted as a last child of the parent element. If this option is set to false then the newly created element will be inserted as a first child of the parent element.
preload
Default value: “Loading…”
A message that appears before the large image is loaded. You can use this option to write your own preload messages and insert any HTML you want. If you want to use the preloader gifs, I suggest you go with background images.
error
Default value: “There has been a problem with loading the image.”
In case the large image is not found or can’t be loaded, this error message will appear. You can use this option for custom error messages.
Here’s a sample code for using some custom options:
jQuery(function($){
$('a.zoom').easyZoom({
id: 'imagezoom',
preload: '<p>Loading the image</p>'
parent: '#container'
});
});
In one of the next articles here on CSS Globe I will offer a one page portfolio template that uses this image preview, so stay tuned!
About the author
Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.To get in touch, visit Alen’s personal page, follow Alen on Twitter or become a Facebook friend.
Related Posts
15 Comments + Add Comment
Leave a comment
Tags
Ads
Thanks! Will probably be nice to anyone who usess it, including myself. Sustain the nice work for positive i’ll take a look at extra posts.. Thank you for posting this, It’s just what I was browsing on bing. I’d very much rather hear opinions from an individual, rather than a corporate web page, that’s why I like blogs so much. Thanks! pleasing
fantastic.
Just thought I’d drop you a line to tell you your site really rocks! I have been looking for this sort of information for a long time.. :O So mush Info :O THis Is he MOst AMAzing SIte DUDe great outstanding
.
Do you have more great atrilces like this one?
I Really enjoyed your blog. I just bookmarked it. I am a regular visitor of your website I will share It with Yep. I lurk there often. You guys have a wonderful blog. Keep up the good work.. Such a type of blog post will definitely click to numerous viewers. A good article and useful for its written content. Many thanks for sharing it up! fantastic tremendous more please.
That’s the best asnewr of all time! JMHO
Now I feel stupid. That’s claeerd it up for me
My sis advised me about your site and how great it is. She’s right, I’m really impressed with the writing and slick design.. I really loved the post so I used my Digg account to digg it. Agreeable Amazing : ).
Youre on top of the game. Thanks for shainrg.
Hey very nice blog!!. Just stumbled upon your website while doing a Google search. Great info BTW. A lot more A rise in.
Your blog is so informative keep up the good work!!!!. TY a ton for posting, it was very informative and helped tons. Amazing : ) Agreeable.
Just discovered this blog through Google, what a pleasant shock!. Such a type of blog post will definitely click to numerous viewers. A good article and useful for its written content. Many thanks for sharing it up! Added Additional A rise in.
I Really enjoyed your blog. I just bookmarked it. I am a regular visitor of your website I will share It with Yep. I lurk there often. You guys have a wonderful blog. Keep up the good work.. Such a type of blog post will definitely click to numerous viewers. A good article and useful for its written content. Many thanks for sharing it up! fantastic tremendous more please.
I thank you hmulby for sharing your wisdom JJWY
One or two to reemmber, that is.
It’s spooky how celevr some ppl are. Thanks!