1. Tutorials
  2. JavaScript Tutorial
  3. Creating A Simple Image Gallery with Viewer Modal using jQuery and Bootstrap Tutorial

Creating A Simple Image Gallery with Viewer Modal using jQuery and Bootstrap Tutorial

Submitted by oretnom23 on Tuesday, October 19, 2021 - 20:03.

In this tutorial, we will be creating a simple a Image Gallery web application with an image viewer modal.The Image Viewer will also have control button for navigating to the pervious or next image. We will be using Bootstrap for the design of the application and jQuery to dispaly image on the viewer modal and for navigation control functionalities.

Getting Started

In this tutorial, I used Bootstrap v5 for the design of application. And, kindly download also the jQuery Library. After that, compile you CSS and Script assets into a directory.

Here's the Example Images I used for this tutorial code

Download the follwing images if you want use the images. Save the images what I written in the link tag.

Creating the Custom CSS

The following code is the custom Cascading Style Sheet for the design of the gallery images, container, and viewe modal. It also includes the style for the navigator buttons (Next and Previous) of the for the Images Viewer Modal. Save this file as custom.css and In my case this was located inside the CSS directory.

  1.     .img-item .card {
  2.         cursor: pointer;
  3.     }
  4.    
  5.     .img-item .card:hover .img-thumb {
  6.         cursor: pointer;
  7.         transform: scale(1.4);
  8.         filter: brightness(1);
  9.     }
  10.    
  11.     .img-container {
  12.         width: calc(100%);
  13.         height: 40vh;
  14.         overflow: hidden;
  15.     }
  16.    
  17.     .img-thumb {
  18.         width: calc(100%);
  19.         height: calc(100%);
  20.         object-fit: scale-down;
  21.         object-position: center center;
  22.         transition: transform .3s ease-in;
  23.         filter: brightness(0.8);
  24.     }
  25.    
  26.     #img-viewer-container {
  27.         height: 70vh;
  28.         width: calc(100%);
  29.         position: relative
  30.     }
  31.    
  32.     img#img-viewer {
  33.         height: calc(100%);
  34.         width: calc(100%);
  35.         object-fit: scale-down;
  36.         object-position: center center;
  37.     }
  38.    
  39.     .control-prev,
  40.     .control-next {
  41.         cursor: pointer;
  42.         height: 75px;
  43.         width: 75px;
  44.         opacity: .3;
  45.     }
  46.    
  47.     .control-prev:hover,
  48.     .control-next:hover {
  49.         opacity: 1;
  50.         background-color: #00000033;
  51.     }
  52.    
  53.     .control-prev {
  54.         left: 0
  55.     }
  56.    
  57.     .control-next {
  58.         right: 0
  59.     }
  60.    
  61.     .control-next-container {
  62.         right: 0
  63.     }
  64.    
  65.     .control-prev:before {
  66.         content: "";
  67.         height: 50px;
  68.         border-left: 5px solid white;
  69.         position: absolute;
  70.         top: 47%;
  71.         left: 2em;
  72.         transform: rotate(-56deg);
  73.     }
  74.    
  75.     .control-prev:after {
  76.         content: "";
  77.         height: 50px;
  78.         border-left: 5px solid white;
  79.         position: absolute;
  80.         bottom: 47.8%;
  81.         left: 2em;
  82.         transform: rotate(56deg);
  83.     }
  84.    
  85.     .control-next:before {
  86.         content: "";
  87.         height: 50px;
  88.         border-left: 5px solid white;
  89.         position: absolute;
  90.         top: 47%;
  91.         right: 2em;
  92.         transform: rotate(56deg);
  93.     }
  94.    
  95.     .control-next:after {
  96.         content: "";
  97.         height: 50px;
  98.         border-left: 5px solid white;
  99.         position: absolute;
  100.         bottom: 47.8%;
  101.         right: 2em;
  102.         transform: rotate(-56deg);
  103.     }

Creating the Interface

