How To Make Responsive Image LightBox Gallery In Blogger

How To Make Responsive Image LightBox Gallery In Blogger

W

elcome to SoiPro. In this post, we will know how to make a responsive image lightbox gallery in blogger, lightbox image gallery with thumbnails, and lightbox image viewer. Just follow our steps carefully to avoid any errors. But first, Let’s talk about it a little.

An image lightbox gallery is a great way to show off your pictures. When clicked, the image highlights and expands on its page. This creates a unique experience for your viewers. And, since it’s an interactive component, it will keep them on your site longer.

Whether you want to showcase some of your best work or share memories with family and friends, this article will teach you how to create an image lightbox gallery in just five minutes!

What Is A Image LightBox Gallery?

An image lightbox gallery is a type of image gallery that displays a set of images on a web page one by one. The name “lightbox” comes from the image that pops up as if it was contained in a box and lights up.

The idea behind this type of gallery is to give viewers an immersive experience when looking through your photos. Lightboxes are great for displaying images in a sleek and easy-to-browse format.

They’re also the perfect option for when you’re dealing with large numbers of photos that need to be displayed in sequence. And if you’re looking for a solution that’s not too taxing on your site’s loading time, Image lightbox galleries are the way to go!

These galleries load quickly and allow your visitors to focus on one photo at a time without waiting for the entire page to load.

Benefits Of Using A Image LightBox Gallery

One of the main advantages of using a lightbox gallery is that users can click on the image and enlarge it in a separate window. This is useful for displaying high-resolution photos or videos.

In addition, it allows you to control the video from within the lightbox, so users can pause or adjust settings without having to open a new tab.

Lightboxes also make it easier for your users to share your content because they don’t have to leave your site and go elsewhere to do so. They can easily share the page by clicking on the social media icons at the top or bottom of the lightbox.

View Demo

How To Make A Image LightBox Gallery?

To make an image lightbox gallery on your blogger site, you need to add HTML, CSS, and JavaScript (JQuery) codes for it. These codes have to be added in 3 steps. We will add HTML code in the 1st step, CSS in 2nd, and JavaScript in the last step.

Step 1 - Adding HTML (Image Slideshow Lightbox)

Change The highlighted HTML according to your requirement, For Example:- Image URL, And don't forget to paste your image URL twice. For reference, you can check every image name: "unPlug Responsive Image LightBox Gallery In Blogger1", "unPlug Responsive Image LightBox Gallery In Blogger2",.....

<div class="container">
   <div class="col-sm-4">
      <div class="caption">
         <a data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavmYIdYfzDTz0VKo2K9S5jJ1DK2yrXMC2VhrEL_i1Cnwnce_VL9khJ_S7-unKnqCiumQtjJpF2ql_l4_9zAh8GEJw8hFxHmtYSv5W3eYjesLHctGdCYvlenOJV8pDa2UmjfJj4hNBUWs2vqHayMJ35bhmDKi8bj2G6f7B3X3tJwKxwl_Kw2KNEusZ3w/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger2.png">
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhavmYIdYfzDTz0VKo2K9S5jJ1DK2yrXMC2VhrEL_i1Cnwnce_VL9khJ_S7-unKnqCiumQtjJpF2ql_l4_9zAh8GEJw8hFxHmtYSv5W3eYjesLHctGdCYvlenOJV8pDa2UmjfJj4hNBUWs2vqHayMJ35bhmDKi8bj2G6f7B3X3tJwKxwl_Kw2KNEusZ3w/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger2.png" width="100%">
         </a>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="caption">
         <a data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg13G55bFAKJtry5y3JtNc3FMN34rmP_45Abk_TeLB_rvNfHwTgXz0BmS0H8q_18aQsU-r5A_8hDR5Qx_-XsrjJ_8iZqcrrzqeFzJUeqgCwypLWu1uN36q_n13fCvWouhmfCxoIHZuTCIteuHVEjGdBHFig_Ss7rUsrj7QO47MmHoSxa67NuPLNQNaj_Q/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger3.png">
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg13G55bFAKJtry5y3JtNc3FMN34rmP_45Abk_TeLB_rvNfHwTgXz0BmS0H8q_18aQsU-r5A_8hDR5Qx_-XsrjJ_8iZqcrrzqeFzJUeqgCwypLWu1uN36q_n13fCvWouhmfCxoIHZuTCIteuHVEjGdBHFig_Ss7rUsrj7QO47MmHoSxa67NuPLNQNaj_Q/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger3.png" width="100%"></a>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="caption">
         <a data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN08CPQeMzQdkBr_7KcmdMAYr-MgOyt6qMSETMjTQR_kFVwMrsrCk4MSLDptKU4lj3-y-Sr_tLCJxO-Xvk06zQPYDvV2ol5urwAcCGyNW0ogoOM9jKMvepzT5OAH615H0SfDqIWdzdnqwRzvKy3YTICekXHDq3pTvmaX9MbbLi6ZzmVjEL3Stw59t3A/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger.png">
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtN08CPQeMzQdkBr_7KcmdMAYr-MgOyt6qMSETMjTQR_kFVwMrsrCk4MSLDptKU4lj3-y-Sr_tLCJxO-Xvk06zQPYDvV2ol5urwAcCGyNW0ogoOM9jKMvepzT5OAH615H0SfDqIWdzdnqwRzvKy3YTICekXHDq3pTvmaX9MbbLi6ZzmVjEL3Stw59t3A/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger.png" width="100%"></a>
      </div>
   </div>
