singleimagepopup
v1.0.0
Published
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.
Readme
Jquery-SingleImagePopup
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.
If you want to see, click the DEMO.
Or you can see the screenshot below.
Getting Started
Before you get started I want to mention, no complex thing to do. Just a few simple steps to do. Follow the following steps and you are ready to go.
Step #1
Just download the repo or clone it from this command below :
git clone https://github.com/rajankarmakar/jquery-singleimagepopup.gitAfter downloading the zip file, just unzip it into your desire location.
Step #2
Place this block of code before closing the </head> tag into your desire HTML file.
<link rel="stylesheet" href="assets/css/singleimagepopup.min.css" />Into the <body> tag place the code below.
<div id="singleimagepopup"></div>And finally, before closing the </body> tag place this block of code as well.
<script src="assets/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="assets/js/jquery.singleimagepopup.min.js"></script>
<script>
$(document).ready(function () {
$("#singleimagepopup").singleImagePopup();
});
</script>The final code should look something like the below.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="assets/css/singleimagepopup.min.css" />
</head>
<body>
<div id="singleimagepopup"></div>
<script src="assets/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="assets/js/jquery.singleimagepopup.min.js"></script>
<script>
$(document).ready(function () {
$("#singleimagepopup").singleImagePopup();
});
</script>
</body>
</html>And you are done, awesome. Just visit the page, you should see the popup after the page load.
Default options
$("#singleimagepopup").singleImagePopup({
width: "560px",
height: "400px",
imageUrl: "/assets/images/sample.jpg",
stop: false,
});These are the default options of the plugins.
# Change Image
If you want to change the image, which you will do just change the imageUrl value as you want. Please see the example below.
$("#singleimagepopup").singleImagePopup({
imageUrl: "https://unsplash.com/photos/hzHQR0mHKQg/download?force=true&w=640",
});# Change Image Width
If you want to change the image width just change the width value as you want. Please see the example below.
$("#singleimagepopup").singleImagePopup({
width: "560px",
});# Change Image Height
If you want to change the image height just change the height value as you want. Please see the example below.
$("#singleimagepopup").singleImagePopup({
height: "400px",
});# Stop Popup
If you want to stop the Popup, just a single line of code. Please see the example below.
$("#singleimagepopup").singleImagePopup({
stop: true,
});