flexslider-with-elevate-zoom

Flexslider Zoom Using Elevate Zoom

So after I did my intial blog post Implementing, Styling and Extending Flexslider I had a lot of people coming to my site searching for a zoom function with flexslider. So I wrote the article Flexslider With Zoom Image Function. This also raised more question from users asking about using ElevateZoom with Flexslider. Sooo I have now created a couple of examples that do just that! I know I know I am too good to you guys!

See the example flexslider with inner zoom or the flexslider with lightbox zoom.

The set up is very very easy you include both plugins and jQuery of course and the styles from each plugin if you choose to use them and then the basic flexslider HTML code with an added class on the images and the data-zoom-image link to the larger image for the zoom to kick in, just like this:

<div>
  <ul>
    <li>
      <img src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
    </li>
    <li>
      <img src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
    </li>
    <li>
      <img src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
    </li>
    <li>
      <img src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/>
    </li>
  </ul>
</div>

Then you simply tell each plugin to do it’s business:

$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "fade"
  });
});

and:

$(window).load(function(){
  $('.zoom').elevateZoom({
    zoomType: "inner",
    cursor: "crosshair",
    zoomWindowFadeIn: 500,
    zoomWindowFadeOut: 750
  }); 
});

If you want to use the lightbox zoom then you simply use this code:

$(window).load(function(){
  $(".zoom").elevateZoom({
    cursor: 'pointer', 
    imageCrossfade: true
  });  
});

I have kept this one nice and short as firstly it really is that easy and second because you have probably reached this post through my previous posts Implementing, Styling and Extending Flexslider and Flexslider With Zoom Image Function so I do not want you to have to re-read all I have told you previously, because I am nice like that!

See the flexslider with inner zoom.

See the flexslider with lightbox zoom.

Of course you can get and use the files I have used in my examples to play around with.

Download Files.

21 thoughts on “Flexslider Zoom Using Elevate Zoom

  1. Kate

    This is great, but I can’t get the inner zoom feature to work in Chrome. Any suggestions? Firefox works great.

    Thanks!

    Reply
  2. Rakel

    Hi, I need a flexslider with 3 different images, but with zoom effect just on the first one. Like this:

    The result using this code is that zoom effect is shown over the other 2 images too, and this is not what I am looking for.

    Could you please tell me how to avoid this?

    Thanks very much for your response.

    Reply
    1. SHH DesignSHH Design Post author

      Hi

      I am afraid I cannot see your code but as a guess I would say you may need to change how you set up the zoom so it only applies to a class on your first image. Or perhaps not have the data-zoom-image on any of the images other than the first one.

      Hope that helps!

      Reply
      1. Rakel

        Hi again!

        I think my code is right, here you have:

        So the problem is not here, can you guess where can it be?

        Many many thanks for your quick response, longing for next.

        Reply
      2. Rakel

        Hi again!

        I think my code is right, here you have:

        So the problem is not here, can you guess where is it?

        Many many thanks for your quick response, longing for next.

        Reply
    2. Rakel

      Hi again!

      I think my code is right, here you have:

      So the problem is not here, can you guess where can it be?

      Many many thanks for your quick response, longing for next.

      Reply
  3. Rakel

    Hello again, Steve.

    I have another issue now on zoom effect. Different behaviour depending on browsers. The zoomed image shows under main image on Chrome, Torch or Safari.

    It only works on Firefox. Isn’t it strange???

    You can check here:

    http://txini.com/H4/collage-01.html

    Hope you can help me. Thanks very much.

    Reply
    1. SHH DesignSHH Design Post author

      Hi Rakel

      Sorry for the late reply on this have not been around. After a quick inspection it looks like if you give .zoomContainer a higher z-index say somehting like 99999 then it appears over the top as intended.

      Hope that helps!

      Reply
      1. Rakel

        Hello Steve, thanks again for your help.

        I have tried with z-index as you recommended me, but it still does not work, because the image zoomed remains displaying over the two other slides.

        So I have tried with this http://shhdesign.co.uk/flex-zoom/ and everything seems to be OK, but my 1_zoom.jpg does not display. Maybe because of its size? I need my zoom images to be over 1800-2000 px wide.

        Thanks for your help.

        Reply
        1. SHH DesignSHH Design Post author

          As long as you image for the zoom is bigger than the normal image it should zoom fine. That is strange with the original problem as if the other 2 slides are not zoomable then it should not show at all and it seemed to work ok for me. If you want to email me with the files again, I can take a look and then get back to you on how to fix it.

          Reply
          1. Rakel

            Thanks Steve. Finally I’m gonna use a lens zoom effect (Im in a hurry on ending this project)

            Anyway, I would like to fix these two issues jut in case I need this solution in the future. I will check again the files later and email you.

            Thanks very much again for your time, and Merry Xmas.

            (sorry for bad english :)

  4. Inovator

    Hello.
    I have following code in WP page:

    <?php
    if(!empty($src)){
    echo '’;
    }
    $images = get_field( ‘images’ );
    if( $images ) {
    foreach($images as $image){
    echo ”,”;

    }
    }
    ?>

    <?php
    if(!empty($src)){
    echo '’;
    }
    $images = get_field( ‘images’ );
    if( $images ) {
    foreach($images as $image){
    echo ”,”;
    }
    }
    ?>

    I’m trying to make a lighbox, a full screen image on click. Any help? Thanks in advance.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *