So you have read my tutorial on how to implement and style Owl Carousel and now you would like to add a bit more functionality to it mainly being a zoom function to zoom into your images in your slider. No Problem! Let’s follow through how to do that.
Implementing a Zoom Function on Owl Carousel
We have the basic set up done from my previous tutorial looking like this so all we need to add is a little more script to this and change our mark-up slightly. We need to add the html needed for easyzoom to work. We just need to add another div inside our set up for Owl Carousel to work and a link in there to the bigger image you want to zoom. We also just give the image a class of “normal”. This will become apparent why we add that class in a minute, your html now looks like this:
<div class="slider"> <div> <div class="easyzoom easyzoom--overlay"> <a href="images/hero1-large.jpg"> <img src="images/hero1.jpg" alt="" class="normal"/> </a> </div> </div> <div> <div class="easyzoom easyzoom--overlay"> <a href="images/hero2-large.jpg"> <img src="images/hero2.jpg" alt="" class="normal"/> </a> </div> </div> </div>
I am just using our main single slider in this example, just to keep it nice and simple to understand, but it would work across anything you want.
Next it is a simple case of including your stylesheet for easyzoom and the easyzoom js file. Your head will now look something like this:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>OWL Carousel With Zoom Image Function</title> <link rel="stylesheet" type="text/css" href="styles/owl.carousel.css" /> <link rel="stylesheet" href="styles/easyzoom.css" />
Then if you kept your styles in the page from our previous tutorial implementing and styling Owl Carousel they would be below that. Your scripts now look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/owl.carousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
singleItem:true,
navigation: true
});
});
</script>
<script src="js/easyzoom.js"></script>
Let’s just add our code in there to get easyzoom to kick in:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/owl.carousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".slider").owlCarousel({
singleItem:true,
navigation: true
});
});
</script>
<script src="js/easyzoom.js"></script>
<script>
// Instantiate EasyZoom plugin
var $easyzoom = $('.easyzoom').easyZoom();
</script>
Now that is actually working, it is zooming in to the image but you may not notice that it is if you are not inspecting the code as you hover. This is all just because in our styles from the previous tutorial we have:
.owl-item img {
width: 100%;
height: auto;
}
This is causing all images within the owl-item to be 100% width so the zoomed image is actually getting contained the same as the orignal image so you do not notice any difference. This is why we gave our initial images the class of “normal” so that we can apply the width 100% to only them images in the owl-item, like so:
.owl-item img.normal {
width: 100%;
height: auto;
}
Now that should be working better. If like me you think zooming in a full width image is a bit much and probably would not be done, then we can just contain our slider to have a max-width and sit in the middle of the page like so:
.slider {
max-width: 960px;
margin: auto;
}
To me that is going to be much more useful and a more standard way you would have a zoom as it will shrink down on smaller screens so you can zoom but when on larger screens it is unlikely you would need a full width big image to be doing any zooming.
You can download these files or view the demo and inspect away! I hope you can all create something really cool with this.