Open jQuery Colorbox onLoad
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>
Related Posts
No related posts.
Hi, I'm Steve Marks, the voice (or at least the typist) behind this blog. I'm 24 and currently live in the UK.
Chrome also does not work
@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 :)
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.
Thanks so much this worked great
It worked. perfect way of doing the simple process easily.. thanks mate..
thanks man its working like a cream…….. simple code……… no complications …. Thanks
Hey thanks for the help! This was really helpful!
@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
Hi,
It is not working in IE 8 …. :(
Could you please help me out of this.
Thanks
Salman
@anandan Hi, I’m not entirely sure I understand what you mean?
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……
Good
Thank you! You helped me with your code. (Y)
@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
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
Very nice,
$.fn.colorbox({href:”popup.html”, innerWidth:425, innerHeight:349, title:”insert title”, open:true});
Great post. Was hoping this was possible. Thanks!
Thanx dude, ive been searching through false forum stuff all day for this this simply thing.
Great!
@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!
I was scratching my head for the last 3 hours trying to make a window.onload function to do this!
This is awesome!
Thank you (from Argentina), MartÃn
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” });
});
Thanks dude! That was useful.
Very nice – thank you!
Thanks!!! You save my day!!
THANK YOU!! That’s been driving me crazy. You’re my hero!
You sir, rock!
Been trying to figure this one out.. Thank you.