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.