Zoomple – simple jQuery plugin for image zoom

Posted by admin

Zoomple is a very simple jQuery plugin for image magnifying. It allows you to add a zoom to your image.

Zoomple is tested in : IE6+ , Firefox 3, Opera 9+, Safari 3+, Chrome 2.0.172.33

Demo

Here is a small demo

Download the demo

How it works

Download  the jQuery library and zoomple.js(2Kb). Download blank.gif and put it in the “images” folder.

Link them in the head of your page:

<script src="zoomple-1.3.js" type="text/javascript"></script>

Use the following XHTML format:

<a href="big_preview.jpg" class="zoomple"><img src="small_image.jpg" alt="" /> </a>

Add the following CSS to your stylesheet:

<style>
#Previewholder{
left:0;
top:0;
position:absolute;
display:none;
background:#fff;
border:1px solid #DCDCDC;
}
#Previewholder img{
display:block;
}
#Previewholder p{
margin:0;
padding:0;
font:11px Verdana,sans-serif;
color:#090808;
}
#Previewholder p span{
border-top:1px solid #ccc;
display:block;
padding:5px;
}
</style>

To call the plug-in you have to put in the head of your xhtml:

<script type="text/javascript">
	$(document).ready(function() {
		$('.zoomple').zoomple();
	});
</script>

You’re done!

How to customize Zoomple?

Zoomple has some additional options that make it more useful and flexible.

Sometimes you don’t want the zoom to load the image right when the mouse points on the object. Zoomple gives you the opportunity to set a delay and postpone the load of the big image with a few milliseconds. To do this you have to give Zoomple the following parameters:

$('.zoomple').zoomple({delay : 1000});

You can add some text to the preview by adding content in the alt tag for the image. In the demo i intentionally added a span tag to style it with additional CSS.

<a href="6.jpg" class="zoomple"><img src="6s.jpg" alt="Some text" /> </a>

Complete options list

delay – Delays the zoom start. Default value: 0

zoomWidth – sets the width of the preview. Default value: 300
zoomHeight – sets the height of the preview. Default value: 300
offset – sets the offset of the thumbnail from the mouse cursor.Default value:  {x : 5,y : 5}
loaderURL - specifies the source for the “loading” image. Default value(images/loader.gif)
blankUrl - specifies the source for the blank image. Default value(images/blank.gif)
source - specifies the source attribute that holds the path to the magnified image. The two possible options are ‘href’ and ‘rel’. Default value is ‘href’
onZoomShow – executes the supplied function when the magnifier is shown
onZoomHide - executes the supplied function after the magnifier hides

Known Bugs

I try to fight all the bugs i meet but i will highly appreciate any feedback you send me.

IE6 Flickering bug

Internet Explorer 6 has this annoying  flickering bug. Read more about this bug.

To solve the problem you will have to add to your .htaccess file the following code

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/png A2592000
Bookmark and Share

Permalink | July 3rd, 2009

16 Responses to “Zoomple – simple jQuery plugin for image zoom”

  1. Yordan Stoev’s Blog » Blog Archive » Zoomple – simple image magnifying plugin for jQuery Says:
    July 16th, 2009 at 12:47 pm

    [...] time now I’ve been working on  a few plugins and the first that i want to share with you is Zoomple (i don’t know how i came up with such a stupid name). Zoomple is a simple image magnifying [...]

  2. Adeptus Says:
    July 16th, 2009 at 8:50 pm

    Great work! Tnx!

    But one: LOADER does nopt work (in your Demo also) – loader.gif not show while big image load… ^(

  3. admin Says:
    July 16th, 2009 at 10:54 pm

    Hi Adeptus, and thanks for the note.

    It’s fixed now.

  4. Adeptus Says:
    July 18th, 2009 at 6:02 am

    Thanks master!
    Works perfectly.

    I have made some changes for the project:
    1. Has added one more parameter blankURL, for blank.gif image
    2. I use REL attribute instead of HREF for address of the big image to keep an opportunity of transition under the link…

  5. admin Says:
    July 18th, 2009 at 9:02 am

    Hi again Adeptus,

    Thanks for the suggestions. The plugin is already updated with the features you proposed. The new parameters are: blankURL and source. By default the script will use the href but if you want you can specify ‘rel’ for source.

    Thanks again for the nice suggestions.

  6. Adeptus Says:
    July 18th, 2009 at 2:18 pm

    You could not look mine project – http://novportal.ru
    Under IE in a window of increase the cross – a symbol of not found image is displayed…

    Just point mouse on the central-up Logo and wait 5 sec…

  7. admin Says:
    July 19th, 2009 at 2:38 am

    Hi Adeptus,

    please download the latest version. You have an error in your plugin on this line: 

    $('body').append('<div id="Previewholder"><img src="'+options['blankURL']+'/blank.gif" alt="" /> <p></p> </div>');

    When you set it up this way the path to image becomes: images/blank.gif/blank.gif

  8. Adeptus Says:
    July 19th, 2009 at 9:03 am

    Thanks. Really, I have stepped – two times have specified blank.gif… :)

    One more wish:
    the window of increase opens always upwards in relation to a picture. If the picture close to the top edge of the screen – a window of increase disappears behind edge.

    It would be necessary to add definition of position of a picture and to open a window of increase upwards or downwards…

  9. admin Says:
    July 21st, 2009 at 6:00 am

    Hi, Adeptus,

    I’m quite busy this week, but i will fix this when i have a free minute.

    Yordan

  10. admin Says:
    July 26th, 2009 at 11:52 pm

    Hi Adeptus,

    i had some time to fix this bug, please download the new version: http://yordanstoev.com/blog/showroom/zoomple/zoomple-1.3.js.zip

    Thanks again for the nice suggestions.

    Yordan

  11. Adeptus Says:
    July 27th, 2009 at 9:21 am

    Works great!

    Thanks for good plugin.

  12. KiT Says:
    July 30th, 2009 at 1:17 am

    Hi,

    On the demo page, I found some… hmm… bugs?
    The scenario is as followed:

    I hovered on one image. The larger image was loading… (not yet finished).
    I hovered on another image. The corresponding larger image was also loading (and not yet finished).
    I then hovered back on the first image.
    Its larger image finished loading and shown.
    While hovering on the first image, it appeared that the second larger image finished loading and it somehow replaced the larger image of the first one, the one I am hovering.
    That is the larger image of the second one displays instead of that of the first one while hovering on the first small image.

    Is this normal or a bug?

  13. admin Says:
    July 30th, 2009 at 1:40 am

    Hi KiT, thanks for pointing this out,

    i usually use it on single image and i didn’t see this one.
    I will try to fix it asap.

    Thanks again,
    Yordan

  14. admin Says:
    July 30th, 2009 at 2:11 am

    Hi KiT, try now, it’s fixed.

    Yordan

  15. Matt Says:
    November 5th, 2009 at 4:24 pm

    Great work, looks like a real winner. Is there a way to have to zoom image stay in a static location instead of following the cursor?

    Thank you,
    Matt

  16. admin Says:
    November 9th, 2009 at 11:36 pm

    Not for now,.. but it’s a nice feature to include, indeed…

Leave a Reply