“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.
Looking to use ElevateZoom? Then you want to go and have a read of this.