Bloguero-ec

Codigo Fuente, programación, Diseño Web

Mostrar galería de imágenes con Magnific Popup…

junio 2, 2014
codigo-fuente,galeria,javascript,jquery,thumbnail



A la hora de abrir formularios, mensajes, alertas, ampliar fotografías, textos adicionales o cualquier otro contenido , estos popups son una muy buena solución.

Actualmente, hay pocos que estén preparados para ser responsives, es decir que puedan adaptarse al tamaño de tu pantalla sin parámetros o configuraciones extra.

Magnific Popup es un sistema de diálogos, popup (lightbox) responsive que está centrado en el rendimiento (su estética es un tanto simple pero no deja de ser bonita), adaptando el tamaño de las fotografías o ventanas automáticamente al tamaño del viewport.

Además de soportar imágenes, galería de imágenes, precarga de imágenes, vídeos de youtube o vimeo, mapas de Google Maps, contenido inline o cargado remotamente por ajax admite también ventanas modales. Incluso dispone de una versión en forma de plugin para WordPress.

Su principal desventaja es que no soporta IE6 y tiene soporte parcial en IE7 .

Usted puede optar por incluir sólo las características que usted necesita utilizar la herramienta de construcción en línea o compilando usted mismo con Grunt.js . Tamaño del archivo JS núcleo es de aproximadamente 3 KB + cada módulo pesa unos 0,5 kb (gzip). Sass CSS preprocesador se utiliza para la aplicación de aspectos más fácil, pero no estás obligado a utilizarlo.

Cómo usarlo…?

Necesitaremos incluir sus librías alojadas en Github..

<!-- incluimos el archivo css -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 

<!--incluimos la libreria jQuery 1.7.2 o superior -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!--incluimos el archivo js Magnific Popup -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

Inicializamos el popup

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

Clase para abrir la imagen

<a class="image-link" href="ruta-de-la-imagen.jpg">Abrir popup</a>

Podremos ver mas ejemplos de como integrar videos formularios mapas de google entre otros  desde aqui ..

Fuentes:

Magnific popup

 

Mas Publicaciones

Siguenos




Conviertase en Editor

Te gustaría ser editor en Bloguero-ec.? Escribe tutoriales referente a programación, diseño web, CSS, entre otros y deja tu marca personal en nuestro sitio, contáctanos y empieza a editar Ya..

Compartir..!

© Copyright 2017 Bloguero-ec - Derechos Reservados

A %d blogueros les gusta esto: