Eric Rafn

Thank you for the jquery zoom functionality. Great job!

Eric
pavelnikolov

Awesome plugin!
pavelnikolov

I’m I allowed to use this plugin for an e-commerce solution for a client?

Andy Eades

Yes. The plugin is dual licensed under both the MIT and GPL licenses.

pavelnikolov

Thank you!

http://www.facebook.com/ketanlathiya Ketan Lathiya

Hi, its very good script. but i have one small issue. How can i open the zoom image popup on left rather than right side?

Andy Eades

You can change the position of the zoom window using zoomWindowPosition. Set the position to the closest for your needs. e.g
$(“#img_01″).elevateZoom({zoomWindowPosition: 11});

Examples are here http://www.elevateweb.co.uk/image-zoom/examples#window-position

Once you have positioned it where you want. You can then use the offset options to move the box to the right position. Or even position within a div if needed.

http://www.facebook.com/ketanlathiya Ketan Lathiya

Thanks very much Andy… its working now….

http://twitter.com/dareal Cheng Chun

how do i switch the image dynamically?

Andy Eades

You can do this two ways:

#1 – The Gallery Method
http://www.elevateweb.co.uk/image-zoom/examples#gallery-lightbox

#2 – The public function “swaptheimage();”
http://www.elevateweb.co.uk/image-zoom/examples#external-controls

var ez = $(‘#zoom_09′).data(‘elevateZoom’);
ez.swaptheimage(smallImage, largeImage);

http://twitter.com/dareal Cheng Chun

sweet!! awesome plugin

sahar

elevatezoom is feature-rich and light. Thank you for making and sharing such an awesome piece of work. yesterday i downloaded elevatezoom and tested almost all the options available in it. Everything works smooth and easy. The only things that i couldn’t get to work was the “round lens” and the border color of the zoomwindow.

-How can i get the lens over the image? no matter what i do, the round lens in “lensType: lens” is always beneath the image. Could you please explain how to get it on the top?

-I can change the border width of zoom window, can change the size & position. Thats wonderful. But changing the border color doesn’t alter the bordercolor of the zoom window. Is there an option to style the border color of the zoom window?

Andy Eades

Thankyou for testing the plugin. Really appreciate it

sahar

Ok, the border color was a typo. The option is called: “borderColour”. Now it works. The only thing i can’t manage it to work is the round lens.

Andy Eades

There was an issue when the container of the image had positioning absolute/relative that was fixed in version 2.1.2.
Can you confirm if you are using the latest version of the plugin?

sahar

I’m currently using the version 2.1.2

Andy Eades

I can get the lens to show behind the image when i set a z-index to the images containing element
Can you try this file and see if it fixes the issue?
http://www.elevateweb.co.uk/jquery.elevateZoom-2.1.3.min.js

sahar

Thx for the great support and quick response. It is fixed now, without additional z-index manipulation.
Your plugin comes in very handy. I work on a project, in which the products are made by nano technology & the images are showing the nano structure of surface. Zooming is in this project very essential, it’s not only an enhancement or effect, it’s a part of design and identity. I’ve already tested many plugins. But your plugin is by far the most flexible, easy to configure & feature-rich one i’ve ever tested. Congratulation!
sahar

While testing i recognized something weird. the issue with lens on top of the image is fixed. But now when i pass the zoom to fancybox & i click on the image the lens appears on top of the enlarged image in the fancybox. That looks weird, because it appears within the proportions of the small image which is underneath the fancybox overlay. I guess that’s a bug
Andy Eades

This is because in the fix, i set the zoomContainer to have a z-index:99999

So it has a higher z-index than the fancybox. I will look at more graceful solutions for this tonight. But you can solve this by adding this to your stylesheet for now and force the fancybox to have a higher z-index;

.fancybox-lock .fancybox-overlay {
z-index: 999999;
}
sahar

Great. It works. looking forward for your solution

http://www.facebook.com/ketanlathiya Ketan Lathiya

how can i change main image while mouseover on thumbnail images instead of click on that?

Andy Eades

I added a new function in so you can change it to a hover event instead of click

Please use this file
http://www.elevateweb.co.uk/jquery.elevateZoom-2.1.3.min.js

and use gallleryMode: “hover” to set
$(“#zoom_03″).elevateZoom({gallery:’gallery_01′, galleryMode:’hover’, cursor: ‘pointer’});

http://www.facebook.com/ketanlathiya Ketan Lathiya

hey andy, it’s awesome….. Thanks very much for your script.. it helps me a lot….. i recommended this script to all my friends from now……..
http://www.facebook.com/ketanlathiya Ketan Lathiya

Hi andy, sometimes i got different size of lense in different image, i want to set it same size of lense to each and every image. I tried to set lenseSize:’200′… but still i got same issue.. what is the solution for this.. if you don’t get it please tell me, i will provide you link… Thanks in advance…

Andy Eades

The Lens size is for the Lens Zoom mode only
For window mode, the lens size is set proportionally and worked out as

Lens_width = zoom_window_width/(large_image_width / small_Image_width)
Lens_height = zoom_window_height/(large_image_height / small_Image_height)

So if you want the lens to be the same size. You would need to make sure your images are all the same size too.
All the small images the same size and large images the same size

http://www.facebook.com/ketanlathiya Ketan Lathiya

ohk.. i have changed it to static value in jquery file… bdw thanks very much for cooperate…

Eric Rafn

Was elevateZoom tested with internet explorer 7? I didn’t test the demo.html, but on my implementation the image does not display in ie7 until I rollover it.

Andy Eades

I think there may be an issue with the tint. I will be rolling out a new update in the next few days that will work on tablet/mobile and also for responsive images. It is getting tested at the moment. So I will retest it in all the major browsers again fully and fix any issues I find too

http://www.facebook.com/eric.rafn Eric Rafn

Thank you Andy! We decided to not support IE7, but your update fixed the tinting issue on my implementation for IE 8.

Andy Eades

I have uploaded a new version which has the tint fix in. Let me know if this fixes your issue

sahar

HI Andy.

On following setting:

zoomType: ‘lens’,
lensShape:’round’,

lensSize: 200,
lensBorder:———> Doesn’t change anything!
I downloaded the recent version (2.2.3) and tested it. One more question: How did you solve the problem with the z-index of the zoomContainer in the new version? I ask because you said that you want to find a better solution. Is there now an option for that?
sahar

HI Andy.

On following setting:

zoomType: ‘lens’,
lensShape:’round’,

lensSize: 200,
lensBorder:———> Doesn’t change anything!
I downloaded the recent version (2.2.3) and tested it. One more question: How did you solve the problem with the z-index of the zoomContainer in the new version? I ask because you said that you want to find a better solution. Is there now an option for that?

Andy Eades

You can change the lens border with borderSize. This doesn’t make sense. I will change in a future update.

I have found a better way to do this and i have updated it in the latest version 2.3.0 you can call this method ez.closeAll();

You will need to ammend the code that calls fancybox by adding this function. E.g

//pass the images to Fancybox
$(“#zoom_03″).bind(“click”, function(e) {
var ez = $(‘#zoom_03′).data(‘elevateZoom’);
ez.closeAll();
$.fancybox(ez.getGalleryList());
return false;
});

The new update is available on github
https://github.com/elevateweb/elevatezoom/blob/master/jquery.elevateZoom-2.3.0.min.js

Let me know if this update works out for you.

sahar

borderSize does.
now with the combining zoomType: lens and fancybox i have the old problem, the round lens is beneath the img. i played around with the z-index but that doesn’t help and setting any value in tranlateZ will bring the lens on the highest level even over the fancybox overlay.

Andy Eades

Sorry about that, i did not add the fix in permanently to the last update

I think your image you are zooming has a z-index on it

It would be better if you permanently add this to your stylesheet. It will force the zoomlens and fancybox in the right order

.zoomLens{z-index: 99999;}
.fancybox-lock .fancybox-overlay {z-index: 999999;}

sahar

No problem. I guess the configuration file needs to be updated now with the new options added.
the .zoomLens class was a great help, because i use fancybox together with other plugins at the same time and there are lot of images in different z-index order. It can get confusing. This way i have better control. Thank you

Lee

This is a great plugin, and really needed for modern touch devices!

I have an issue though. using this setting zoomWindowHeight, the window sometimes reverts to native height. I can’t seem to get more than one working on the page & also, I would need different window heights/sizes on a page for different images. Eg long narrow rectangle, for one viewer and square for another. Is that possible?

Lee

Andy Eades

I have not seen any issues with this before

I have set up some examples below for you to see how to set up the window sizes.
http://www.elevateweb.co.uk/image-zoom/examples#zoom-window-size

It is possible to load as many instances of zoom as you want. Each set of config options you pass to the zoom you create are unique to that instance.

Lee

Many thanks! This is great and solved my height problem. I think I was setting the parameters incorrectly (dont think there was an example that showed multple settings) your example fixed that. I didnt realise I could give the instance a different id, with different parameters. I thought they related to each style. Not sure why I cant run more than 2 instances though. Do you have to give each usage a different ID even if they have the same parameters., EG 15 images with 3 sizes, do they have to be named zoom1 to 15? each id unique?

Lee

just noticed also, I have uploaded it and it doesnt work on the ipad, the zoom window seems to be underneath everthing. works on pc fine

Andy Eades

Do all the examples on the examples page work ok on your ipad?
http://www.elevateweb.co.uk/image-zoom/examples

If not. It would be a great help if you could let me know

#1 Your Ipad / IOS Version
#2 The App you are using to browse with
#3 Config options for your zoom

I can try replicate and fix any issues then.
Lee

yes they did, although a couple jumped a bit due to the images going of the page, thats why I liked it!!

1. ipad 3 iOS 6.1

2. safari

3. here is a link to my page http://www.homefronthistory.co.uk/emporium/leophotography2.html first items in each section currently coded. you can see the config details from the page source

Thanks again
Andy Eades

Your document is having height problems which was causing issue. I see you are adding height tags to the content to fix this though.

Try adding the following css too once you have sorted the height issues out
.zoomContainer{z-index:999999;}

This will force the zoom container on top once your document flow is sorted
Lee

yep, I know this fixed the issue thanks! all sorted and working great!
Many thanks for your help
Lee

Sorry, another query, I cant get the background colour to change using borderColour : red or a hex code, it just stops all zooms working, sorry…
Andy Eades

Can you paste your config in here. If you are passing a sting you would have put your colour in quotes e.g borderColour: ‘#333′
Lee

I meant lens colour, not border

$(“.zoom_10″).elevateZoom({
easing : true,
zoomWindowHeight : 155,
zoomWindowWidth : 240,
zoomWindowOffetx : 9,
lensColour : red
});

The above didnt work for me.

using quotes around the hex does allow it to work but bg colour doesnt change, so somethings not right. I have transparent png as the image, would that make a difference?
Andy Eades

You need to pass strings in the config in quotes – So the word red needs to have quotes around it

$(“.zoom_10″).elevateZoom({
easing : true,
zoomWindowHeight : 155,
zoomWindowWidth : 240,
zoomWindowOffetx : 9,
lensColour : ‘red’
});
Lee

ah, I see, I think maybe a few more example might be help, as I now see the works, but it wasnt the lens colour I was trying to change, I wanted the popout window background to change. In my example, you see the images have white background in the window, these are transparent pngs, so I wanted to change the colour from the default white
Andy Eades

Ok, i get what you mean now. I will need to make a change in the need update to allow this to be configurable.
Hopefully over time i will be able to improve the documentation a little too.

But you can override in the mean time with css to acheive what you are looking for

.zoomWindow {background-color: red !important;}
Lee

Great, thanks, this is exactly what I wanted.
I think this is a great tool and there arent many that exist yet that can do what this does. I found this through Noupe article. I’m sure it will be popular.
Thanks for your help and patience, hopefully this is me sorted!

Andy Eades

If you want different images with different options, yes they each need their own id and .initiator
But you can set multiple images of the same script if you use classes instead of ID’s

For example

$(‘.zoom_01′).elevateZoom();

Lee

ah, cool!
sahar

Hi Andy.

Is this a must? Or can i use a single initiator and ID for multiple images with the same Options on one page?

I ask because i read somewhere (I don’t remember now where) that it is not a good practice (performance and loading issues) to use classes instead of ID’s for firing functions in jquery plugins. Is anything true about that? I mean using the same ID for multiple elements wouldn’t pass validation but above that nothing will happen.
Andy Eades

The selector engine is slower to find a class than an id. So for using one i would definitely recommend using an id, As it will find the element faster.

When you use a single id selector, jQuery uses the native document.getElementById method, which returns only the first element with that ID.

So it will not work in this way with multiple id’s if they are the same name.

However it should be possible to initiate in this way too
$(‘#zoom_01, #zoom_02, #zoom_03′).elevateZoom();
But i havent tested. so not sure what the result would be.

sahar

Andy I just wanted to post something in forum, because i think it’s better to move all this questions and your great support to a better organized place, where some questions can be answered without being asked over & over again by different people. A FAQ topic could be very helpful.
But the forum seems to be closed. Or am i missing something?! I’m not able to start a thread or make a topic.

Andy Eades

Yea – I agree. It would be better.

The register links dissapeared because i accidently turned off a plugin for it.

It is using bbpress at the moment. But i am maybe considering signing up to something like zendesk and using this instead, as you can login with google/fb/twitter etc which i think will be easier rather than the current process.

sahar

So i’ll wait till you install the forum (It will be easier to build a completely new forum without migrating content)

Zendesk sounds good (the price is also good!)

I suggest vanilla. But most of the forum softwares have the g+/fb/twitter… integration.

Andy Eades

I checked out vanilla forum. It look great… Thanks for the suggestion… I got chance to install it earlier.. So I will get it themed up and on the site tonight

sahar

It looks nice. Registration isn’t possible: “To use reCAPTCHA you must get an API key from”
Andy Eades

Thanks for pointing that out. My bad for not testing it first. I just added the details in now. So hopefully it will work, unless i missed something else.
sahar

No problem. registered and posted something. It works like a charm now.

http://twitter.com/dareal Cheng Chun

Hi Andy
is there a way to add an active class name to the anchor element when user click an item in gallery mode?

Andy Eades

Not in the current release’ but I have that working in a local version. I can update the plugin. But i don’t have time to get it done until later tonight.. So if you can check back in the morning. I will put an example of it on the examples page too
Andy Eades

Not in the current release. But I have a working version of this locally. I will add the code into the plugin, but I cannot do this until later tonight. But if you check back in the morning and this should be available. I will place an example on the examples page for usage too.
Andy Eades

The change has now been uploaded along with a couple of other minor changes in version 2.5.3

You can see a working example on the examples page

http://www.elevateweb.co.uk/image-zoom/examples#gallery-lightbox

Hope this helps

http://twitter.com/Prookie23 Robin

Thanks for the awesome plugin!

I am trying to use the zoom on an image, which is placed inside content that is shown via fancybox. So it is not a single ordinary picture that is displayed, but encapsulated into a div with further elements next to the img.

The problem is: if I hover the image, the zoom is activated, but it only shows the most upper left magnification of the picture, regardless where I place the mouse! Why doesn’t it change the zoom excerpt, when the mouse is moved?

A thousand thanks, Robin

Andy Eades

I will answer this in the support forum… Thank you for posting in there too

ismail orfe

u r the best.There r so many JQ templates those r always lacking of many features besides they are expensive.this plugin is so easy to use and free.Thank you guys alot….
Marcus David

Hello Andy, how are you?

I am having problems with the zoom in some images…

It are getting distorted, as you can see in the link below:

http://www.voxsis.net/pitanga/produto/1038

What I need to do to fix that?

Thank you!

Andy Eades

That is strange. I am not sure why it is happening. But i will try replicate and debug

I was able to fix in the browser by using this CSS if you can try

.zoomWindowContainer div{overflow: auto !important;}

Marcus David

I tried adding this line you posted in the css file, but it didn’t work.

Look at the second picture:
http://pitangaroxa.com/produto/1057

Thanks man!

Andy Eades

Sorry for the delay. Can you try the latest version 2.5.4. This issue should now be resolved.

http://www.facebook.com/buuthy Marcus David Artuso de Souza

One thing I noticed now:

I use a carousel, when you click the thumbnail displays a larger image, and then shows the zoom. The first image is loaded correctly, the zoom too. When I click on the second image (or other), it is loaded at the larger space, and it seems the zoom takes the dimensions of the first image. I think that’s what is causing the problem.

I do not know if you could understand me.

Thank you

kousuke

不错呢o(≧v≦)o~~
http://mintik.com/ mintik

Very nice and useful thanks for plugin
Thomas

Hello, when I use the Gallery with tint, then in the area of the div containers is magnified displays the first image. See the screenshot. Thanks for the great script.
Greetings Thomas

http://www.ratze.eu/ Ratze

This should fix this bug

function bugfix(){

$(‘#gallery1 a’).click(function(){
var image = jQuery(this).attr(‘data-zoom-image’);
$(‘.zoomLens img’).attr(‘src’, image);
});

}

bugfix();

Arjun

hai, any body tell me. can i change the image width and height.
http://www.facebook.com/florian.schupp77 Florian Schupp

Hi, thanks for the great plugin! The easing option seems to be a little bit buggy. U could check this at ur own easing Demo. Just move the lense a bit faster at the maximum top from side to side. Sometimes the zoom Image is stuck then. To get it work again u have to move the lens at the bottom half…
http://www.facebook.com/hhanckes Hans Hanckes

Hello! The same code is working for firefox but not for safari or chrome.

Any idea why could this be? Thanks!
kristina

Hey Andy Eades i have the same problem like thomas below my comment and Marcus David Artuso de Souza
I use the gallery, when you click the thumbnail displays a larger image,
and then shows the zoom. The first image is loaded correctly, the zoom
too. When I click on the second image (or other), it is loaded at the
larger space, and it seems the zoom takes the dimensions of the first
image. I think that’s what is causing the problem.

How can I solve the problem??
picked_a_name

just what i was looking for!!! Thank you soo much!
dennis

Please how can dynamically load the images from code behind in asp.net?? thanks

Home

Config

Example Image Zoom

Help / Community

Download

A Jquery Image Zoom Plugin

HTML

JAVASCRIPT

Installation and usage

Include your Image

Activate the zoom - Basic Example

More Examples

Help & Support