Responsive jQuery Pop Up Gallery …

Responsive jQuery Pop Up Gallery es un plugin que te ayudará a mostrar una galería de imágenes en una ventana emergente ..

Cada galería tiene una pequeña vista previa. La cual presenta cinco modelos diferentes de galerías, estas estan separadas tanto su css como su javascript para utilizarlas por separado isn tener problemas a la hora de utilizar estas galerías.

Todas las animaciones son mediante transiciones CSS. La idea original era utilizar 100% CSS pero al ser una galería compleja es necesario aplicar un poco de javascript.

Responsive jQuery Pop Up Gallery  es responsive mediante el recálculo del tamaño de todas las imágenes y su posición cuando el navegador es redimensionado.

Aunque el efecto se vería mejor redimensionando la imágen y haciendola mas grande esta se adapta a su tamaño original .

Su estructura html sería la siguiente :

Dentro del head llamaremos a sus librerías correspondientes:

<!--Utilizamos la librería jquery-->
<script type="text/javascript" src="jquery.min.js"></script>
<!--Llamamos el script-->
<script type="text/javascript" src="pop-up-gallery1.js"></script>
<!--Llamamos el estilo para el javascript-->
<link href="pop-up-gallery1.css" rel="stylesheet" type="text/css" />

Tomamos los controles de la ventana modal abierta .

<!--Ventana modal abierta tomamos los controles -->
<div id="fullscreen">
<div id="fullscreen-inner">
<div id="fullscreen-inner-left" class="fullscreen-inner-button"><span class="icon-caret-left"></span></div>
<div id="fullscreen-inner-right" class="fullscreen-inner-button"><span class="icon-caret-right"></span></div>
<div id="fullscreen-inner-close" class="fullscreen-inner-button"><span class="icon-close"></span></div>
<div id="fullscreen-image"></div><!--fullscreen-image-->
</div> <!--fullscreen- inner-->
</div> <!--fullscreen-->

Colocamos la clase y sus imágenes correspondientes, para esta demostración se está utilizando la librería Icomoon.

<div class="wrapper-inner-content-image">
    
<img src="img/greece1.jpg"/>
<img src="img/greece2.jpg"/>
<img src="img/greece3.jpg"/>
<img src="img/greece4.jpg"/>
<img src="img/greece5.jpg"/>
<img src="img/greece6.jpg"/>
<img src="img/greece7.jpg"/>
<img src="img/greece8.jpg"/>   
<img src="img/greece9.jpg"/>    
    
<!--Clase hover de la imagen para este demo se está utilizando Icomoon-->
<div class="wrapper-inner-content-image-hover">
<div class="wrapper-inner-content-image-hover-cercle">
<span class="icon-search"></span>
</div> <!--wrapper-inner-content-image-hover-circle-->
</div> <!--wrapper-inner-content-image-circle-->

Su utilización es muy sencilla basada en un pequeño javascript y a puro estilo css.
Demostración
Más información e instalación aquí

Relacionado