jQuery Image Zoom Plugin
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.
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 |
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
thanks a lot man