jQuery Mobile: Lightbox de fotos

Descripción

Puede utilizar la caja de luz para mantener las imágenes en la ventana emergente. Puede ampliar la imagen haciendo clic en ella.

Ejemplo

El siguiente ejemplo demuestra el uso de la ventana emergente de lightbox de fotos en jQuery Mobile Framework.

<!DOCTYPE html>
<html>
   <head>
      <title>Photo Lightbox</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Header</h2>
         </div>
         
         <div id = "page1" data-role = "main" class = "ui-content">
            <p>You can enlarge the image clicking on it...</p>
            <a href = "#popup_img" data-rel = "popup" data-position-to = "window">
            <img src = "/jquery_mobile/images/nature.jpg" alt = "Nature View" 
               style = "width:200px;"></a>
               
            <div data-role = "popup" id = "popup_img">
               <p>It's an amazing view...</p>
               <a href = "#page1" class = "ui-btn-a ui-icon-delete ui-btn-icon-notext 
                  ui-btn-right">Close</a><img src = "/jquery_mobile/images/nature.jpg" 
                  style = "height:400px;" alt = "Nature View">
            </div>
         </div>
         
         <div data-role = "footer">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html anterior como jqm_photo_lightbox.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/jqm_photo_lightbox.html y se mostrará el siguiente resultado.

↰ Previous page