onclick Image Popup jQuery Lightbox Plugin

onclick Image Popup jQuery Lightbox Plugin
Code Snippet:
Author:
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 18,477
License: MIT
Edit Code online: CodeHim
Read More

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: January 20, 2024
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 510 KB
Dependencies: jQuery 3.0 or Latest version
Last Modified:
MIT
18,477

Code Rating

[site_reviews_summary assigned_to=”post_id”]

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
    },
}); 
[site_reviews assigned_to=”post_id”]

Submit Your Review

[site_reviews_form assign_to=”post_id”]

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...