For the past 6 months at least, I’ve had varied versions of ‘JavaScript embedded into Colorbox’ as a search term that has led to my website and after numerous occasions of useless dead ends on my site, I thought that I’d go ahead and write a post about a very basic way to get this done.
The easiest way to call a Colorbox is with the following code:
$(“idColorboxLink”).colorbox({href:”/link/”, open:true});
Visit the demo page for Colorbox to see other ways to open it.
There are exactly 5 ways that you can place your JavaScript so that your colorbox content will be affected by it.
onOpen (Before Colorbox opens)
onLoad (While Colorbox is opening)
onComplete (Content is displayed in the Colorbox)
onCleanup (While Colorbox is closing)
onClosed (Colorbox is closed)
Then you just enter them into the code as follows:
$(“idColorboxLink”).colorbox({href:”/link/”, onOpen:function(){}, onLoad:function(){}, onComplete:function(){}, onCleanup:function(){}, onClosed:function(){}, open:true});
If you had a function like…fillField, you could just call it like this:
$(“idColorboxLink”).colorbox({href:”/link/”, onComplete:function(){fillField()}, open:true});
This probably could have been much more elaborate, but I’m more a use it to learn it kind of person and I thought that this might at least provide an idea of what to do if nothing else for those who are searching for this.
Have a great day.
Hey looking for someone that can write a js script that will display inline a href within colorbox. I have tried and failed miserably to get it to work. This issue is I can get one to work on a page but more than that, all of them play the same hidden. I can provide the link if someone can write the script which I can run with. Thanks.
What’s the link? I’ll have a look and see what the issue is.
Is it possible to open a colorbox from inside a javascript function? Something like thickbox used to do with tb_show()?
Yes. You can call it with $.fn.colorbox({href:”myurl”, open:true});
hi a.r.,
i am in the process of building a site and like to use colorbox to have a slideshow (i like example2),
here is what i would like to do:
have a folder called colorbox on my server including all files colorbox needs,
built the colorbox index page with all the photos i like to show,
here comes the stuff i cannot figure out:
how can i just click on a text link on any page of my site to call the colorbox index page to load automatically ?
greetings,
harry
You can go ahead and give the text link an id and automatically call it like this:
$(“mytextid”).colorbox();
It’ll open the link you provided in the href. if you want to set it higher in the page and leave # in the href, you can just {“href”:”http://mydomain.com/myurl”} and it should open it too.
Hope that helps. Let me know if you need anything else.
How can I make the colorbox open automatically (on page load) when my homepage is accessed?
I have a colorbox setup on the page at the very bottom when the ‘Contact Us’ link is clicked.
Many thanks in advance!
$(document).ready(function(){
$.fn.colorbox({href:’urlhere’, open:true});
});