Easy Zoom for images in Blogger using JQuery

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'
 });

});

This article is from http://cssglobe.com/post/9711/jquery-plugin-easy-image-zoom

Share on Facebook Share on Twitter Share on Google Plus

About hacktohell

Love technology.