Webmasters Gallery

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!