Mostrar Lightbox & Dialog Adaptables con Magnific Popup

Magnific Popup es una librería JavaScript que sirve para crear lightbox & dialog responsivos con una apariencia altamente amigable y muy hermosa a la vista del usuario.

Magnific Popup no se limita a mostrar imágenes, también puede mostrar vídeos, mapas de manera fluida o como lo llamamos responsive design.

Implementar Magnific Popup en nuestro proyecto front-end es sencillo y lo vamos a realizar en este post.

Pueden visitar su repositorio de Magnific Popup en GitHub o visitar su sitio web, para que puedan revisar su documentación y ejemplos de uso.

Esto se puede lograr con Magnific Popup

Esto es solo una probadita del postre.


Ejemplo de Magnific popup

Librerías que utiliza Magnific Popup

Para mostrar Lightbox & Dialog adaptables con Magnific Popup vamos a tener que agregar algunas lineas de código a nuestro Layout.

Primero descargamos los archivos del repositorio GitHub de Magnific-Popup, una vez descargado lo descomprimen, acceden al interior de la carpeta y abren la sub carpeta nombrada dist en el interior encontraran los ficheros que utilizaremos.

Estos son los tres archivos principales que utilizaremos para que funcione correctamente Magnific Popup en nuestro proyecto.

<!-- Magnific Popup archivo CSS principal -->  
<link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">  
<!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  
<!-- Magnific Popup archivo JS principal -->  
<script src="path/magnific-popup/jquery.magnific-popup.min.js"></script>  

Código HTML como agregar Magnific Popup

Este código es un ejemplo de como debe ir ubicado los archivos que conforman el stack para que funcione la librería Magnific Popup.

<!DOCTYPE html>  
<html lang="es">  
<head>  
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
  <title>Mostrar Imágenes Responsivas con Magnific Popup</title>

  <!-- Magnific Popup archivo CSS principal -->
  <link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">

</head>  
<body>  
  <h2>Mostrar Imágenes Responsivas con Magnific Popup</h2>

  <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

  <!-- Magnific Popup archivo JS principal -->
  <script src="path/magnific-popup/jquery.magnific-popup.min.js"></script>

</body>  
</html>  

Código funcional de como implementar la librería Magnific Popup

Recuerden que los archivos JS y CSS se descargaron antes y se guardo en una sub carpeta de nuestro proyecto, al cual accedemos sin problemas.

<!DOCTYPE html>  
<html lang="en">  
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
        <title>Mostrar Imágenes Responsivas con Magnific Popup | Simple Popup</title>

        <!-- Magnific Popup archivo CSS principal -->
        <link rel="stylesheet" href="css/magnific-popup.css">

    </head>
<body>

    <h2>Simple Popup de una sola imagen</h2>

    <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML.">
        <img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
    </a>


    <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <!-- Magnific Popup archivo JS principal -->
    <script src="js/jquery.magnific-popup.min.js"></script>

    <!-- Código JS importante para el correcto funcionamiento Magnific Popup-->
    <script>
        $(document).ready(function() {

            $('.image-popup-vertical-fit').magnificPopup({
                type: 'image',
                closeOnContentClick: true,
                mainClass: 'mfp-img-mobile',
                image: {
                  verticalFit: true
                }        
            });

        });
    </script>

</body>  
</html>  

Puedes ver mas ejemplos del uso de esta magnifica librería en el siguiente enlace a GitHub.

Ver ejemplos - Magnific Popup

Luis Rene Mas Mas's Picture

Luis Rene Mas Mas

Hola, soy desarrollador front-end & dasarrollador móvil (Android), me encanta las tecnologías web - móvil, también administro este blog.

Trujillo - Perú @01luisrene

Únete al Blog

Obtén los últimos artículos publicados directamente en tu bandeja de entrada.

O suscríbase vía RSS con Feedly!

Comparte tu Opinión