Vanilla JS Library para zoom de imagen y panorámica

Vista prévia

Descripción

Sin embargo, otra biblioteca de JavaScript vainilla que permite al usuario ampliar y panoramizar una imagen dentro de un contenedor específico.

Funcionamiento

Inserte la imagen en un contenedor de zoom/panorámica.

<div id="image-stage" class="image-stage">


<div class="image-wrap">



<img class="image" src="example.jpg" alt="">


</div>

</div>

Agregue el zoom y aleje los controles a la imagen.

<div class="controls">

<button id="control-in" class="control control-in"><img src="img/zoom-in.svg" alt="Zoom In"></button>

<button id="control-out" class="control control-out"><img src="img/zoom-out.svg" alt="Zoom Out"></button>
</div>

Los estilos CSS requeridos.

.image-stage {

position: absolute;

width: 100%;

height: 100%;

top: 0;

left: 0;

transition: all 0.1s ease;

cursor: zoom-in;
}

.image-stage img {

width: 100%;

transform: scale(1);

transition: all 0.3s ease;

touch-action: pan-y;

user-select: none;

-webkit-user-drag: none;
}

.image-stage.zoom-in { cursor: -webkit-grab; }

.image-stage.zoom-in img { transform: scale(3); }

.controls {

position: absolute;

right: 2em;

bottom: 2em;

z-index: 2;
}

.controls button {

display: block;

width: 20px;

height: 20px;

padding: 0;

border: none;

background-color: transparent;

cursor: pointer;

transition: all 0.2s ease;
}

.controls button:focus, .controls button:active { outline: none; }

.control-in {

opacity: 1;

margin-bottom: 2em;
}

.control-out { opacity: .4; }

.image-stage.zoom-in + .controls .control-in { opacity: .4; }

.image-stage.zoom-in + .controls .control-out { opacity: 1; }

Coloque el de JavaScript Main. js necesario al final del documento.

<script src="js/main.js"></script>