Home > development Tools, Front End Development, Javascript > jQuery Image Zoom Plugin

jQuery Image Zoom Plugin

August 29th, 2009


The imageZoom jQuery plug-in makes it easy to show off your images in an easy and attractive manner.

The jQuery Plug-in

I put this plug-in together for a website that I’m doing.  I figured it might be good idea to put it in plug-in form so I can reuse the effect on other websites. 

Here is a look at what the website looks like.

Download Example


image

How to Use It

I tried to make it as simple as possible.  You simply have to add a class to an image, and initialize the plug-in in your JavaScript.

Here is a sample page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <style type="text/css" media="screen">
        .zoom{
            float:left;
        }
    </style>
   
    <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.imageZoom.js" type="text/javascript" charset="utf-8"></script>
   
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $('.zoom').imageZoom({captionHeight:40});
        });
    </script>
</head>
<body>
    <img src="image1.jpg" alt="Fan" class="zoom" />
    <img src="image2.jpg" alt="Head Stand" class="zoom" />
    <img src="image3.jpg" alt="Fail" class="zoom" />
    <img src="image4.jpg" alt="Last Pick in Gym Class"class="zoom"  />

</body>
   
</html>

 

Parameters

When initializing the plug-in you can pass in an object full of parameters to customize the look and feel of the display.

Here is a list of the parameters and what they do:

  • color – set’s the color of the caption’s text (e.g. “#ff0000”)
  • bgColor – set’s the color of the box behind the caption (e.g. “#ff0000”)
  • opacity – changes the opacity of the box behind the caption (e.g. 0.5)
  • captionHeight – the height of the box behind the caption (e.g. 40)
  • fontSize – the size of the caption’s font (e.g. “10pt”)
  • fontFamily – the font of the caption (e.g. “Arial, sans-serif”)

e.g.

1
    $(.zoom).imageZoom({captionHeight:40, color:”#efefef”, bgColor:”#369”});

How it Works

The plug-in basically takes the image and wraps it in a div and gives the div the class that the image originally had.  It then proceeds to create a background for the caption which is just a div with some CSS.  Then it creates the text based on what the image’s alt tag is.  This caption is wrapped in a span tag for styling.

So if you started with something like this:

1
<img src="image1.jpg" alt="Caption" class="zoom" />

 

You’ll end up with something like this:

1
2
3
4
5
<div class="zoom">
    <img src="image1.jpg" alt="Caption" />
    <span>Caption</span>
    <div class="bg"></div>
</div>

 

Feedback

I would definitely like to hear your feedback on the plug-in.  What you like about it, what needs improvement, etc.  By no means is this plug-in fully complete.  I look forward to hearing your suggestions.  Feel free to twitt me any recommendations at http://www.twitter.com/devirtuoso

 

Download Example

 

Author:
Categories: development Tools, Front End Development, Javascript
Tags: ,



Top