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.

Overview

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. Single Image Pupup Jquery Plugin Screenshot


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

After 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,
});
You might also like...

In this project we made a Tv shows webpage where you can like or comment the different shows.

In this project we made a Tv shows webpage where you can like or comment the different shows.

JS Capstone Project In this project we made a Tv shows webpage where you can like or comment the differents shows. Built With HTML CSS JavaScript Lint

Mar 16, 2022

🦉The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave.

🦉The jQuery plugin

🦉 The jQuery plugin "Stick to me" allows you to create exit-popups on your web page, so you can capture visitors just as they are about to leave. How

Feb 10, 2022

Popup without jQuery

popup.js Popup without jQuery Demos https://ohno.github.io/popup.js/ CDN script src="https://cdn.jsdelivr.net/gh/ohno/[email protected]/popup.min.js"/

Mar 24, 2022

This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do

Nov 12, 2022

optimize image & upload file to cloud as image bed with tiny image automic.

optimize image & upload file to cloud as image bed with tiny image automic.

Rush! 图片压缩 & 直传图床工具 这是一个兴趣使然的项目, 希望 Rush! 能让这个世界的网络资源浪费减少一点点 下载 Downloads 获取最新发行版 功能 Features 拖拽批量压缩图片, 支持格式 jpg/png/gif Drop to optimize, jpg/png/gif

Nov 12, 2022

This is a website for you to write what you want to do after or done befor and manage it.

This is a website for you to write what you want to do after or done befor and manage it.

Todo List Website This is a website for you to write what you want to do after or done befor and manage it. LogIn SignUp Main Abilities Able To Run Se

Dec 21, 2022

🎨 Beautify your github profile with this amazing tool, creating the readme your way in a simple and fast way 🚀 The best profile readme generator you will find ⚡

🎨 Beautify your github profile with this amazing tool, creating the readme your way in a simple and fast way 🚀 The best profile readme generator you will find ⚡

Demo Profile Readme Generator The best profile readme generator you will find! About | Technologies | Requirements | Starting | Contributing 🎯 About

Jan 1, 2023

An exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes.

Stupid Database This is an exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes. None of this co

Dec 20, 2022

A Very Good Documentation Site created by the Very Good Ventures Team 🦄

A Very Good Documentation Site created by the Very Good Ventures Team 🦄

Very Good Docs Site Developed with 💙 by Very Good Ventures 🦄 A Very Good Docs Site created by the Very Good Ventures Team. Generated by the Very Goo

Nov 2, 2022
Owner
Rajan Karmaker
Innovative, task-driven professional with 4+ years of experience in web design and development across WordPress platforms.
Rajan Karmaker
On this page, you can save and load all the awesome books you have and save the name and the author into the local storage. this project uses Javascript to interact with the pages

Awesome Books: refactor to use JavaScript classes In this project, We add the links to the applications into the final project Getting Started if you

Cesar Valencia 8 Nov 29, 2022
Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works. You all can share your ides/works here.

Hacktoberfest Submit your Work Hacktoberfest is all about meeting up all brains. In this repository we are planning to come with many ideas and works.

Chinmay Patil 3 Oct 5, 2022
Fork of DevilBro's ShowHiddenChannels plugin for BetterDiscord, works after guideline change.

DefinitelyNotSHC BetterDiscord has set into effect some new plugin guidelines that block plugins like ShowHiddenChannels from being distributed on the

null 54 Dec 21, 2022
Minimalistic configuration for TS to only extend JS with types. No TS features, no bundling. Readable maintainable code after compilation.

ts-guideline Minimalistic configuration for TS to only extend JS with types. No TS-scpecific features, no bundling. Readable maintainable code after c

Georg Oldenburger 41 Dec 22, 2022
Awesome books app is a basic website that allows users to add/remove books from a list. It is a single page app (SPA) which allow switching to different pages of the app without page load. Built with JavaScript.

Awesome Books ES6 In this project, I build a basic website that allows users to add/remove books from a list. using ES6 syntax and make it more organi

Abdulhamid 11 Jul 1, 2022
A simple to do list webpage where you can log the daily tasks you have to do, mark them as checked, modify them, reorder them and remove them. Made using HTML, CSS and JavaScript.

To-Do-List This Webpage is for an app called To-Do-List which helps you add, remove or check tasks you have to do. It is a simple web page which conta

Zeeshan Haider 9 Mar 12, 2022
This project is an Awesome Books web page where users can add or remove books from the site. It also displays a list of the books added to the collection. This Awesome books webpage was created using ES6.

Awesome books App using Module Awesome books App using Module This book list was built using modules and other ES6 syntax. It allows users to add/remo

Esther Udondian 6 Jul 25, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
Show More Less - jQuery - Very useful tiny tool

myOwnLineShowMoreLess Show More Less - jQuery - Very useful tiny tool. Demo Getting Started This is simple plugin developed using jQuery. Prerequisite

Siva 1 Dec 29, 2020
Rename image after pasting, support name pattern and auto renaming.

Obsidian paste image rename This plugin is inspired by Zettlr, Zettlr shows a prompt that allows the user to rename the image, this is a great help if

Xiao Meng 82 Jan 2, 2023