jQuery Mobile - Photo Lightbox

Description

You can use the lightbox for keeping the images in the popup. You can enlarge the image by clicking it.

Example

Following example demonstrates the use of photo lightbox popup in the jQuery Mobile Framework.

Live Demo 
<!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>

Output

Let's carry out the following steps to see how the above code works −

  • Save the above html code as jqm_photo_lightbox.html file in your server root folder.

  • Open this HTML file as http://localhost/jqm_photo_lightbox.html and the following output will be displayed.

jquery_mobile_widgets.htm
Advertisements