onclick Image Popup jQuery Lightbox Plugin

How to Create Onclick Image Popup Jquery

1. After downloading this project, load the jQuery JavaScript library into your web project.

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

2. Now its time to load plugin assets. So, include the Image Popup’s CSS and JavaScript file in your HTML document.

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

3. Create HTML structure like below:

<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>

4. In last, call the Image Popup plugin (with #imageGallery selector) in jQuery document ready function.

$(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");
    }
});

});

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