onclick Image Popup jQuery Lightbox Plugin

Yet another lightbox plugin for jQuery to create onclick image popup. The “Image Popup” is a lightweight and configurable plugin for jQuery. It allows you to create a basic image popup functionality with multiple customization options. You can set custom size, close button and color of background dim layer for image popup lightbox. It is useful to create a general purpose basic lightbox popup for webpage images

Plugin Overview and Preview

Plugin: Image Popup
Author: AleMay96
Category: Lightbox
Published: November 16, 2019
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 510 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
227 views

Code Rating

0
0.0 rating
0 out of 5 stars (based on 0 reviews)
Excellent0%
Very good0%
Average0%
Poor0%
Terrible0%

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.

Changelog

13/11/2019

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

Advance Configuration Options for jQuery onclick Image Popup

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

Option Default Type Description
overlay “rgba(0, 0, 0, 0.5)” String It define the color of background dim layer.

Example:

$("#imageGallery").imagePopup({
	overlay : "rgba(0, 0, 0, 0.5)",
}); 
imageBorder “5px solid #ffffff” String CSS border property for image popup box.

Example:

$("#imageGallery").imagePopup({
	imageBorder : "5px solid #ffffff",
}); 
borderRadius “5px” String Useful to set the custom value for CSS border radius property.

Example:

$("#imageGallery").imagePopup({
	borderRadius : "5px",
}); 
imageWidth & imageHeight Shown in example. String These options define the size of image popup box.

Example:

$("#imageGallery").imagePopup({
	    imageWidth: "500px",
            imageHeight: "400px",
}); 
closeButton See the example. String Set of properties for close button.

Example:

$("#imageGallery").imagePopup({
	closeButton : {
                src: null,
                width: "30px",
                height:"30px"
            },
}); 
imageCaption See example. String Attributes for image caption.

Example:

$("#imageGallery").imagePopup({
	imageCaption : {
                exist: true,
                color: "#ffffff",
                fontSize: "20px"
            },
}); 

Custom Callback Functions for jQuery onclick Image Popup

This plugin provide two callback functions to execute on popup open and close event. The default value is null. However, You can run your custom functions according to your needs.

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

There are no reviews yet. Be the first one to write one.

Submit Your Review