Jquery Image Popup on page load simple plugin.

Home » Tech » Jquery Image Popup on page load simple plugin.

Jquery Image Popup on page load simple plugin.

Posted by Nimeshka Srimal Saturday, March 1, 2014 6 comments

An image popup sometimes become a very important element / feature to a website. We usually use popup images as banners to notify something important to our visitors. In the recent time I came through many occasions where I had to use this kind of an image popup when the page loads. There are many Jquery Image popup plugins available now. But the major disadvantage is that sometimes they are going beyond the expectations. I mean most of the Jquery plugins for popups are large in size or much advanced when compared to the simple requirement sometimes we need, which is just to insert a popup image in the webpage when the page loads.

Today I wanted to insert another image popup to a website, and the website was already using Jquery. But my concern was that I had a very limited time to implement this on the website, and since this website was having very big traffic, I did not want the plugin to be too big. Besides, this was only a temporary one. So I looked for a nice, yet simple and a light weight Jquery Plugin.

While searching, I found this simple plugin called 'Colorbox'. It matched my requirement exactly, and it was very light. No round ways like in other plugins and you get the ability to use it straight.

You can Download the Plugin and the other necessary files through link :

popup.zip - Download Jquery Image Popup Plugin.

This folder contains all the css, images and the javascript files.

How to Use this Jquery Image Popup Plugin?

It is simple. Once downloaded, extract the contents inside the zip archive into a folder in your website root. We'll call this folder as "popup".

Now your website structure would look like,

Document Root (public_html)
|--- popup (our new folder)
|---   your_other_folders
|---   ...
|---   index.html

Now open your desired file (which you need to insert the image popup) and put the following code in between your <head> </head> tag.

<link href="popup/colorbox.css" rel="stylesheet"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="popup/jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.fn.colorbox({href:"popup/popup_image.jpg", open:true});
});
</script>

That's It....If you want to make the popup to appear a few seconds after the page is loaded, you can change the script to below;

<script type="text/javascript">
$(document).ready(function(){
   setTimeout(function() {
       $.fn.colorbox({href:"popup/popup_image.jpg", open:true});
   }, 1500);
});</script>

Where 1500 represents the delay in miliseconds.

Hope you enjoyed my article. Please do not forget to leave a comment if this was helpful to you. :)

Incoming Terms :
jquery image popup
jquery popup image
jquery simple popup
jquery open popup
jquery popup window
jquery popup