Adding jquery – colorbox,thickbox popup on your blog/site with a time delay

Happy New Year, Everybody !!

You may have seen many sites/blogs use a time delayed light weight Jquery popups like colorbox,thickbox and lightbox etc. for capturing leads or promoting something. See a example here -> Facebook Profits ( First we see their normal salepage, but after some seconds they serve a discounted price page with the help of colorbox )

Lets do this here. I hope it will help you.

We are going to setup a content colorbox using a “settimeout” javascript function. For this we need to include two .js files and a .css file in our webpage’s header.

1. jquery core file        2. colorbox widget files

Add following lines before </head> tag of webpage.

<script src="file-path/jquery.js" type="text/javascript"></script>
<script src="file-path/colorbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="file-path/colorbox.css" type="text/css" />

Download these files via following links :

Jquery.js : jQuery JavaScript library
Colorbox : colorbox widget

Colorbox can be used in many different ways like showing any outside URL in a frame box on any trigger of html element. You can find all example in the colorbox download. We are going to supply a url to colorbox main function which will popup a box with the supplied url.

So here is the colorbox function, we will use to pass url… 

$.colorbox({ href:"anyURL", iframe:true, innerWidth:600, innerHeight:400 });

You can notice that there is no Html element “id” with function. This is because we are going to autorun this function after a few seconds. In the case you want to trigger this popup on any click, you should use following function

$(".ElementID").colorbox({ href:"anyURL", iframe:true, innerWidth:600, innerHeight:400 });

Ok now back to autorun, we are going to use setTimeout() function. so here it is our function which will delay for a few seconds to open a colorbox with a url passed to it.

<script>
setTimeout(function(){
$.colorbox({ href:"http://huzzer.com", iframe:true, innerWidth:600, innerHeight:400 });
},20000);
	</script>

This function will delay 20 seconds, i.e. after 20 seconds a popup will appear automatically containing “huzzer.com”. 20000 is for 20000 ms , which is equal to 20 seconds.

You can check it here => Facebook Profits ( First we see their normal salepage, but after some seconds they serve a discounted price page with the help of colorbox )

_________________________________________________________________________

3 Responses to Adding jquery – colorbox,thickbox popup on your blog/site with a time delay

  1. Thank you for the script, I wondered how to do this trick because I was thinking of using something like it to get subscribers to my mailing list. Nevertheless I’m a little puzzled. Don’t you think these popups can be quite annoying? I’m afraid a visitor might get upset and close everything. What do you think in your experience?

  2. Ricky Foyle says:

    If you interact with the page (ie scrolling) before the popup loads it has unpredictable results. Either just a darkened screen appears but no popup or the popup appears partly obscured from view. I tested in Safari and Firefox and it failed to work more often than it worked on both :S

  3. mimo says:

    thanks for this useful tip…

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>