Estimated reading time: 10 mins
Problem when updating the DOM
I recently came across Jack Moore's zoom.js when working on a client's request for maintaining an image slideshow, with a carousel as well as zoom effect of an enlarged image, which the client picks from the slideshow.
The slideshow was a collaboration with owl.carousel.js and custom javascript since the zoom.js plugin didn't seem to pickup an updated image in the DOM. The zoom effect wore off.
An issue from carolineschnapp had been posted on the Jack Moore's Github repository as well with an answer that didn't seem to work for me either. You can find the reported issue here.
Might as well share the solution I used:
Final look
1. Setup the project and the files
Start with loading the dependencies - e.g. zoom.js and owl.carousel.js. You may find them here:
zoom.js documentation
owl.carousel.js documentation
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Zoom.js with carousel and pick effects</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/jquery.zoom.min.js"></script>
</head>
<body>
</body>
</html>
2. Add the markup
Set the markup for your carousel, I will set my own images but here are some plachold.it images:
<div class="carousel">
<div class="zoom">
<div class="big-img">
<img src="http://placehold.it/600x840" alt="">
</div>
</div>
<div class="owl-carousel">
<div class="owl-item">
<img src="http://placehold.it/600x840/f68a65/&text=1" alt="">
</div>
<div class="owl-item">
<img src="http://placehold.it/600x840/ff0000/&text=2" alt="">
</div>
<div class="owl-item">
<img src="http://placehold.it/600x840/00ff00/&text=3" alt="">
</div>
<div class="owl-item">
<img src="http://placehold.it/600x840/0000ff/&text=4" alt="">
</div>
<div class="owl-item">
<img src="http://placehold.it/600x840/ff9900/&text=5" alt="">
</div>
</div>
</div>
3. Initialize the plugins
Initialize the plugins in your own js-file. The options listed below is for my personal setup. Change them to whatever suits you the best, you can find out more about all available options to give you the best appeal. Don't forgot to link in your custom file in the head.
(function() {
///////////////
//init zoom
$('.zoom').zoom({
magnify: 1
});
///////////////
//init owl
var owl = $(".owl-carousel");
owl.owlCarousel({
items: 4,
slideSpeed: 250,
rewindSpeed: 350,
margin: 1,
responsiveClass: true,
navigation: true,
navigationText: [
"<i class='next-arrow'>Next</i>",
"<i class='previous-arrow'>Previous</i>"
]
});
})();
4. Change the big image
Once we have the zoom effect up running with the Owl carousel we need to change to src of the big image to pick up the url of the clicked image thumbnail from the slideshow. Here's how that is done:
$(".owl-item img").bind("click touchstart", function () {
var e = $(this).attr("src");
var carousel = $(this).closest(".carousel");
carousel.children('.zoom').trigger('zoom.destroy');
carousel.children('.zoom').zoom({ url: e });
carousel.find(".zoom .big-img img").attr("src",e);
});
And with that set, you should get something that looks like the following:
