posted on:February 21, 2011

jQuery plugin Easy Image Zoom


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 class="preloader">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!

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

DeliciousStumbleUpon RedditSubscribe

Comments (13 Comments)

  1. Alex Flueras
    February 21, 2011

    I really like this plugin as it it quite simple. I have used JQZoom before but will surely give this one a try. Thanks so much for sharing.
  2. Zeth
    February 22, 2011

    Another pearl from the maker of Easyslider... I'll hope for you, that this one is just nearly as good, cause in that case it would make this incredible. Big fan of your work! What's your background? Computer Science? Interest?
  3. Stephanie Smith
    February 23, 2011

    This plugin looks really good, haven't tried it yet but will be sure to try and work it into a project. It looks quite simple and easy to follow too, and is explained very well. I am looking forward to putting it to use. I really love learning new things about jquery and discovering new ways to do things. I think that the jquery is one of the most important parts of a site, and it's great to see the range of things you can do. Thanks http://twitter.com/weboptimum http://uk.linkedin.com/pub/web-design-optimum/28/660/15
  4. Ionut Chirica
    February 23, 2011

    Thank you for sharing this! Very nice and effective plugin. Will definitely use it in one of my projects :)
  5. Hoolio
    February 24, 2011

    Wow, always looked for something like this, first time found :)
  6. Chris Raymond
    February 24, 2011

    Can you have a series of images, inside a ul for example, and have the zoom work for each image? In other words, a matrix of small images, and hovering over any of them displays the large one.
  7. SCube Design
    February 25, 2011

    Amazing, this is what I have been searching for. Now can apply to my shopping websites :) thanks
  8. begs
    March 6, 2011

    This is great! I used Jquery Zoom before and got some issues in Google Chrome. This one here works perfectly and is integrated in no time. Thank you!
  9. izmir web tasarim
    March 8, 2011

    Nice. Thank you.
  10. Örgü
    March 8, 2011

    Thanks...
  11. Flux Spark
    March 9, 2011

    I'm loving these Javascript tutorials Alen. I've just bought a few books on Javascript and can't wait to get stuck in.
  12. Trendimod
    March 12, 2011

    Thanks...
  13. Yeow
    March 22, 2011

    the plugin is great! only... one thing... how or is possible to remove the "preload image"? (for save bandwidth if the visitor no roll over. That will be a very importan (from my point of view) Any way... thanks so much!

Sorry, the comment form is closed at this time.