creating more than one image zoom
  • Hello,

    I recently purchased the image zoom and have added the images and got it working OK on my website , but I am not sure how to make more than one, I tried adding another image zoom file calling it image zoom 2 below the other on the file manager but it only takes the images from the first.
    Please can you advise me thank you

    Kind regards
    Charis
  • Hi Charis,

    Have you updated the code to reflect the new images you're using for the second gallery? If you don't do that it will take the images from the first gallery.

    Neil
  • Hello Neil

    Thank you for your reply,

    I am not sure what I need to change on the code for a second gallery, please can you advise me

    Charis
  • Hi Charis,

    The image names will need to point to your new images for your second gallery, keeping them the same will only display the first gallery images.

    Neil
  • Hi Neil

    Thank you for your help, I will try and fix it.

    Charis
  • I've just tested and in addition to updating the image locations, you'll also have to change some other sections when using more than 1 gallery on a single page:

    Double click the HTML Code Fragment for the new gallery and update this sections to read zoom_02 and gallery_02 for the respective sections:

    jQuery(document).ready(function($){
    $("#zoom_02").elevateZoom({
    gallery: 'gallery_02',


    Then update the body code (in the same window) to match the new ids:

    <img id="zoom_02" src="image-zoom/small/01.jpg" data-zoom-image="image-zoom/large/01.jpg"/>

    <div id="gallery_02">
    <a href="#" data-image="image-zoom/small/01.jpg" data-zoom-image="image-zoom/large/01.jpg"><img id="zoom_02" src="image-zoom/thumb/01.jpg" /></a>
    <a href="#" data-image="image-zoom/small/02.jpg" data-zoom-image="image-zoom/large/02.jpg"><img id="zoom_02" src="image-zoom/thumb/02.jpg" /></a>
    <a href="#" data-image="image-zoom/small/03.jpg" data-zoom-image="image-zoom/large/03.jpg"><img id="zoom_02" src="image-zoom/thumb/03.jpg" /></a>
    <a href="#" data-image="image-zoom/small/04.jpg" data-zoom-image="image-zoom/large/04.jpg"><img id="zoom_02" src="image-zoom/thumb/04.jpg" /></a>
    </div>


    Hope that helps
    Neil
  • Great, I managed to get it to work, thank you very much for the information

    Charis
  • You're welcome, Charis! :)

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion