Picture Zoom

Demo

Bookmark and Share

Overview

This script is used to enlarge images on your website.

Licensing

This script is licensed under LGPL. Commercial licenses are also available

Download

Files in package:

  • js/dg-picture-zoom.js - Main javascript file for the widget
  • js/dg-picture-zoom-autoload.js - Javascript file to include when you want to apply zoom effects automatically
  • js/external/* - Mootools library used by the script
  • css/dg-picture-zoom.css - CSS for the script
  • cursors/* - Custom cursor files(.cur files)

Demo

Click on the pictures below

How to configurate

Include Javascript and css

You need to include these files:

<link rel="stylesheet" href="css/dg-picture-zoom.css" type="text/css" /> <script type="text/javascript" src="js/external/mootools-1.2.4-core-yc.js"></script>
<script type="text/javascript" src="js/external/mootools-more.js"></script>
<script type="text/javascript" src="js/dg-picture-zoom.js"></script>

You will probably also want to include dg-picture-zoom-autoload.js:

<script type="text/javascript" src="js/dg-picture-zoom-autoload.js"></script>

When this file is included, the script will take care of everything for you. It will search for all <img> tags on your page assigned to css class="dg-picture-zoom" and add the effect for each one of them.

If you want to add this effect manually, you can do that by following the procedures decribed below

Your <img> tags

You define path to large version of the image by adding "url" as search parameter in the image source.

Example:

<img src="images/image1.jpg?url=images/image1_big.jpg" class="dg-picture-zoom">

As you can see from this example, the url to a large version of image1.jpg is images/image1_big.jpg

Your <img> tags should also be assigned to the css class dg-picture-zoom as in this example

Add pictures manually

If you chose not to include dg-picture-zoom-autoload.js, you can create the zoom effect manually by creating an DG.PictureZoom object and using the addPicture method.

Example:

var dgPictureZoom = new DG.PictureZoom(); dgPictureZoom.addPicture('picture1'); dgPictureZoom.addPicture('picture2');

Where picture1 and picture2 could be references to images like this:

<img src="images/image1.jpg?url=images/image1_big.jpg" class="dg-picture-zoom" id="picture1">
<img src="images/image2.jpg?url=images/image2_big.jpg" class="dg-picture-zoom" id="picture2">

The complete code for the demo above:

<img src="/scripts/picture-zoom/images/image1.jpg?url=/scripts/picture-zoom/images/image1_big.jpg" class="dg-picture-zoom">
<img src="/scripts/picture-zoom/images/image2.jpg?url=/scripts/picture-zoom/images/image2_big.jpg" class="dg-picture-zoom">

<link rel="stylesheet" href="/scripts/picture-zoom/css/dg-picture-zoom.css" type="text/css" />
<script src="/scripts/picture-zoom/js/external/mootools-1.2.4-core-yc.js"></script>
<script src="/scripts/picture-zoom/js/external/mootools-more.js"></script>
<script src="/scripts/picture-zoom/js/dg-picture-zoom.js"></script>
<script src="/scripts/picture-zoom/js/dg-picture-zoom-autoload.js"></script>

Border around large picture

By default, the script displays a border around the zoomed out pictures. To turn it of, send border : false when you create the DG.PictureZoom object, example:

var dgPictureZoom = new DG.PictureZoom({
  border : false
});

The appearance of the border can be modified from dg-picture-zoom.css in.

Comments

Mark Moran
Beutifull zoom design, simple, eficient, clear.
Tkx a lot of u work, i'll try to applied on to my practices.

God Bless You !
Mark Moran at 06:51PM, 2011/03/17.
Ginette Blackbeard
I am a graphic designer by trade and my web skills are mainly on the front end. I must compliment you for such an easy to install and follow application!
Ginette Blackbeard at 11:49AM, 2011/03/24.
carly
I actually asked you for help on another one but in looking around I love this. I am just very new to the HTML and I am trying to figure out where to out this in.
Can I do it individually on my image tags or do i do it in my css? Sorry I am so confused!!!
carly at 12:32PM, 2011/05/17.
kaushik
great code. i am learning to develop website myself and this will be very useful to me. thanks
kaushik at 01:06PM, 2011/05/22.
kidmaer
the code works on html page, but i cannot work it on asp.net . is it not work on asp.net, or the problem's reason is me ? pls help me to learn. thanks.
kidmaer at 02:59AM, 2011/05/28.
BigLeslieP
This is totally awesome. I've been looking at a lot of popup window code, and this one is so crisp, RIDICULOUSLY SIMPLE to use, and simple & obvious to the viewer with the magnifying glass cursor.

THANK YOU!!
BigLeslieP at 01:46AM, 2011/07/17.
maninder
can any one tell me how can i impliment it in asp.net
maninder at 10:38AM, 2011/07/22.
sathish
cute script.i like it
sathish at 04:44AM, 2011/07/28.
rory
I can't seem to get it to work. as long as I have the script files in the relative folder, it should work, right?and then include the call to them in the header? so it works for every page?sorry I'm new to this.. and very confused.
rory at 03:08PM, 2011/10/14.
Loren McDonald
The demo example included in the download works fine but I can not get this to work on my site. All browsers fail to function.Firefox gives the error: $(el).getProperty is not a functionI have tried placing the code in the HEAD and after the the image I tested on.
Loren McDonald at 08:28PM, 2011/11/02.
Admin comment
DHTMLGoodies
Loren,I guess you are using jQuery or some other libraries on your site which causes a conflict with the picture-zoom script.I have added a fix which hopefully will take care of this problem now.Please download the zip file again and replace your js/dg-picture-zoom.js with the one you find in the zip file.
DHTMLGoodies at 11:03AM, 2011/11/03.
Loren McDonald
Cool! Thanks for the quick response and fix.I do have a bunch of stuff loading. I was figuring it was jQuery but even after removing that it still wasn't working.now I'm having a z-index problem (large image is loading behind tab-set on the page but I think I can figure out fixing that on my own.
Loren McDonald at 02:03PM, 2011/11/03.
Osman
This sounds promising to what I want to accomplish, I want to put it on my site matchowl.com so I can have similar auto zoom on mouse over effect that plentyoffish has.
Osman at 11:18AM, 2012/01/07.
Rene
Hello!First of all great script! But i have a problem. I was trying to adjust the zoom-in direction but i can't find where. I want to zoom each picture in the diferent ways. Many thanks for reply
Rene at 09:02PM, 2012/02/21.
Paul
Hello,have problem with picture-zoom script. When I first tested it on the page with 3 pictures it worked fine. But when I used it for the page with 17 images it's not working properly. Some underlying elements on the page are visible through expanded large pictures, and generally it has erratic behaviour.This is the page I use for testing :http://dev.onlynature.co.uk/Advanced%20Skin%20Care/Mene_and_Moy.htmlAs this page has other javascript elements, my first thought was about potential conflict between them. So I removed all other javascript code for testing, but result is pretty much the same:http://dev.onlynature.co.uk/Advanced%20Skin%20Care/mm.htmlMay be the problem is with old version of MooTools?I'd much appreciate your help with this problem. I really like zooming effect, its the best I ever seen. I looking forward to hear from youBest Regards,PaulUK
Paul at 10:50PM, 2012/02/21.
Rene
Actualy i want to zoom all pictures in the center of the screen
Rene at 08:59AM, 2012/02/22.
GUILLAUME
Hi,Nice script but I have a problem with the zoom effect...Whith your images or little images like yours, the script looks good.But when I use my pictures (over 1300px), the zoom effect does not zoom in the center of the img... (like previous comment).What can I do please ?
GUILLAUME at 10:27AM, 2012/03/08.
Ulf Hpunkt aus Berlin
Great script, thanks.For those who'd like to CENTER the zoomed image, add/change the following lines in dg-picture-zoom.js.1. FIND THESE LINES:if(!window.DG) { window.DG = {};};ADD THE FOLLOWING BELOW:var dE=document.documentElement, gE=document.getElementsByTagName('body')[0], viewportX=window.innerWidth||dE.clientWidth||gE.clientWidth, viewportY=window.innerHeight||dE.clientHeight||gE.clientHeight, undHierNochEineSinnfreieVariable = 0;// uncomment the following line to see // your viewport size//alert (viewportX+" x " + viewportY);var mitteX=viewportX/2, mitteY=viewportY/2;2. FIND THESE LINES:var to = { 'left' : Math.max(8, Math.round(coords.small.left - (obj.large.width /2) + coords.small.height/2) ), 'top' : Math.max(8, Math.round(coords.small.top - (obj.large.height /2) + coords.small.width/2) ),REPLACE WITH:var to = { 'left' : mitteX - (obj.large.width /2), 'top' : Math.max(8, Math.round(coords.small.top - (obj.large.height /2) + coords.small.height/2) ),Works for me. Have fun,
Ulf Hpunkt aus Berlin at 11:35AM, 2012/04/18.
skoda
Hi,Thanks a lot. Nice script. You are doing a great great job. God Bless You!...Once again thanks..
skoda at 07:27PM, 2012/04/20.
Brenda
Thank you.Is it possible to modify this script somehow to zoom at various levels e.g to zoom to a medium size and then to a larger size?Brenda
Brenda at 09:02AM, 2012/04/24.
Marc
Great code. Works perfect. Is there any way to include an option for a caption somehow?
Marc at 06:56PM, 2012/04/25.
Mike
Good Day

I am trying to use the code, but i am unable to zoom the pictures. Do you perhpas know what's wrong.

Thanks
Mike at 01:32PM, 2012/05/08.
Marshall
Thank you so much! I have looked everywhere to get the right code. Works great.Is there any way to track what pictures are being viewed or downloaded in my stats?
Marshall at 11:52PM, 2012/05/14.
vishal singh
its beautiful... i tried ur code its makes my gallery beautiful
vishal singh at 01:13PM, 2012/05/15.
jairaj
you are a life saver mate.... :) thanks for the help awesome code it is... very help full ...
jairaj at 10:53AM, 2012/05/21.
andrew
I am struggling to put your script to work in a asp.net page. I had saw some people the same question. I don't understand why it would not work because this is a client side script. I think the script will take effect after the server process the page. Please help.
andrew at 08:32PM, 2012/05/30.
Simone
Thanks mate, really like the script, one thing i can't seem to fix is the z-index of the zoomed image. I have 2 menu's on a page wich are positioned at z-index: 999. The zoomed image appears below this.Off course i would like to let the zoomed image appear above this image. Is there a way to make this possible?I tried changing the two z-index numbers in the .js file but that didnt work.Thanks so much
Simone at 09:55AM, 2012/06/04.
Simone
Nevermind, i fixed it!i changed this on line 45: currentZIndex : 1500,That was easy...
Simone at 10:20AM, 2012/06/04.
nawaz
hivery nice code i am just a learner. I have tried this, i can see the lens icon but the big image is not loading i couldn't understand what happens.I have used css codes given as inline css, & this is for my image <img src="images/onion.jpg"?url=images/onion_big.jpg" class="dg-picture-zoom" style="float:right" /> where images are in images folder. i have uploaded js folder and other to my server but its not working kindly let me know what to do.
nawaz at 01:44PM, 2012/06/14.
wahcky
where should the files be saved? thanks
wahcky at 11:04AM, 2012/06/19.
Shantanu
Please help me out for zooming the image from Image control in jquery?? I am aware if the image is in img src...but want to zoom from Image control...
Shantanu at 03:37PM, 2012/07/18.
Vlad
Thank you so much for your advices.It really help!Good luck
Vlad at 04:43PM, 2012/07/26.
newfan
Thanks
newfan at 02:37PM, 2012/08/04.
Dwight Kulkarni
Hello Friends,I have implemented this script and it's working well.However, when I have a large number of images, I am finding that it tries to load all the pictures.This uses up unnecessary bandwidth.I want to load the large image on demand when the user clicks on the small thumbnail.Is this possible?I looked through the code and I see that it is auto-loading the large image from the Url.I need to change the event so that on click it loads the zoom container and adds the large image.Rather than requesting the large image right at the beginning.Any help would be appreciated.
Dwight Kulkarni at 03:28PM, 2012/08/20.
JOHN
Great script, thanks. Is it possible to modify the script (perhaps the 'dg-picture-zoom.js' file) so it either fades the image in then fades out when closing it like the examples here http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm OR have the large image open up then all the background of the page is dimmed out like the examples here in the 'With gallery' section http://highslide.com <-I don't need the captions etc just the dimmed background.Sorry for being needy, I'm new to javascript.
JOHN at 03:53PM, 2012/09/22.
targol
This script is great. Thanks for sharing.However, in order to make it compatible with images loaded with jQuery, I had to adapt it :the "window.addEvent('domready', function() {" line in "dg-picture-zoom-autoload.js" has been replaced with a simple named function declaration (eg : "function addImages() {")Next step was to call this function at the end of any code loaded with jQuery. It now works perfectly.
targol at 09:58AM, 2012/10/17.
targol
Another trick : in order to show big picture at center of the screen wherever is located small one, replace lines 200 to 206 of dg-picture-zoom.js with these lines :"var from = coords.small;var totalWidth=window.innerWidth;var totalHeight=window.innerHeight;var to = { 'left' : (totalWidth - obj.large.width ) / 2 , 'top' : (totalHeight - obj.large.height ) / 2 , 'width' : obj.large.width, 'height' : obj.large.height}"Hope that helps.
targol at 10:25AM, 2012/10/17.
Daniel
This script is good for high resolution screens, but it messes up when you try it with low resolution which makes this script not useable for me. But hey, good script though!
Daniel at 02:31PM, 2012/11/15.
Daniel
Hello, very niceBut I have a big problemRelease the example "picture-zoom.zip", unzip and locally works perfect, but when I upload it to my remote server (linux), example (without modification) no works, no images appear small and nothing works.I can not find the problemDoes anyone have any answers?
Daniel at 05:52PM, 2012/11/23.
Daniel
Here I put the link ...http://www.estudio-gama.com.ar/decozona-2012/picture-zoom/picture-zoom.html
Daniel at 05:54PM, 2012/11/23.
Calvin
Hey There,Love the job you did on this one!However, it all works good :) But i wanted to change the type of Magnifier Glass your mouse changes to when you hover over the image.. I made some Cursors using "Axialis CursorWorkshop" and dropped the .cur files into the cursors folder..But when i try them on the site, they STILL display the old cursors despite them being completely removed from the site?! Are they still in some sort of cache or something? I reset my browser history and cookies etc but it still shows the original ones!
Calvin at 03:57PM, 2012/11/28.
scott
If I wanted to add a text description to the image when zoomed in, how would I do that?
scott at 06:56PM, 2012/11/29.
Mr.Shih
it is easy to use~thank you~
Mr.Shih at 06:36AM, 2012/12/30.
lori k
wow this script is so awesome! thank you very much for putting it up.
lori k at 09:37PM, 2013/01/07.
lori k
is there any way to use this script to double zoom so that when a user clicks once a large image displays and if they click twice a second, larger image displays and with the third click it would return to the first image?
lori k at 02:45AM, 2013/01/16.
Willyn
Thanks it works great:)
Willyn at 03:35AM, 2013/01/21.
Emily
Is there a IE conditional Statement or fix? It doesnt display the border/backgrounds correctly in IE :(
Emily at 06:57PM, 2013/01/26.
Matthew
Hi there,What is the reason that your sample pop images entail a shadow and my doesn't despite the CSS files already denotes it:.dg-picture-zoom-border-container{ border : 1px solid #FFFFFF; background-color: #000000; margin-left:-2px; margin-top:-2px; padding:2px; box-shadow:10px 10px 20px #000000; border-radius: 5px;
Matthew at 09:43PM, 2013/01/30.
Admin comment
DHTMLGoodies
Matthew wrote: #
Hi there,

What is the reason that your sample pop images entail a shadow and my doesn't despite the CSS files already denotes it:

.dg-picture-zoom-border-container{
border : 1px solid #FFFFFF;
background-color: #000000;
margin-left:-2px;
margin-top:-2px;
padding:2px;
box-shadow:10px 10px 20px #000000;
border-radius: 5px;

Hi Matthew,

It could be that you're viewing the page in Internet Explore, and doesn't have a doctype defined at the top of your html file.

Shadows and border radius are relatively new css properties. Old Ie browsers doesn't support it. If you don't have a doctype, ie will think that the page is old and will try to render the page as it would have looked in an older browser, also called quirks mode.

Try adding one of the following doctypes at line 1 of your page:



Or




More info can be found at http://www.w3.org/QA/2002/04/valid-dtd-list.html

Alf
Dhtmlgoodies.com
DHTMLGoodies at 10:47PM, 2013/01/30.
Angy
Hi,I used your code in my website ! thank you ! It's really easy to use and it do exactly what I needed !Just a little problem, I used datatables (http://www.datatables.net/) with bootstrap and when I go to another page of my table, the zoom does not work anymore. I think the big image are not loaded (not detected by autoload?).I tried to do the same as TARGOL : the "window.addEvent('domready', function() {" line in "dg-picture-zoom-autoload.js" has been replaced with a simple named function declaration (eg : "function addImages() {")but it does not work either. Perhaps I did not call the function at the good place.Does anyone has an idea ?thanks for your help
Angy at 03:22PM, 2013/03/18.
Adeoye
Thanks for the code, it works well locally but not all the pictures are zooming online, tried different browsers but still the same. Please hanks.elp. Th
Adeoye at 09:59AM, 2013/03/21.
Adeoye
Thanks for the code, it works well locally but not all the pictures are zooming online, tried different browsers but still the same. Please help. Thanks.
Adeoye at 10:01AM, 2013/03/21.
Jóhann Gunnarsson
Thanks for this fine piece of code. I managed to implement it into my new website without too much trouble, despite very limited experience in web programming. I have tried it in three browsers. In Chrome and IE it seems to be working fine. Initially in Chrome, when reducing the large picture, it left a kind of frame, but now it seems to be OK. In Opera I do not get your cursors, only the finger, which, in a way, is not a problem. but I wonder how?www.organjohann.net
Jóhann Gunnarsson at 12:13AM, 2013/03/27.
Guenter Leitner
Very nice code. How can i ad text to the zoom in picture?Please Help.Thanks
Guenter Leitner at 05:24PM, 2013/03/29.
vikas rao
pls post or send me the code for "if we put mouse on the image, it must enlarge, not click.... only if we click means it must enlarge, pls send me that code.
vikas rao at 10:56AM, 2013/05/28.
Mada
I'm a beginer and this helps me a lot.Thank you so much !
Mada at 02:14AM, 2013/06/23.
abhishek
hi, sir i have already coding of image zoom in and out is runing in my pc browser but uploading after image will not be so, only show.
abhishek at 01:07PM, 2013/07/04.
Pedro
Excelent tool! Exactly what I was looking for.Thank you!
Pedro at 11:38AM, 2013/09/23.
jhon
Image zooming (zoomin & zoomout) with jquery is simple code. I came across the code from http://www.freemenu.info. The detailed code with demo is given here:http://www.freemenu.info/2013/09/zoom-image-slider.htmlAlways better to prepare own codes 9inclusding jquery) instead of depending up-on some ones code.
jhon at 04:51AM, 2013/10/01.
Shakir Ullah
more study need to you
Shakir Ullah at 11:17AM, 2013/11/28.
Jonas
Really nice script!But is it possible to make the script close an already enlarged image if you click on another one?Cause it does look a bit off when you've got multiple pictures enlarged.Regards Jonas
Jonas at 01:09PM, 2013/12/06.
Razvan
Hy.. How adding Zoom Large on center Page?Example http://www.fcpetrolul.ro/ro/Petrolul-a-facut-poza-oficiala-pentru-retur/Thanks !
Razvan at 08:46PM, 2014/02/21.
Keren
Hello,Thank you for posting this!For some reason the width and the height of the zoomed window is off by 20px. Where can I fix it?
Keren at 10:52PM, 2014/06/19.
kdrjdfsk
JDSKGHFSKJDGHFKJSDBG
kdrjdfsk at 04:10AM, 2014/07/15.
kdrjdfsk
nICE SCRIPT
kdrjdfsk at 04:12AM, 2014/07/15.
andiii
good..... :)thank_U
andiii at 09:31PM, 2014/10/13.
MUHAMMAD RAIS
Can someone help me how to make this notification zooming when we click on it exactly like the demo above. I had try but no avail. www.imejparking.com.my ( the annoucement for IPOPS at home page )Please help me.
MUHAMMAD RAIS at 11:56AM, 2014/11/20.
Brett Nickell
Hi there, I am really impressed with both the simplicity, and effectiveness of your code. For my specific needs, I would like to be able to precisely control the positioning of the zoomed image. Modifying the CSS doesn't seem to have any effect. Is there a way I can tell the zoom precisely where to show up?
Brett Nickell at 06:46PM, 2014/11/21.
Brett Nickell
Jonas wrote:Really nice script!But is it possible to make the script close an already enlarged image if you click on another one?Cause it does look a bit off when you've got multiple pictures enlarged.Regards JonasYeah, what he said!
Brett Nickell at 07:12PM, 2014/11/21.
Sergio Tardioli
very good script!I have a question..is possible to zoom an image to starting from a scaled image (20%) to arrive to normal size?
Sergio Tardioli at 06:08PM, 2014/11/24.
Angy
Hey,thanks a lot, this code is really intuitive and useful.Do you think it would be possible to change it so that it does the same but with a canvas instead of an image please ? Well I'm not so good with javascript but I'm willing to try, I just wanted to know if you think it's doable and not to complicated.Thanks for any help :)
Angy at 10:01AM, 2015/03/04.
Dave Sileo
love this but just wont work on my blogger. here is my code.<img src="http://4.bp.blogspot.com/-VhoKmzwmSTE/VfGKz1sJZCI/AAAAAAAACkc/DndZrRY9810/s200/smallfootball.jpg"?url=http://4.bp.blogspot.com/-VhoKmzwmSTE/VfGKz1sJZCI/AAAAAAAACkc/DndZrRY9810/s200/smallfootball.jpg" class="dg-picture-zoom" id="dg-picture-zoom-1">thanks dave
Dave Sileo at 01:56PM, 2015/09/10.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com