Galería de imágenes Zoomable en Vanilla JavaScript-Vanilla-zoom. js
| Autor: | ohmiler |
|---|---|
| Views Total: | 458 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 27, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
El plugin Vanilla JS Image zoom le permite crear una galería de imágenes donde los usuarios pueden ver diferentes partes de una imagen seleccionada dependiendo de la posición del cursor.
Funcionamiento
Importar la hoja de estilo Vanilla-zoom. CSS y JavaScript Vanilla-zoom. js en el documento.
<link rel="stylesheet" href="vanilla-zoom/vanilla-zoom.css"> <script src="vanilla-zoom/vanilla-zoom.js"></script>
Inserte las previsualizaciones de imagen en la Galería siguiendo el marcado de la siguiente manera. Los usuarios pueden cambiar la imagen seleccionada para ser ampliada al hacer clic en las previsualizaciones
<div id="my-gallery" class="vanilla-zoom"> <div class="sidebar"> <img src="1.jpg" class="small-preview"> <img src="2.jpg" class="small-preview"> <img src="3.jpg" class="small-preview"> </div> <div class="zoomed-image"></div> </div>
Inicialice la galería y active la funcionalidad de zoom de imagen.
vanillaZoom.init('#my-gallery');