The script below is the HTML code of our simple gallery application. This contains the gallery card interface of the application. Save this file as index.html.

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.         <title>Image Gallery</title>
  9.         <link rel="stylesheet" href="./css/bootstrap.min.css">
  10.         <link rel="stylesheet" href="./css/jquery-ui.css">
  11.         <!-- Custom CSS -->
  12.         <link rel="stylesheet" href="./css/custom.css">
  13.         <script src="./js/jquery-3.6.0.min.js"></script>
  14.         <script src="./js/jquery-ui.js"></script>
  15.         <script src="./js/bootstrap.min.js"></script>
  16.         <script src="./js/script.js"></script>
  17.     </head>
  18.  
  19.     <body class="bg-light">
  20.         <nav class="navbar navbar-expand-lg navbar-dark bg-primary bg-gradient" id="topNavBar">
  21.             <div class="container">
  22.                 <a class="navbar-brand" href="https://sourcecodester.com">
  23.                 Sourcecodester
  24.                 </a>
  25.             </div>
  26.         </nav>
  27.         <div class="container py-3" id="page-container">
  28.             <small>How to create an Image View with Controls ( <b>Next</b> and <b>Previous</b> )</small>
  29.             <hr>
  30.             <h3><b>Gallery</b></h3>
  31.             <div class="col-12">
  32.                 <div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 row-cols-xl-4 gx-4 gy-4">
  33.                     <div class="col img-item">
  34.                         <div class="card rounded-0">
  35.                             <div class="img-container">
  36.                                 <img src="./images/1.png" alt="Image" class="img-top bg-dark bg-gradient img-thumb">
  37.                             </div>
  38.                         </div>
  39.                     </div>
  40.                     <div class="col img-item">
  41.                         <div class="card rounded-0">
  42.                             <div class="img-container">
  43.                                 <img src="./images/2.png" alt="Image" class="img-top bg-dark bg-gradient img-thumb">
  44.                             </div>
  45.                         </div>
  46.                     </div>
  47.                     <div class="col img-item">
  48.                         <div class="card rounded-0">
  49.                             <div class="img-container">
  50.                                 <img src="./images/3.jpg" alt="Image" class="img-top bg-dark bg-gradient img-thumb">
  51.                             </div>
  52.                         </div>
  53.                     </div>
  54.                     <div class="col img-item">
  55.                         <div class="card rounded-0">
  56.                             <div class="img-container">
  57.                                 <img src="./images/4.png" alt="Image" class="img-top bg-dark bg-gradient img-thumb">
  58.                             </div>
  59.                         </div>
  60.                     </div>
  61.                     <div class="col img-item">
  62.                         <div class="card rounded-0">
  63.                             <div class="img-container">
  64.                                 <img src="./images/5.png" alt="Image" class="img-top bg-dark bg-gradient img-thumb">
  65.                             </div>
  66.                         </div>
  67.                     </div>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.  
  72.         <!-- Confirmation Modal -->
  73.         <div class="modal fade" id="imageViewerModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="imageViewerModalLabel" aria-hidden="true">
  74.             <div class="modal-dialog modal-lg modal-dialog-centered rounded-0">
  75.                 <div class="modal-content rounded-0">
  76.                     <div class="modal-header py-1">
  77.                         <h5 class="modal-title" id="imageViewerModalLabel">Viewer</h5>
  78.                         <button type="button" style="font-size: .65em;" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  79.                     </div>
  80.                     <div class="modal-body rounded-0">
  81.                         <div id="img-viewer-container" class="d-flex">
  82.                             <div class="h-100 d-flex align-items-center position-absolute control-prev-container">
  83.                                 <div class="control-prev"></div>
  84.                             </div>
  85.                             <img src="" alt="Viewer" id="img-viewer" class="bg-dark bg-gradient">
  86.                             <div class="h-100 d-flex align-items-center position-absolute control-next-container">
  87.                                 <div class="control-next"></div>
  88.                             </div>
  89.                         </div>
  90.                     </div>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.         <!-- End of Confirmation Modal -->
  95.     </body>
  96.  
  97.     </html>

Creating the Custom Javascript

The following script is the custom JavaScript using jQuery which contains the functions for viewing the images in a modal and also the control navigation function for changing the image on the image viewer display. Save this file as script.js. In my case, this file is locaed inside the JS directory.

  1.     var viewer_modal;
  2.     $(function() {
  3.         viewer_modal = $('#imageViewerModal')
  4.         $('.img-item').click(function() {
  5.             viewer_modal.find('#img-viewer').attr('src', $(this).find('.img-thumb').attr('src'))
  6.             viewer_modal.modal('show')
  7.         })
  8.         viewer_modal.on('hidden.bs.modal', function() {
  9.             viewer_modal.find('#img-viewer').attr('src', '')
  10.         })
  11.         $('.control-next').click(function() {
  12.             var cur_img = viewer_modal.find('#img-viewer').attr('src');
  13.             var index = $('.img-thumb[src="' + cur_img + '"]').closest('.img-item').index() + 1;
  14.             var next_index = index > ($('.img-thumb').length - 1) ? 0 : index;
  15.             viewer_modal.find('#img-viewer').attr('src', $('.img-thumb').eq(next_index).attr('src'))
  16.         })
  17.         $('.control-prev').click(function() {
  18.             var cur_img = viewer_modal.find('#img-viewer').attr('src');
  19.             var index = $('.img-thumb[src="' + cur_img + '"]').closest('.img-item').index() - 1;
  20.             var prev_index = index < 0 ? ($('.img-thumb').length - 1) : index;
  21.             viewer_modal.find('#img-viewer').attr('src', $('.img-thumb').eq(prev_index).attr('src'))
  22.         })
  23.     })

There you go. You can now test the source code on your browser by browsing the index.html. If ever you have encountered any error, kindly review your code and differentiate it from the codes I provided above. You can also download the working source code I created or this tutorial. The download button is located below this article

DEMO VIDEO

that's the end of this tutorial. I hope this Simple Image Gallery Web App Tutorial Code will help you and you'll find it useful for your future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Tags
HTML
css
jQuery
Bootstrap
Javascript
Image Viewer
image slider

Comments

Add new comment

About text formats