Open jQuery Colorbox onLoad

April 7th, 2010 - Posted by Steve Marks to Javascript / jQuery, Web Development.

Open a jQuery colorbox with no user interaction

Update – 26th December 2010 (Credit to azrad)

Since writing this post it seems that ColorBox has been updated meaning the solution below is now longer needed. Simply using the latest version of colorbox will allow you to open the ColorBox onLoad.


I came across a scenario today where I needed to open the jQuery ColorBox as soon as the page loaded. After looking on the ColorBox website it read as follows:

And it can be called directly, without assignment to an element
Example: $.fn.colorbox({href:”thankyou.html”});

After attempting to add the above code to the onload event of the page nothing happened. No ColorBox, no errors, nothing. After a short while spent researching it appears that there is an extra parameter required called ‘open’ that, if set to TRUE, results in the ColorBox opening automatically with no input from the user. The resulting, and functioning, code now looked as follows:

<script type="text/javascript">
	$(document).ready(function() {
		$.fn.colorbox({href:"thankyou.html", open:true});
	});
</script>
This entry was posted on Wednesday, April 7th, 2010 at 8:26 pm by +Steve Marks and is filed under Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (31)
  1. Patrick says:

    Very Helpful. Keep it up. This has kept me still on google for days.

  2. @Syam – Can I assume you’re using PHP on your site? If so you want to add ‘session_start();’ right at the top of your page within PHP tags. Then where you add the onload, put something along the following lines:

    if (!isset($_SESSION['seenPopup']))
    {
    // do onload event here...
    $_SESSION['seenPopup'] = true;
    }

  3. Syam says:

    very nice, but i have a problem the popup always load when i refresh the page or click another links.
    i want it just load once on first web page loaded.
    anyone can help with the session using colorbox onload.
    thanks.

  4. Best VPN says:

    Thank you, Very useful info. Been trying to do this since yesterday :)

  5. Ali Ä°hsan says:

    Chrome also does not work

  6. @kardjo – I definitely definitely definitely wouldn’t mess with the core files. Keep it relative to the theme folder and you can’t go wrong :)

  7. kardjo says:

    Hi,
    since I’m new in jquery colorbox and WordPress…
    I do want to know, is it possible to do this in WP?
    Where should I put this snipped code? into wp-core files or header.php belong to theme folder?

    THank You.

  8. MikeonTV says:

    Thanks so much this worked great

  9. It worked. perfect way of doing the simple process easily.. thanks mate..

  10. Sudeep says:

    thanks man its working like a cream…….. simple code……… no complications …. Thanks

  11. amit says:

    Hey thanks for the help! This was really helpful!

  12. @Salman – Which version of ColorBox are you using? Do you have any code you could show me? Feel free to email me if you require more help. Cheers

  13. Salman says:

    Hi,
    It is not working in IE 8 …. :(
    Could you please help me out of this.

    Thanks
    Salman

  14. @anandan Hi, I’m not entirely sure I understand what you mean?

  15. anandan says:

    Hi how to open the color box in top of the page.. now i am getting in center of the page…
    can you any one help me……

  16. Anonymous says:

    Good

  17. mike says:

    Thank you! You helped me with your code. (Y)

  18. @Pradeep If you have a button within an iFrame in the colorbox you could try something along the lines of:

    <input type=”button” name=”btnClose” value=”Close” onclick=”parent.$.colorbox.close()” />

    Hope that helps

  19. Pradeep says:

    I have a colorbox which contains a iframe with my content.
    My content has a button . onclick of this button i want to close this colorbox.
    how do i achieve this. Please reply me with suggestions or code snippet

  20. Very nice,

    $.fn.colorbox({href:”popup.html”, innerWidth:425, innerHeight:349, title:”insert title”, open:true});

  21. Brett says:

    Great post. Was hoping this was possible. Thanks!

  22. Pete says:

    Thanx dude, ive been searching through false forum stuff all day for this this simply thing.

    Great!

  23. @azrad – You’re right :) Seems to be now that as long as you have the latest version of ColorBox and jQuery 1.3+ it should work. Thanks!

  24. Thank You Steve says:

    I was scratching my head for the last 3 hours trying to make a window.onload function to do this!

    This is awesome!

  25. Martin says:

    Thank you (from Argentina), Martín

  26. azrad says:

    tested with colorbox version 1.3.15 with jquery version 1.4.2,

    no need to have ‘open:true’ anymore, it should automatically open the popup.

    code:
    $(document).ready(function() {
    $.colorbox({ href:”popups.html” });
    });

  27. Mark says:

    Thanks dude! That was useful.

  28. Todd says:

    Very nice – thank you!

  29. Jeff says:

    Thanks!!! You save my day!!

  30. Jess says:

    THANK YOU!! That’s been driving me crazy. You’re my hero!

  31. You sir, rock!

    Been trying to figure this one out.. Thank you.