The gallery comes with a thumbnail that floated at the left side in a vertical way and the main photo will change when clicking on the thumbnail.
This vanilla Zoom plugin works like any kind of Image magnifier which Zoom out the specific part of the photo according to the cursor position.
Also, when the user hovers the main image, it will Zoom the image. It works with cursor position and users able to view different parts of the selected image.
<link rel="stylesheet" href="vanilla-zoom/vanilla-zoom.css"> <script src="vanilla-zoom/vanilla-zoom.js"></script>
<script> vanillaZoom.init('#my-gallery'); vanillaZoom.init('#my-gallery2'); </script>
<div id="my-gallery" class="vanilla-zoom"> <div class="sidebar"> <img src="images/speaker-closeup.jpg" class="small-preview"> <img src="images/speaker-touch.jpg" class="small-preview"> <img src="images/speaker-lemons.jpg" class="small-preview"> </div> <div class="zoomed-image"></div> </div>
The thumbnails are placed inside the sidebar div and each image needs to add a class small-preview. As for as main photos, we don’t need to add an image tag here, only need to define a div with class zoomed-image and it will automatically get the photo from the thumbnails.