Biblioteca lightbox de imagen de inspiración media-MediumLightbox

Vista prévia

Descripción

MediumLightbox es un plugin de JavaScript puro que proporciona un efecto de zoom de tamaño medio y amigable para móviles en tus imágenes.

Funcionamiento

Inserte las imágenes en el documento siguiendo la estructura HTML como se muestra a continuación. Tenga en cuenta que debe especificar la anchura/altura real de la imagen utilizando en su lugar los atributos "Data-width" y "Data-height".

<figure class="zoom-effect">

<div class="aspectRatioPlaceholder" >


<div class="aspect-ratio-fill" style="padding-bottom: 75.78947368421053%;"></div>


<img class="img" data-width="475" data-height="360" src="img.jpg">

</div>
</figure>

Cargue el archivo JavaScript principal ' Medium-lightbox. js ' al final del documento para que la página se cargue más rápido.

<script src="medium-lightbox.js"></script>

Los estilos CSS requeridos para el lightbox de la imagen al hacer zoom.

.scrollbar-measure {

width: 100px;

height: 100px;

overflow: scroll;

position: absolute;

top: -9999px;
}

.img {

display: block;

margin: auto;

max-width: 100%;
}

.aspectRatioPlaceholder .img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;
}

.zoom-effect .img {

cursor: pointer;

cursor: -webkit-zoom-in;

backface-visibility: hidden;
}

.zoom-effect .zoomImg, .zoom-effect .zoomImg-wrap {

position: relative;

z-index: 900;

transition: all 300ms;
}

.zoom-effect .zoomImg-wrap--absolute {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;
}

.zoom-effect .zoomImg {

cursor: pointer;

cursor: -webkit-zoom-out;
}

.zoom-effect .zoomOverlay.show { opacity: 1; }

.zoom-effect .zoomOverlay {

z-index: 800;

background: #fff;

position: absolute;

transition: opacity 300ms;

opacity: 0;

cursor: pointer;

cursor: -webkit-zoom-out;
}

Inicialice el MediumLightbox y listo.

MediumLightbox('figure.zoom-effect');

Establezca el tamaño de margen de la vista ampliada.

MediumLightbox('figure.zoom-effect',{

margin: 50
});