How to create responsive image gallery using HTML, CSS, jQuery and Bootstrap? - GeeksforGeeks

22 Dec, 2021
With the advent of new frameworks in web technologies, it has become quite easy to design and implement feature-rich and responsive web pages. Here, we are going to design a responsive image gallery using HTML, CSS, jQuery and Bootstrap.
Features or Functionalities to implement:
Responsive images
Responsive Grid System
Image viewer
Prerequisites: Basic knowledge of HTML, CSS, JavaScript, jQuery, and Bootstrap. Also, the user should be aware of how the grid system in Bootstrap works.
We will divide the complete solution into three different sections in the first section we will create the structure for the gallery. In the second section, we will design the gallery by using CSS. And in the last section will make it available to respond to the user’s interactions.
Creating structure: Initialize HTML layout and responsive images, but we will attach the images by jQuery, in an array format.
HTML Code:<!DOCTYPE html><html><meta charset="utf-8">  <head>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script></head><body>    <br>    <br>    <center>        <h1 class="text text-success">GeeksforGeeks</h1>        <b>Responsive image gallery</b>    </center>    <br>    <br>    <div class="container-fluid">        <center>            <div id=gallery>                                <!-- Content is appended here -->            </div>        </center>          <!-- Modal -->        <div class="modal fade" id="myModal" role="dialog">            <div class="modal-dialog">                  <!-- Modal content-->                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close"                                 data-dismiss="modal">                          ×                        </button>                      </div>                    <div class="modal-body">                    </div>                    <div class="modal-footer">                                               </div>                </div>            </div>      </div>  </div>    </body>  </html>Designing structure: We’ll be adding CSS properties as per the requirement in the project.CSS Code:<style>        img {        border-radius: 8px;    }          .container-fluid {        margin-left: 12px;        margin-right: 12px    }          .contain {        padding-top: 8px;        padding-bottom: 8px;    }</style>Bootstrap code: We will use a bootstrap modal as image viewer and modify it according to our requirements accordingly. We will render all unnecessary components of modal transparent. Remember, we are appending the image in the modal, so we need to use on() method to attach functionalities for such selectors.<style>    /* For overriding box-shadow and other default       effects of modal and it's children */    .modal,    .modal-content,    .modal-header,    .modal-footer {        background-color: transparent;        border: 0px;        color: white;                /* Disable box shadow for different browsers */        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);    }          .modal-dialog {        width: 100%;        height: 50%;        margin-top: 8px;    }          .close {        color: white;        opacity: 0.8;    }          .modal-body {        height: 75%;    }</style>Respond section: In this section we will attach all the images for the responsive gallery, make them responsive to the user. Below is the grid arrangement we’ll be using for displaying images in the image gallery. Since classes used col-sm-6 col-md-2. The logic is 2-grids for medium screen break-point and 6-grids for large breakpoints. They also divide further whenever content overlaps thereby presenting as a single grid.jQuery code: Below is the script for appending in this manner. We’ll be supposing that we are getting the images from the server (as an array of image URLs in JavaScript). Now we will append the image accordingly in the content panel of our page. Below is the implementation for the same<script>                      // Taking Array of Image Addresses       // Suppose it as information from the server      // Modify this for different address      a = ['https://www.geeksforgeeks.org/wp-content/uploads/javascript.png','https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png','https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png','https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'      ];      var x = 0;      for (var i = 0; x < a.length; i++) {          var append = "<div class='row'>";          for (var j = 0; j < 6 && x < a.length; j++) {              append += `      <div class="contain col-sm-6 col-md-2">        <img class="img-responsive" src=` + a[x++] + `>      </div>      `;          }          append += '</div>';          appender(append);      }        // Function to append the data      function appender(x) {          $('#gallery').html(function(i, original_html) {              return (original_html + x);          });      }        // For Image Modal      $(document).on('click', 'img', function() {          imgAddr = $(this).attr('src');          data = "<center><img src=" + imgAddr + " width='50%'>";          $('#myModal').find('.modal-body').html(data);          $('#myModal').modal();      });  </script>Final Solution: This is the combination of the above three-section, this is the complete responsive image gallery code.Code:<!DOCTYPE html><html><meta charset="utf-8">  <head>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script></head><style>        img {        border-radius: 8px;    }          .container-fluid {        margin-left: 12px;        margin-right: 12px    }          .contain {        padding-top: 8px;        padding-bottom: 8px;    }        /* For overriding box-shadow and other default       effects of modal and it's children */    .modal,    .modal-content,    .modal-header,    .modal-footer {        background-color: transparent;        border: 0px;        color: white;                /* Disable box shadow for different browsers */        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);    }          .modal-dialog {        width: 100%;        height: 50%;        margin-top: 8px;    }          .close {        color: white;        opacity: 0.8;    }          .modal-body {        height: 75%;    }</style>  <body>    <br>    <br>    <center>        <h1 class="text text-success">GeeksforGeeks</h1>        <b>Responsive image gallery</b>    </center>    <br>    <br>    <div class="container-fluid">        <center>            <div id=gallery>                                <!-- Content is appended here -->            </div>        </center>          <!-- Modal -->        <div class="modal fade" id="myModal" role="dialog">            <div class="modal-dialog">                  <!-- Modal content-->                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close"                                 data-dismiss="modal">                          ×                        </button>                      </div>                    <div class="modal-body">                    </div>                    <div class="modal-footer">                                               </div>                </div>            </div>      </div>  </div>  <script>                      // Taking Array of Image Addresses       // Suppose it as information from the server      // Modify this for different address      a = ['https://www.geeksforgeeks.org/wp-content/uploads/javascript.png','https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png','https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png','https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'      ];      var x = 0;      for (var i = 0; x < a.length; i++) {          var append = "<div class='row'>";          for (var j = 0; j < 6 && x < a.length; j++) {              append += `      <div class="contain col-sm-6 col-md-2">          <img class="img-responsive" src=` + a[x++] + `>      </div>      `;          }          append += '</div>';          appender(append);      }        // Function to append the data      function appender(x) {          $('#gallery').html(function(i, original_html) {              return (original_html + x);          });      }        // For Image Modal      $(document).on('click', 'img', function() {          imgAddr = $(this).attr('src');          data = "<center><img src=" + imgAddr + " width='50%'>";          $('#myModal').find('.modal-body').html(data);          $('#myModal').modal();      });  </script></body>  </html>Output:Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
<!DOCTYPE html><html><meta charset="utf-8">  <head>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script></head><body>    <br>    <br>    <center>        <h1 class="text text-success">GeeksforGeeks</h1>        <b>Responsive image gallery</b>    </center>    <br>    <br>    <div class="container-fluid">        <center>            <div id=gallery>                                <!-- Content is appended here -->            </div>        </center>          <!-- Modal -->        <div class="modal fade" id="myModal" role="dialog">            <div class="modal-dialog">                  <!-- Modal content-->                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close"                                 data-dismiss="modal">                          ×                        </button>                      </div>                    <div class="modal-body">                    </div>                    <div class="modal-footer">                                               </div>                </div>            </div>      </div>  </div>    </body>  </html>
Designing structure: We’ll be adding CSS properties as per the requirement in the project.
CSS Code:<style>        img {        border-radius: 8px;    }          .container-fluid {        margin-left: 12px;        margin-right: 12px    }          .contain {        padding-top: 8px;        padding-bottom: 8px;    }</style>
<style>        img {        border-radius: 8px;    }          .container-fluid {        margin-left: 12px;        margin-right: 12px    }          .contain {        padding-top: 8px;        padding-bottom: 8px;    }</style>
Bootstrap code: We will use a bootstrap modal as image viewer and modify it according to our requirements accordingly. We will render all unnecessary components of modal transparent. Remember, we are appending the image in the modal, so we need to use on() method to attach functionalities for such selectors.<style>    /* For overriding box-shadow and other default       effects of modal and it's children */    .modal,    .modal-content,    .modal-header,    .modal-footer {        background-color: transparent;        border: 0px;        color: white;                /* Disable box shadow for different browsers */        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);    }          .modal-dialog {        width: 100%;        height: 50%;        margin-top: 8px;    }          .close {        color: white;        opacity: 0.8;    }          .modal-body {        height: 75%;    }</style>
<style>    /* For overriding box-shadow and other default       effects of modal and it's children */    .modal,    .modal-content,    .modal-header,    .modal-footer {        background-color: transparent;        border: 0px;        color: white;                /* Disable box shadow for different browsers */        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);    }          .modal-dialog {        width: 100%;        height: 50%;        margin-top: 8px;    }          .close {        color: white;        opacity: 0.8;    }          .modal-body {        height: 75%;    }</style>
Respond section: In this section we will attach all the images for the responsive gallery, make them responsive to the user. Below is the grid arrangement we’ll be using for displaying images in the image gallery. Since classes used col-sm-6 col-md-2. The logic is 2-grids for medium screen break-point and 6-grids for large breakpoints. They also divide further whenever content overlaps thereby presenting as a single grid.
jQuery code: Below is the script for appending in this manner. We’ll be supposing that we are getting the images from the server (as an array of image URLs in JavaScript). Now we will append the image accordingly in the content panel of our page. Below is the implementation for the same<script>                      // Taking Array of Image Addresses       // Suppose it as information from the server      // Modify this for different address      a = ['https://www.geeksforgeeks.org/wp-content/uploads/javascript.png','https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png','https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png','https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'      ];      var x = 0;      for (var i = 0; x < a.length; i++) {          var append = "<div class='row'>";          for (var j = 0; j < 6 && x < a.length; j++) {              append += `      <div class="contain col-sm-6 col-md-2">        <img class="img-responsive" src=` + a[x++] + `>      </div>      `;          }          append += '</div>';          appender(append);      }        // Function to append the data      function appender(x) {          $('#gallery').html(function(i, original_html) {              return (original_html + x);          });      }        // For Image Modal      $(document).on('click', 'img', function() {          imgAddr = $(this).attr('src');          data = "<center><img src=" + imgAddr + " width='50%'>";          $('#myModal').find('.modal-body').html(data);          $('#myModal').modal();      });  </script>
<script>                      // Taking Array of Image Addresses       // Suppose it as information from the server      // Modify this for different address      a = ['https://www.geeksforgeeks.org/wp-content/uploads/javascript.png','https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png','https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png','https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'      ];      var x = 0;      for (var i = 0; x < a.length; i++) {          var append = "<div class='row'>";          for (var j = 0; j < 6 && x < a.length; j++) {              append += `      <div class="contain col-sm-6 col-md-2">        <img class="img-responsive" src=` + a[x++] + `>      </div>      `;          }          append += '</div>';          appender(append);      }        // Function to append the data      function appender(x) {          $('#gallery').html(function(i, original_html) {              return (original_html + x);          });      }        // For Image Modal      $(document).on('click', 'img', function() {          imgAddr = $(this).attr('src');          data = "<center><img src=" + imgAddr + " width='50%'>";          $('#myModal').find('.modal-body').html(data);          $('#myModal').modal();      });  </script>
Final Solution: This is the combination of the above three-section, this is the complete responsive image gallery code.
Code:<!DOCTYPE html><html><meta charset="utf-8">  <head>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script></head><style>        img {        border-radius: 8px;    }          .container-fluid {        margin-left: 12px;        margin-right: 12px    }          .contain {        padding-top: 8px;        padding-bottom: 8px;    }        /* For overriding box-shadow and other default       effects of modal and it's children */    .modal,    .modal-content,    .modal-header,    .modal-footer {        background-color: transparent;        border: 0px;        color: white;                /* Disable box shadow for different browsers */        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);    }          .modal-dialog {        width: 100%;        height: 50%;        margin-top: 8px;    }          .close {        color: white;        opacity: 0.8;    }          .modal-body {        height: 75%;    }</style>  <body>    <br>    <br>    <center>        <h1 class="text text-success">GeeksforGeeks</h1>        <b>Responsive image gallery</b>    </center>    <br>    <br>    <div class="container-fluid">        <center>            <div id=gallery>                                <!-- Content is appended here -->            </div>        </center>          <!-- Modal -->        <div class="modal fade" id="myModal" role="dialog">            <div class="modal-dialog">                  <!-- Modal content-->                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close"                                 data-dismiss="modal">                          ×                        </button>                      </div>                    <div class="modal-body">                    </div>                    <div class="modal-footer">                                               </div>                </div>            </div>      </div>  </div>  <script>                      // Taking Array of Image Addresses       // Suppose it as information from the server      // Modify this for different address      a = ['https://www.geeksforgeeks.org/wp-content/uploads/javascript.png','https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png','https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png','https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'      ];      var x = 0;      for (var i = 0; x < a.length; i++) {          var append = "<div class='row'>";          for (var j = 0; j < 6 && x < a.length; j++) {              append += `      <div class="contain col-sm-6 col-md-2">          <img class="img-responsive" src=` + a[x++] + `>      </div>      `;          }          append += '</div>';          appender(append);      }        // Function to append the data      function appender(x) {          $('#gallery').html(function(i, original_html) {              return (original_html + x);          });      }        // For Image Modal      $(document).on('click', 'img', function() {          imgAddr = $(this).attr('src');          data = "<center><img src=" + imgAddr + " width='50%'>";          $('#myModal').find('.modal-body').html(data);          $('#myModal').modal();      });  </script></body>  </html>
<!DOCTYPE html><html><meta charset="utf-8">  <head>      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">    </script></head><style>        img {        border-radius: 8px;    }          .container-fluid {        margin-left: 12px;        margin-right: 12px    }          .contain {        padding-top: 8px;        padding-bottom: 8px;    }        /* For overriding box-shadow and other default       effects of modal and it's children */    .modal,    .modal-content,    .modal-header,    .modal-footer {        background-color: transparent;        border: 0px;        color: white;                /* Disable box shadow for different browsers */        -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);        box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);    }          .modal-dialog {        width: 100%;        height: 50%;        margin-top: 8px;    }          .close {        color: white;        opacity: 0.8;    }          .modal-body {        height: 75%;    }</style>  <body>    <br>    <br>    <center>        <h1 class="text text-success">GeeksforGeeks</h1>        <b>Responsive image gallery</b>    </center>    <br>    <br>    <div class="container-fluid">        <center>            <div id=gallery>                                <!-- Content is appended here -->            </div>        </center>          <!-- Modal -->        <div class="modal fade" id="myModal" role="dialog">            <div class="modal-dialog">                  <!-- Modal content-->                <div class="modal-content">                    <div class="modal-header">                        <button type="button" class="close"                                 data-dismiss="modal">                          ×                        </button>                      </div>                    <div class="modal-body">                    </div>                    <div class="modal-footer">                                               </div>                </div>            </div>      </div>  </div>  <script>                      // Taking Array of Image Addresses       // Suppose it as information from the server      // Modify this for different address      a = ['https://www.geeksforgeeks.org/wp-content/uploads/javascript.png','https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png','https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png','https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png','https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'      ];      var x = 0;      for (var i = 0; x < a.length; i++) {          var append = "<div class='row'>";          for (var j = 0; j < 6 && x < a.length; j++) {              append += `      <div class="contain col-sm-6 col-md-2">          <img class="img-responsive" src=` + a[x++] + `>      </div>      `;          }          append += '</div>';          appender(append);      }        // Function to append the data      function appender(x) {          $('#gallery').html(function(i, original_html) {              return (original_html + x);          });      }        // For Image Modal      $(document).on('click', 'img', function() {          imgAddr = $(this).attr('src');          data = "<center><img src=" + imgAddr + " width='50%'>";          $('#myModal').find('.modal-body').html(data);          $('#myModal').modal();      });  </script></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
arorakashish0911
CSS-Misc
HTML-Misc
JavaScript-Misc
Technical Scripter 2019
Bootstrap
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to change the background color of the active nav-item?
How to Use Bootstrap with React?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
How to update Node.js and NPM to next version ?
CSS to put icon inside an input element in a form