Fork me on GitHub

A Jquery Image Zoom Plugin

  • Fully Customisable
  • Coloured Tints
  • Fancybox Gallery Support
  • Variable zoom on mouse scroll
  • External Controls
  • Window Zoom, Lens Zoom and Inner Zoom
  • Free to use under MIT and GPL Licenses
<img id="zoom_04" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

Installation and usage

Download the source files (available here) and include the jquery and elevatezoom plugin files into your project

<script  type="text/javascript" src="jquery.js"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

Include your Image

Elevate Zoom works best using two images, one low resolution for the visible image, and one high resolution for the zoomed image. If you only have one image available, Elevate Zoom will still work if you scale down the image, although this is not recommended as your page load time will increase if you are loading larger images

Please ensure your small image is proportionally scaled down from the large image.

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

Activate the zoom - Basic Example


More Examples

See More examples of the image zoom here

Help & Support

Please post forum if you need any help (click here)
  • Eric Rafn

    Thank you for the jquery zoom functionality. Great job!


  • 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!

  • 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

      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.

      • Ketan Lathiya

        Thanks very much Andy… its working now….

  • Cheng Chun

    how do i switch the image dynamically?

  • 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?

          • 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

  • 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

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

      • 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……..

      • 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

          • Ketan Lathiya

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

      • Florian Schupp

        Hi Andy, it would be nice to have the galleryMode – option in the master releases :)

  • 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

      • 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’,

    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’,

    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’);
      return false;

      The new update is available on github

      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?


    • 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.

      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?

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

            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

            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

            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


          • 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.

  • 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

      Hope this helps

  • 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:

    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:

        Thanks man!

        • Andy Eades

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

      • 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


  • 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

    • 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);



      • Andy Eades

        This is no longer an issue in the latest version available to download now.

  • Arjun

    hai, any body tell me. can i change the image width and height.

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

    • Andy Eades

      I dont think this is an issue anymore?. If it is, i cant seem to replicate it

      • Florian Schupp

        It still is i think. (Mac OSX, Google Chrome)

  • 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 thanks

    • AKhil

      Did you get the answer for your question?? as I am also have same query

  • Anita

    Hi, thanks for the great plugin!

    I use it in combination with the
    gallery but I have a little problem with the distance of the inner zoom
    window. It needs to move about 2px to the right and 2 px down. Top and
    left position works fine.

    Thanks a lot!


  • Dante

    Hello, when you have a container with position relative and the plugin inside of this container, the inner zoom is displayed behind the background image, any solution for that?

    Thanks for you’re help

  • Naveed Butt

    Hi Andy,

    I am trying to use the Plugin, but the zoomLevel is not working for the plugin. I am using Lens type and tried to set the zoomLevel to more than one and zoom is not shown on the correct position. Please help…

    Here is the code…

    zoomType: “lens”,
    easing: true,
    lensShape: “round”,
    lensFadeIn: true,
    lensFadeOut: false,
    lensSize: 200,
    zoomLevel: 0.5

    • Andy Eades

      Hi Naweed. I am going to overhaul this section of the plugin in the next week.

    • Andy Eades

      I have released a new version now and completely re-done this section of the plugin

      • Naveed Butt

        I will take a look at this on Monday and will tell you the details.

        Thanks for your efforts…

    • ayesha

      i am looking image zoom jquery funtion for my blog each post

  • David

    Great plugin!

    I have a page that can have many images on it that I want to use this with, problem is that the images are dropped by codebehind, so I slapped together a fast way to auto wire-up the images that need to be.

    You just add 2 attributes to your image tags
    data-autozoom=”true” – tells the auto wire-up to wire-up this image.
    data-autozoom-config=”zoomType:’lens’,lensShape:’round’,lensSize:300″ – This is the config info that will be run to the image.

    An example of the full image tag is:

    Next, add this code to the head area of the page:

    $(“img[data-autozoom]“).each(function () {
    $(this).elevateZoom(eval(“({” + $(this).attr(“data-autozoom-config”) + “})”))

    And when you load the page in the browser it will auto start the zoom on thee images with the config set in the image tag. No id tag needed on the images.
    Hope someone finds this helpful as well.


  • Richy

    Hiya, where is the best place to get help, I looked in help and support and some one has already asked my question but there is no reply?
    “zoom Level option not working in case of gallery”

    • Andy Eades

      Hi Richy. I am going to overhaul this section of the plugin in the next week.

    • Andy Eades

      I have released a new version now and completely re-done this section of the plugin

      It has been tested with all the examples, but let me know if it doesnt work for you

      • Richy

        Thanks for this.. Just tried I seem to get the same problem still
        my code
        $(“#img_01″).elevateZoom({ gallery:’gal1′, zoomLevel:0.5, zoomWindowWidth:425, zoomWindowHeight:425});
        example of the error in picture,
        works on load put if you select another thumb. zoom resets

  • Aamir Shahzad

    well its nice plugin do you implementing option of multiple thumbnails to be use and slide them as well.

  • David

    Hi Great plugin! I have just updated to version 3.0 When I test it in IE9 and IE10 the Lens sometimes remains on the screen. Please see image attached. This does not happen on a mac in Firefox, Crome and Safari.

    • Andy Eades

      I have just released a patch for this
      Please try again

      • David

        Yes great this fixed the problem.

        I’m now trying to set the “lensSize” but it does not seem to be taking? You see a small lens for a split second then it goes to about 200px

        I see on your configuration page zoomType Possible Values: Lens, Window, Inner but capital L does not work so I use lower case. I’ve tried : lensSize : “50″,

        zoomType : “lens”,
        lensShape : “round”,
        lensSize : 50,
        borderColour : “#d32727″,

        • Andy Eades

          Please try again. The latest version should have fixed this.

          • David

            Very impressed. Thanks for the quick turn around. Works a charm!

  • ThanHtike Aung

    How can I set Lens’s ratio ? If my image has 4:2 , lens also has ratio of 4:2 . I want to set when my image has 4:3 or 4:2 or others but lens always has ratio of 1:1. Please guide to me..

    • Andy Eades

      Can you please send a visual of what you are trying to achieve? Thanks

      • ThanHtike Aung

        I mean width and size ratio of Lens…
        Can you see lens has shape of Ractangle due to image width and height . I want to set it always as Square shape ?

        • Andy Eades

          The Lens size should be a ratio of the zoomWindow

          This for example would be square
          zoomWindowWidth: 400,
          zoomWindowHeight: 400,

          The lens and window need to be the same shape

          • ThanHtike Aung

            Yah,, you right .. thanks in advance for your valuable times.. I appreciated your guide.

  • Sindragosa Knight

    Can I set initial lenSize when using scrollZoom? My Script as follow..
    cursor: ‘pointer’,
    galleryActiveClass: ‘active’,
    imageCrossfade: true,
    scrollZoom : true,
    loadingIcon: ‘’,
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 500,
    lensFadeIn: 500,
    lensFadeOut: 500,

  • Ilia

    excellent plugin! well done! thanks!

  • tps

    when u change image through json the zoomcontainer image does not change.
    Please guide to me

  • Jon

    Hi Andy amazing imageZoom. I was wondering if there is a solution to make your image zoom completely responsive and adaptable to any device size and keep the inner zoom.

  • David

    1. Hi, this is great! One problem I am noticing is if you change the zoom image like this in JS:


    The zoom gets confused and breaks, I’ve noticed a few strange things one being the zoom appearing in the wrong position (see image attached) this is supposed to be “inner” zoom.

    2. I have tried to keep the image in the div (not empty) and change the images like this:

    $(‘#zoom_07′).attr(‘data-zoom-image’, zoomImageDataUri);

    $(‘#zoom_07′).attr(‘src’, ‘Small/Zoom.png’);

    But when I do this the zoom image does not update?

    3. This works but not in i.e. (no .empty()) but this is not ideal as multiple zoom images start to fill the div:


    • David

      Just adding a bit more info:

      When I look at my code with firebug I can see that the img has been updated:

      But when I rollover the image to get the zoom the zoom image is still the first fabric that was loaded when the page first loaded.

      Below is my code:

      $(‘#zoom_07′).attr(‘data-zoom-image’, ‘/img/large/Sofa_Dog-Orange.png’);

      $(‘#zoom_07′).attr(‘src’, ‘/img/small/Zoom.png’);


      zoomType : “inner”,

      cursor: “crosshair”,

      onZoomedImageLoaded: function() {





      • severin

        Hi, I’m trying to do the same thing. I have one big image which is changed by actions on the page and I am trying to be able to zoom on this changing image but the zoomed image does not change. I’m delving into the js to try and update a src reference. Any advice or revelations on this topic? This is a great, well done package. Thanks.

        • Andy Eades

          There is an example of this here

          You need to use swapthe image function to change the image which will do all the updates internally.

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

          • severin

            Of course, thanks for pointing that out. In classic form, I skipped that example. Cheers.

  • Rahul Gupta

    HI ,

    IT is awesome Plugin. Can you please help me on one thing…

    I want lens to cover the whole image when we hover on the image.. it must be full width to cover whole image on hover..howerver,

    I tried to set the lensSize.But it does nothing

    Please advise . please help me as soon as possible

    Rahul gupta

  • andreasacca

    Hello, thank you for this awesome plugin.
    Is there a license that allow people to use it into Themes on sale in some marketplace like themeforest?

  • Albiona


    I have integrated your code in this website
    As you can see it works perfectly in mozilla, but it is not working in chrome and safari.

    Any idea why this might be happening ?
    Any help is appreciated.


  • Cong HS

    how to load data-zoom-image url in code behide sir like this:

    <asp:Image runat="server" ImageUrl="~/Images/2/image1.png" data-zoom-image="” ID=”img1″ />

    code behide

    protected string clients;

    public string Clients { get { return clients; } set { clients = value; } }

    protected void Page_Load(object sender, EventArgs e)


    clients = “../images/1/image1.jpg”;


    • AKhil

      Hey Cong.. did u get answers of this ?? I also has same query

  • Matt Clark


    I’m trying to use this on a website, wanting to use the gallery option. However the larger images aren’t all the same size and aspect. Seems to break it, is this something that just isn’t possible or am I doing something wrong?

    • Brad C

      I’m having the same issue; Did you find a fix?

      • Matt Clark

        afraid not. I gave up and just made the other thumbs link to lightboxes

        • Andy Eades

          There are some undocumented functions which allow you to constrain the image on height or width
          So for example if you want to constrain the image on height of 274, it will set the width to auto but cap its height

          Try these settings
          constrainType:”height”, constrainSize:274

          They dont work with tint at the moment, but i will look to getting some examples of its use up

      • Andy Eades

        There are some undocumented functions which allow you to constrain the image on height or width
        So for example if you want to constrain the image on height of 274, it will set the width to auto but cap its height

        Try these settings
        constrainType:”height”, constrainSize:274

        They dont work with tint at the moment, but i will look to getting some examples of its use up

        • Brad C

          Thanks for the reply, however it looks like I misunderstood Matt Clark’s original question. My problem actually involves other images *in the gallery* not being the same size and aspect; when this is the case, zoomContainer doesn’t resize. I believe it’s the same issue being raised on GitHub here:

          I’d like to be able to use zoomType: “inner” with gallery images of different heights, but right now it looks like the only options that support gallery images of different heights are

          zoomType: “lens”,
          containLensZoom: false

          • Andy Eades

            Check the Example here

            Is this similar to what you mean?

          • Brad C

            No – that appears to constrain the main image size, but zoomContainer doesn’t resize as it should onImageSwapComplete (it holds the same dimensions as the first image)

            It looks like someone asked the same question on StackOverflow and there’s a bit of a hacky solution:

          • Andy Eades

            Ok… I get you now… I will patch the file and re-upload to github

          • Brad C

            Cool, thanks. I worked around it with this for now:

            onImageSwapComplete: function() {
            var imageHeight = $(“img#zoom_01″).height();
            $(“.zoomWindowContainer > div”).height(imageHeight);

            However, .zoomContainer should resize when the viewport is resized as well.

          • Andy Eades


            try the new version just posted – This should resize the wrapper ok when swaptheimage is used..It fixed a bug i could replicate.. so hopefully this was the same issue you are having. If not, please provide me a demo so i can see the bug in action.

            There is a responsive option. I need to do a bit more testing with this though. I am not sure if it works for every use case. Again, if you can provide demos of the issues this helps improve things faster and easier

          • Brad C

            I tried the new version and removed my callback function and it broke again. I can’t provide a live example at the moment but here’s a video of the problem in action:

            And here’s a video with the intended functionality on 3.03 with the callback function I posted above:

          • Andy Eades

            Thanks a lot for posting the videos. Appreciate it. Helped me see what all the issues were. A bit more than a quick fix was needed and I have rewritten those parts of the plugin now. I need to spend a bit of time testing it then hopefully you can check it for me again once i update it if you mind… Thanks

          • Brad C

            No problem, thanks for digging in. I’ll happily check it out whenever you’re ready.

          • Andy Eades

            Any chance you can try again and see if there is any difference for you? Thanks

          • Brad C

            Just tried with 3.0.5 and same issues still present.

          • Andy Eades

            I set up a demo that looks to me the same as your video and works

            Any chance you can email me your site so i can take a look at the code?

          • Rahel

            Have you found a solution to this problem yet? I am also having the same issues – problem occurs when gallery consists of different size images. Works fine when all images are the same dimension.

          • Andy Eades

            Can you please send me a live example of the issue so i can fix.. I tried to replicate but all seems ok to me

          • Rahel

            Do you have an email I can contact you at?

          • Andy Eades

            If you just send to our main email I will pick it up there… Thanks a lot

  • Appan Pks

    Can i use this option my blogger ?Give guide to code..

  • Mark

    I would like to thank you very much. This is very good, I was trying to integrate cloudzoom with fancybox but I just wasted my time with out any success. Thanks.

  • Mark

    Andy can you help me out please? When I use this plugin on a jquery slider I have, the zoom feature is showing up where there are no visible images. What’s the fix?

  • Sanjay

    Hi Mr. Andy Its is very Great Plugin..
    i have the Four Image I I’m doing Zooe for second one then if i will do mouse hove on other place than first image Zoom is showing how to fix it,

  • Nagyy34

    Hello! I have one problem. When I want to use gallery, the tutorial say: “Note: Don’t forget to put the class name you set on the default gallery image so it shows active from the start.

    I create 1 class: .default, and write the css code here, and add the class=”default” to the first image. The result don’t work. Show the 4 small image, and nothing do when I click any small image. Sorry my poor english. Can help me someone?

    • Andy Eades

      I will update the documentation to make this more clear – In the meantime, please send your example code and i can help


  • Nabeel Alkaff

    Great Result! I want to call a function while elevateZoom is working.Is there anyway to do that?

    • Andy Eades

      Can you explain a bit more – What function are to you trying to call and to do what – Thanks

  • Raymond

    Hi, is it possible to deactivate the zoom (inner) on mobile devices? We would like to use the gallery. Like to hear from you!

    • Egar Astawiguna


      • Raymond

        Place this somewhere on the top of the js file:

        var isMobile = {
        Android: function() {
        return navigator.userAgent.match(/Android/i);
        BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
        iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
        Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
        any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

        Search for:

        self.zoomContainer = $(”);

        Replace it with:

        if(!isMobile.any()) {
        self.zoomContainer = $(”);

        After that, search for the touch events:

        //touch events
        self.$elem.bind(‘touchmove’, function(e){

        And place here also the if(!isMobile.any()) { around that piece of code.

        • Guest

          it would be grate help, if you provide inner+scroll

      • Andy Eades

        Thanks raymond for the solution. I have also edited the plugin for a way to disable through a function call too in latest version 3.0.8

        You can call this to disable
        var ez = $(‘#zoom_01′).data(‘elevateZoom’);

        So you can maybe in your frontend code detect window resize and call the function

        On this example, if you resize your browser window to less than 600px the zoom will disable and over 600px will re-enable.

        You can call the function though as and when needed

  • fabrigm mundu

    Hi! Thanks for this great plugin. I have one problem that I need to fix, but I don’t know if it is possible because it happens to you too. When I click to other image the new image is not showed until the zoom image is loaded… That is a problem because it seems to be broken or does not work… Any fix for this? Thanks
    With the icon loading set you can know that it’s not broken, but what about showing de next image in small and loading icon until the zoom image is loaded? Or nothing if they not hover the image…
    Thanks again!

  • RedRedZinko

    Hi. This plugin is great, thank you. Please help me, how i can add some text from to the big image?

    • Andy Eades

      This feature is not yet implemented sorry.. I will try and find some time to do this, but we are very busy with client projects pre christmas… I have a better responsive version to release soon, so i will try sort this after that.

  • roy


    1. How can I control the volume of the zoom ?
    which property in the Jquery I need to change ?

    2. in some photos the zoom make the opposite and instead of increase the picture – its decrease it.
    do you know why ? and what is the solution ?

    3. where can I download the documentation ? I just cant find it…

    Best regards

    • Andy Eades

      I am not quite sure what you are referring to with controlling the volume. There are some options for changing the zoomLevel and also doing this with the mousewheel. With regards to number 2, please make sure your images are large enough to be able to zoom.

      The documentation i have provided via examples and a config page for you to browse. Regards, Andy

      • roy

        hi andy,
        I want the zoom level value to be bigger than the normal. I tried to put this line in the Jquery, for example :
        zoomLevel : 10 – but its Not working for me.

        I didnt find in the config page the option that handel the zoom level.

  • Tushar

    Hi , If image is off low resolution then image hover lense goes bigger than image , please help

  • Christina Kostova

    Hi! I can’t seem to activate the zoom property. Could you help me, please? I’m using Joomla and I’ve uploaded the js files onto the website. Thanks.

    • Christina Kostova

      Any ideas? I need it urgently, please.

  • Limes

    Thanks for the elevate zoom plugin, its very cool.

    Unfortunately I got a problem: If the dimensions (at least the width) of the image on the website (or in the zoomwindow) reaches or exceeds the dimensions of the original image itself, the zoom hangs. It works as soon as you once changed the zoomlevel by wheeling the mouse.

    You can reproduce it by using an image i.e. with 600px width, show it with 700px on the webpage and put a zoom on it with a zoomwindow of 400×400. It you put the mouse on it, the square is shown and moves with the mouse, but the image in the zoomwindow is frozen. It “unlocks” if you use the mousewheel.

    The other case (zoomwindow): The same image (600px width), show it with 500px on the webpasge, use a zoom with zoomwindow 700×700 and zoomLevel 0.5. You can zoom the image, but if you move the square the zoomed image doesn’t move at all.

    Please help me.

  • Limes

    If I use a gallery, the default zoomLevel is not used if I switch between the images. It uses 1 always.

    Please help me, thanks.

  • Stefan Andrei Cristian

    hi Mr Andy!

    I like your plugin, it is very nice and usefull. However i think i have a problem with it and i was wondering if you can help me , please.

    i have inserted the plugin on this website “” (this is one of the pages) and i cant figure out this problem that i have: when i click the gallery links the image loads but when i hover it, the magnifier shows the previous image instead of the active one. this problem is not always permanent, sometimes the plugin works fine, sometimes it doesn`t. you can see this problem on all my product pages of the website.

    can you please help?

    • Andy Eades

      You have initiated the zoom twice on the same image

      //initiate the plugin and pass the id of the div containing gallery images
      $(“#zoom_mw”).elevateZoom({gallery:’gal1′, cursor: ‘pointer’, galleryActiveClass: ‘active’, imageCrossfade: true, loadingIcon: ‘’});

      $(“#zoom_mw”).elevateZoom({zoomWindowPosition: 1});

      You should only have one initiation of it, and all options passed at the same time

      $(“#zoom_mw”).elevateZoom({gallery:’gal1′, cursor: ‘pointer’, galleryActiveClass: ‘active’, imageCrossfade: true, loadingIcon: ‘’, zoomWindowPosition: 1});

  • Stefan Andrei Cristian

    i am such a retard sometimes…..thanks a lot Mr Andy!!! YOU ROCK!!! :)

  • Harison F. de Oliveira


  • Milosz

    Could anyone post the exact working code for the above example with the thumbnail images under the main image that will match the downloaded source files?
    1) I downloaded the source files,
    2) Replaced the code pieces from the examples
    3) Tried even to replace the IDs to match the code

    but it still doesn’t work, doesn’t show the main image even so it would be good if the source files included DEMO files for each option as the source files don’t seem to match the CODE showed on the Example page.

  • akilic41


    I implemented elevatezoom (added jquery.elevatezoom.js and jquery.js, change my code as below and nothing to do)

    it works but lens remains below the image. Can you please help? My code part is the following

    Is something missing?

    zoomWindowPosition: 1

  • AKhil

    Hi All,

    I am trying to set the image path using knockout .js but its not working … my code is as below

    I am getting issue when i set the data-image and data-zoom attributes from code behind in .net …
    Please suggest

  • Steven

    Does the gallery feature work with IE7 or IE8? When I used those browsers with your page,, I could not click on the leftmost image of the four gallery images. The same things happens on the image-zoom examples page. Does anyone else experience this?

  • Steven

    How can I reverse the direction of movement for inner zoom? After zooming into the image, when I move the mouse left, I want the zoomed image to move left, and when I move the mouse up, I want the zoomed image to move up. Is that possible?

  • Fahmi Sabar

    plis help.. zoom with gallery not working for me..,
    please anybody have a full coe html..??

  • akilic41

    Can anyone please help me about this issue : when i added jquery-1.8.3.min.js and jquery.elevatezoom.js file
    in my mvc view, it’s working but I am getting “uncaught typeerror object object object has no method ‘dialog’ ”
    a few place in my running and the places where running before now not running.
    when i search in google , java script version conflict cause this problem. Can you please help me? Thanks in advance

  • Rahel

    Is there a way to activate gallery images on hover rather than on click?

  • Vsevolod Chebykin

    Hello! Thank you for your plugin. And i have question – what the strange paddings around .zoomLens are equal to width of border of img ?
    for example, your page with examples where you have style {border:Npx solid;}.
    and could I fix this with options?

  • cici

    hi i have a big probleme when i used this $(‘.img .tourimg img:visible ‘).each(function(index, element) {



    $(this).elevateZoom({tint:true, tintColour:’#F90′, tintOpacity:0.5, zoomWindowPosition: 10});

    }else $(this).elevateZoom({tint:true, tintColour:’#F90′, tintOpacity:0.5, zoomWindowPosition: 1});


    it’s works greatfuly but when i hide an image i supose that the number of $(‘.img .tourimg img:visible ‘). will change and then the index will change also but its not what hapening the img hidden still is in count how do i do to get the index onlly for the visible img or how do i skirt this probleme

  • Chris Hatton

    #Bug report

    Hi all

    There seems to be a bug with using the scroll zoom with the gallery option. The zoom lens mis-aligns when clicking a gallery image, and re-aligns if you scroll zoom.

    Other than that, great plugin guys!

  • Gord Davis

    Is there a way to completely remove the borders on the images and thumbs?

    The images I’m using have a black background and the site background is black so I don’t want to see any borders on the images. I’ve turned off all the borders with border:0; and borderSize: 0, but I’m still seeing a fine grey border on the gallery images and the main image.

    Any help would be appreciated.


  • Vu Chien Thang

    Hi Andy,

    Firstly, thanks for your amazing plugins,

    I’m trying to apply the plugin to my Virtuemart on Joomla 2.5 but it does not work. I tried to modify something such as remove tag, chang the way calling jQuery but nothing help.

    I’m very surprised when I copy all html source to create a static html and view it on browsers, it works!

    I think there should be a conflict or ansynchronous problem while loading the page?

    I very appreciate if you visit and help me to solve it.

    Thank you in advanced!

    This is the php link:

    And this is static html link:

    • Vu Chien Thang

      At last, I fixed it. The problems come because of the path of data-image and data-image-zoom property
      Thanks, Andy!

  • Arun

    how we can provide zoom for small images..? for example small & large both images are 200 x 133… plz reply fast

  • Yeshodhan Kulkarni

    How do I configure the plugin to show the zoom window only when the user clicks on the crosshair? Is there an option? It shows up by default on hover currently.

    Btw, awesome job on the plugin. Very easy to configure and use.

  • Naton Crul

    Hey there.

    Really nice work. I love it!

    But i have a little problem concerning the “zIndex” and i hope you can help me out here.

    I’m building a webpage in Webaccapella – maybe you know it … a webpage-building-tool for people who are actually not known to be the best website-programmer out there :-)

    Webaccapella assigns a zIndex to every element which is used. And you can’t really change it because there’s no code-view inside.

    So it appears that my lens with the big picture is behind my small picture. I’ve already tried a lot to change that, but as you might noticed, i’m not able to do so.

    Is there a way to set the zIndex of the lens, or the zooming-effect in general, to the highest possible value for every used zoom?

    Would be great to get an answer as i’m already getting desperate :-)



  • Michael Günther

    Hi, I really would like to use your zoom script for my gallery.

    There is just one problem I have.
    My gallery works using the “a” tag and adresses pictures via “src” and “rel” paths.
    Would it be possible to use your zoom plugin within these boundaries?

    For example like this:
    a href=”1.jpg” rel=”small/1″ data-zoom-image=”large/1.jpg” id=”zoom_05″

    If this is possible, which elements would I have to change within the script for that?

    With kind regards,

  • Samuel Escapa

    Hello, Thank you so much for this, it’s very good and amazing, but I have this error:

    Why when I try to change of image (#gallery_01), an image appears for 1 second and then leaves again. Thank you for your help

  • pouya

    hi, i’m trying to use Gallery List, but my list doesn’t work exactly….(images on the list don’t replace with main image)


    HTML :


    $(function () {

    $(‘#img_01′).elevateZoom({ constrainType: “height”, constrainSize: 274, zoomType: “lens”, containLensZoom: true, gallery: ‘gallery_01′, cursor: ‘pointer’, galleryActiveClass: “active” });

    $(“#img_01″).bind(“click”, function (e) {

    var ez = $(‘#img_01′).data(‘elevateZoom’);


    return false;



  • pouya

    hi, i’m trying to use Gallery List, but my list doesn’t work exactly….(images on the list don’t replace with main image)


    HTML :


    $(function () {

    $(‘#img_01′).elevateZoom({ constrainType: “height”, constrainSize: 274, zoomType: “lens”, containLensZoom: true, gallery: ‘gallery_01′, cursor: ‘pointer’, galleryActiveClass: “active” });

    $(“#img_01″).bind(“click”, function (e) {

    var ez = $(‘#img_01′).data(‘elevateZoom’);


    return false;



  • Guest

    Does this work on iOs devices like iPad?

  • Gaurav Kolekar

    I want to add “Click to zoom” on the lense how can I do that ????

  • arpit

    it would be great hepl, if you provide inner+scroll together in one

  • Dieter C.

    Thanks for that amazing plugin!

    I tried to build up a little zooming gallery according to your example ‘Gallery and Lightbox’. To achieve responsive layout, the large and small images a sized as relative percentages to the parent , the large one to 100%, the 3 small ones to 32%. This works fine for the small images, but the large image is always rendered in its original size because elevateZoom wraps the image with a div in the images size. Why does it not inherit size from its parent, what is the result of the ‘responsive’ config option?

    thanks for helping!

  • Breck


    Is there a way to center a vertical image in the zoom area? I centered it using a div for now, but on mouseover it is not displaying the zoom in the center. Example: (click on 4th image in slider to see what I mean.)

  • Jordi Garcia

    Hi, this is a great tool. Is there a way to disable anti-aliasing when zooming in more than 100% of the original size?

  • bien quang cao

    hi, how can i use with jQuery live()?

  • Olga Khrebtova

    I have a problem with my images in elevatezoom. They are cropped according to the fixed size in gallery. However, I need them to be scaled according to either height or width (depending on which is the biggest) with automatic fields (top+bottom or left+right fields). Also, I need my image to align in the center of gallery, whethe if it’s horizontal or vertical.
    Thanks in advance

    • Olga Khrebtova

      I need my images to look like 1st image but no like the 2nd image

  • Faysal Ul Haque

    You’ve done a great job. Thanks for the plugin…

  • Falguni

    code is not worked for web page with master page… please help me…

  • Cam

    Cool! Just what I wanted. You just saved me lots of time :) Thank you kind sir!

  • simran singh

    The plugin is mind blowing and thanks for that.
    Is this possible to use this plugin in the ready made HTML 5 template?
    If possible please can you help me out on this?
    Thank you

  • Alagusundar

    Great plugins. Great work.
    Thanks for sharing Amazing Plugins.

  • Guest

    Uncaught TypeError: Cannot call method ‘css’ of undefined getting error

  • kuldeep

    getting error when click on thumbnail image “Uncaught TypeError: Cannot call method ‘css’ of undefined”

  • Kieran Anderson

    Anyway to use with an HTML image map?

  • Mark Baillie

    My source images are in a div with css transform scale shrinking them to 25%. The zoom lens that gets drawn over the top I can see isn’t taking this scaling into account, would there be any way to work around this ?

  • Mary Yanny

    I would like the large image to be loaded after the mouse hovers over the small image. This saves bandwidth if there are many images on the same page. I see that there is a “preloading” option in the script but it is commented as a placeholder for the future. I wonder if you (or anyone) can give advice how to achieve no-preloading, i.e., only load large image when mouse hovers over the small image.

    Very much appreciate any feedback!