</div>
<div class="container">
   <div class="col-sm-4">
      <div class="caption">
         <a data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-d3iT4t8GS-4l3giYvqW6L73yHwNWgAfHNS90JFh48b9zjc82UnNPQKzXNeDh-674PncNjM7x69CT4_7banZg3_MhD1gXxdpw3ut8fE1QXNXFioXYJxeFfRcA5LguzThVVVZ70JcgqmH9Te5PE9Oc-HtCDYLoJkU9NSYWJBY4h5Lh4BALlIvjXpMYw/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger4.png">
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_-d3iT4t8GS-4l3giYvqW6L73yHwNWgAfHNS90JFh48b9zjc82UnNPQKzXNeDh-674PncNjM7x69CT4_7banZg3_MhD1gXxdpw3ut8fE1QXNXFioXYJxeFfRcA5LguzThVVVZ70JcgqmH9Te5PE9Oc-HtCDYLoJkU9NSYWJBY4h5Lh4BALlIvjXpMYw/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger4.png" width="100%">
         </a>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="caption">
         <a data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAgP3rE5nomqiqpdiOQ7ktqOR8X5lo5qKs37Tr9V7UwVg1eItL_7LnYF5zqZuxRlXnQL-jUgoxXZcxhrgiycgIQpqAsJZFKpIEEv83BJ5t3w36xZl2ZrzA8ZaZfdhq_T9ioZjHvsLYdNga4mcYkkdtK8Oq-Cht32f7bU8kJNt_W5CNujl8Czjx9qVzBw/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger5.png">
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAgP3rE5nomqiqpdiOQ7ktqOR8X5lo5qKs37Tr9V7UwVg1eItL_7LnYF5zqZuxRlXnQL-jUgoxXZcxhrgiycgIQpqAsJZFKpIEEv83BJ5t3w36xZl2ZrzA8ZaZfdhq_T9ioZjHvsLYdNga4mcYkkdtK8Oq-Cht32f7bU8kJNt_W5CNujl8Czjx9qVzBw/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger5.png" width="100%"></a>
      </div>
   </div>
   <div class="col-sm-4">
      <div class="caption">
         <a data-fancybox="gallery" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuTchLzjyHMCIllI_j_QnCcwIrs_MMCikwJYsiUEd8CUrdDdQBT_gz29SxQucfkOpTBS9WPFhs7alZhVUHCaxoPIixyjYID4luuMKsxjy7QJ_PWKXrl4R4Gr1X5j-DshMZ6zno6UkHmilTwrIzUSHZvqHIW_nlyzRPsZzNrly6L3grLuZ4zbicRFDhfw/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger6.png">
         <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuTchLzjyHMCIllI_j_QnCcwIrs_MMCikwJYsiUEd8CUrdDdQBT_gz29SxQucfkOpTBS9WPFhs7alZhVUHCaxoPIixyjYID4luuMKsxjy7QJ_PWKXrl4R4Gr1X5j-DshMZ6zno6UkHmilTwrIzUSHZvqHIW_nlyzRPsZzNrly6L3grLuZ4zbicRFDhfw/s0/unPlug%20Responsive%20Image%20LightBox%20Gallery%20In%20Blogger6.png" width="100%"></a>
      </div>
   </div>
</div>

Step 2 - Adding CSS (Image LightBox CSS)

These CSS Codes are in Compressed format if you want to beautify you can use our tool by Following this Link - CSS Beautifier Tool

If you use the Imagz + Landing Page blogger template, add this highlighted CSS; Otherwise, leave it.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<style type="text/css">
.onPst .blogPts{max-width:1040px;}.container{display:flex;}.caption{padding:20px;text-align:center;margin-bottom:20px;}.caption a{text-decoration:none;color:#000;}.caption a:hover{text-decoration:none;color:#000;}
</style>

Step 3 - Adding JavaScript (Simple Image LightBox Jquery)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<script type="text/javascript">
  $("a.grouped_elements").fancybox();
</script>

Conclusion

So far, we have seen how you can add an image lightbox gallery to your blogger. This can prove a fantastic design if you want to show high-quality images to your user.

We hope that this post helped you to make an image lightbox gallery on your blogger website. Do let us know if you have any other questions regarding the image lightbox. You can get in touch with us via comment form or fb.