|Views Total:||0 Views|
|Official Page:||Go to Website|
|Last Update:||March 28, 2019 at 9:13 pm|
The gallery comes with a thumbnail which 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 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 user able to view different parts of the selected image.
How to Add Photo Zooming Gallelry
<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.