Zoomple – simple jQuery plugin for image zoom

The plugin moved to github

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.4.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
attachWindowToMouse – if set to true, the magnifier will follow the mouse, if set to false, the magnifier will sit attached on the side of the image.
windowPosition – when attachWindowToMouse is set to false, the window will sit on the side of the image. This property defines on which corner of the image, the magnifier will sit (e.g. windowPosition : {x:’right’,y:’bottom’}). Possible values for x: ‘right’, ‘left’. Possible values for y: ‘top’, ‘bottom’.

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

28 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…

  17. Gary Says:
    April 12th, 2010 at 4:01 pm

    Has the static image display request been addressed? I’m looking for the same feature…

  18. admin Says:
    April 13th, 2010 at 11:57 pm

    Hi Gary,

    I’ve just updated the source, the feature is now included.
    You can see it here on the third row:
    http://yordanstoev.com/blog/showroom/zoomple/

  19. Steve Says:
    May 26th, 2010 at 12:37 am

    There is a bug with jquery 1.4 and IE6 I have not had time to look into the conflict yet.
    Thanks for the plugin!

  20. Pokemon Says:
    September 5th, 2010 at 4:50 pm

    Can also be done with jQuery AJAX-ZOOM Plugin easily :: http://www.ajax-zoom.com

  21. admin Says:
    January 12th, 2011 at 6:04 am

    not the same

  22. Ethan Allen Smith Says:
    August 22nd, 2011 at 1:44 pm

    I know it’s been a while since you have changed this page, but I’m hoping you can help.

    I would like the preview window to follow the mouse ON TOP of the cursor (like a magnifying glass). However, since “hover” is set for the img, it makes the preview window flash if it overlaps the cursor. Is there a way around this?

  23. admin Says:
    August 23rd, 2011 at 3:36 am

    Hi,

    if i have some time in the coming week i will make it work.

  24. JB Says:
    February 25th, 2013 at 1:07 am

    Hello
    Awesome, except I have an issue. It seems to scale the magnified image when you get to the side of the screen, so the centre of the magnifyed image is no longer where the mouse is.
    I get why, because you cant display half of the magnified image of outside the image, which is what you would get if you were on the last row of pixel. Half the magnified image would be of the image, and the other half would be outside the image.

    However this is terrible for what I need to do, as I have things I need to hover over and magnify, yet the magnified area is no longer where the mouse is pointing.

    Is there a fix or trick to get around this?

    Thanks

  25. Mohammad Says:
    August 29th, 2013 at 1:12 am

    Great and thanks about this

  26. Mircea Says:
    April 2nd, 2014 at 1:50 am

    Really nice plugin.
    Is there a way to temporary disable the zooming ?

    Thanks

  27. yatin Says:
    July 14th, 2014 at 11:22 pm

    How can i use this plugin with bootstrap modal ??

    i add this js and css but when mouse moves on image in modal it shows a hand cursor insted of megnifie..

    how can i fix this ??

  28. admin Says:
    July 24th, 2014 at 10:09 am

    do you have a demo?

Leave a Reply