OnClick Image Popup jQuery Lightbox Plugin

If you set up multiple small sets of images and looking for a solution to add a lightbox then OnClick Image Popup is the best jQuery plugin for you. The plugin is lightweight and works well within the responsive design. You can easily implement it on your exciting responsive site design.

Hence, It is a good thing to implement a lightbox on smaller images so that you can save the webpage and improve the loading time of the website. Similarly, When users click on a smaller picture they can see a bigger version of that photo without the bad quality of the photo.

Therefore, this lightbox popup image works well with photo galleries. So we can call it Gallery Images Lightbox modal box. Hence, if you already have a gallery then on your webpage then you can still implement this plugin. It gives you simple image popup functionality with different customization options.

How to Use OnClick Image Popup jQuery Lightbox

The implementation is very simple and can start by adding the main jquery file into the header. You can load the JQuery Javascript library into the webpage as follow:

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

After that, we will load the plugin assets and it includes a stylesheet and popup file into the web project just like given below.

<!-- Image Popup CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Image Popup JS -->
<script src="js/jquery.image-popup.js"></script>

We are in a position to create the HTML content for the gallery so we can apply the popup on the images. So we will create the gallery by defining the ul and li unorder item list. Then we will place an image instead of each of the li.

<ul id="imageGallery">
    <li>
    <a><img src="img/img1.jpg" alt="Sample Image 1"></a>
    </li>
        <li>
    <a><img src="img/img2.jpg" alt="Sample Image 2"></a>
    </li>
        <li>
    <a><img src="img/img3.jpg" alt="Sample Image 3"></a>
    </li>
        <li>
    <a><img src="img/img4.jpg" alt="Sample Image 4"></a>
    </li>
        <li>
    <a><img src="img/img5.jpg" alt="Sample Image 5"></a>
    </li>
</ul>

In order to make work the image popup lightbox on each image, we will start our Javascript code by defining the jQuery document ready function. Then we will call the #imageGallery to activate the overly on all the images inside in it.

$(document).ready(function(){
	$("#imageGallery").imagePopup({
    //overlay: "rgba(0, 100, 0, 0.5)"

    closeButton:{
        src: "images/close.png",
        width: "40px",
        height:"40px"
    },
    imageBorder: "15px solid #ffffff",
    borderRadius: "10px",
    imageWidth: "500px",
    imageHeight: "400px",
    imageCaption: {
        exist: true,
        color: "#ffffff",
        fontSize: "40px"
    },
    open: function(){
        console.log("opened");
    },
    close: function(){
        console.log("closed");
    }
});

});

by changing the values in the CSS and javascript function you can easily customize the lightbox. You can set the custom size, close button, and set background dim color.

For more advanced usage, please check the Configurations Options tab. If you like this plugin, don’t forget to rate it.

Changelog

13/11/2019

• Updated jquery.image-popup.js
• Initial release.

Advance Configuration Options for Image Lightbox

The following are some advanced configuration options to create/customize the image popup lightbox.

Custom Callback Functions for jQuery onclick Image Popup

There are two callback functions that help you to execute popup open and close events The default value is null. However, you can run your own custom function according to your functionality needs.

$("#imageGallery").imagePopup({
	open: function(){
        //do something
    },
    close: function(){
        //do something
    },
});