flex-zoom-blog

Flexslider With Zoom Image Function

“Flexslider zoom” has become the most googled term for people reaching my site and going to my blog post Implementing, Styling and Extending Flexslider this probably wasn’t what you lovely people were looking for (however lovely and useful that post may be), So I thought why not give the people what they want, a working flexslider responsive slider with zoom capabilities!.

There is perhaps a little cheating going on here as it does involve another plugin but it if you want something that works well and is easy to implement then this is for you.

So if you already have read my prevous blog post then you know how to get flexslider working beautifully, to now have a zoom function working alongside I have used the wonderful easy zoom plugin by Matt Hinchliffe. You can see it working and get the files from here. Obviously that will also show the other uses of this plugin and how you can implement it etc.

To get it working you just include that plugin and the styles (not all are needed but it is up to you) alongside flexslider and put the very simple code in to get it working. For less html code and for it to work nicely in my example I changed the selector in flexslider but as you can see that is very very simple:

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="dist/easyzoom.js"></script>

<script>
$(document).ready(function () {
    $('.flexslider').flexslider({
        animation: 'slide',
        controlsContainer: '.flexslider',
        selector: '.slides > div',
        useCSS: false
    });
});
</script>
<script>
        // Instantiate EasyZoom plugin
        var $easyzoom = $('.easyzoom').easyZoom();
    </script>

There is just one more little catch. If you want your slider to slide and be touch enabled and be zoomable you have to tell useCSS to be false. This is because otherwise as you touch the slide to zoom in, it works, but then if you go left or right it moves the slide around, obviously you will not want that if you are trying to zoom in on the bottom right hand corner for example.

That gives you a nice responsive slider using flexslider and zoom capabilities by either mousing over the image or touching and holding over the image on a touch device, perfect!

Now I could go on about this into a lot more depth with the ins and outs of each plugin and how they work and how you could combine them to one plugin etc etc but from what I have googled and researched around, you guys seem to just want a quick answer that is easy for everyone to do from beginners up so I will leave it there.

You can view the example here.

Download Files

Looking to use ElevateZoom? Then you want to go and have a read of this.

6 thoughts on “Flexslider With Zoom Image Function

  1. Matt

    Looks like exactly what I need, but for some reason I cannot get it to work. I have the images loaded in and I can see the first image is replaced by the second (zoom image)… but there is no zooming around (it just auto fits to the same original size (100% width)). At first I thought this might be an issue with bootstrap, so I remove that to test, but still the same issue.

    Any ideas why the second image ends up being the same size as the first? And yes, the 2 images are different in width and height.

    I also used your versions of both flex slider and easyzoom to no effect. Very frustrating. Cant figure this one out.

    Any help you could provide would be most appreciated.

    Reply
  2. SHH DesignSHH Design Post author

    Hi matt

    Do you have a link to where you are trying to get this to work? I could then try and inspect a little and see what your issue could be. I know I had a little issue with having the styles telling the images in flexslider to be 100% that was causing my original image before the zoom stretching to be the same size as the zoom image. Have you tried using my example files and fitting your content into that? They should work.

    Hope that helps and let me know if you have your files somewhere I can see them and I can then try and help you further should you need it.

    Reply
  3. Matt

    Hi, thanks for the response, but I ended up using Elevate Zoom instead.. it works perfectly and it’s even better for me, as it allows me to specify a container div for the zoom window… appreciate the response though, thanks! Nice blog by the way.

    Reply
      1. SHH DesignSHH Design Post author

        Hi Lily

        I have not used elevatezoom with flexslider myself as like you have found I saw many problems with it. However I have stumbled across this that may help you https://github.com/elevateweb/elevatezoom/issues/16 what are the problems you are experiencing? Or is it that you just can’t get it to work at all?

        I am willing to build an example using flexslider and elevatezoom if that would help you? But would be good to know how you would like it to work so I can get a fully working example for you to use.

        Hope that helps

        Reply
      2. SHH DesignSHH Design Post author

        Hi Lily

        Just in case you are still looking or if anyone else finds this useful. I have created a flexslider example with the elevateZoom plugin.

        You can see the inner zoom function here: http://shhdesign.co.uk/blog/flexslider-zoom-using-elevate-zoom/

        Or if you wanted to use the lightbox zoom you can see that here: http://shhdesign.co.uk/flexslider-zoom-using-elevate-zoom/lightbox-zoom.html

        I hope that helps some of you. If you need any more examples or anything, feel free to ask!

        Reply

Leave a Reply

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