How to call jQuery colorbox with javascript onClick event instead of a link?

Question

I want to call colorbox using javascript rather than a href link?

anyone know how I can do this?

thanks.

score 19 · Answer 1 · edited Mar 06 '13 at 15:48

19

The previous examples didn't work for me, but using the same idea, this does work:

<script>
function lightbox(){    
  $.colorbox({width:"80%", height:"80%", iframe:true, href:"/pagetoopen.html"});
}
</script>

<input type="button" value="open the box" onClick="lightbox()"/>

edited Mar 06 '13 at 15:48

Jack

9,150
3
26
33

answered Jun 14 '11 at 13:46

Memohotel Trip Organizer

191
1
2

score 5 · Answer 2 · edited Mar 06 '13 at 15:49

5

This is off the top of my head. But I believe you could do something like this:

<script type="text/javascript">
function call_cbox()
{
   jQuery.colorbox({html:'<p>Hi There I was instantiated onclick!</p>'});
}
</script>
<a href="#" onclick="call_cbox(); return false;">Give me a colorbox... NOW! And don't forget the color.</a>

edited Mar 06 '13 at 15:49

Jack

9,150
3
26
33

answered Dec 10 '10 at 04:41

jeremysawesome

6,457
3
32
35

score 2 · Answer 3 · answered Jan 12 '12 at 18:25

2

A mix of the two answers above worked for me:

<script>
function call_cbox()
{
jQuery().colorbox({width:"900px", height:"600px", iframe:true, href:"/newsletter.html"});
}
</script>

answered Jan 12 '12 at 18:25

Adam Luz

29
1

It seems that this isn't working for me anymore. I don't know if it was from a Colorbox update or a jquery update. – Keith Feb 19 '13 at 20:31

score 0 · Answer 4 · answered Feb 07 '13 at 15:01

0

$("tr").click(function () { 

    $.colorbox({width:"900px", height:"600px", iframe:true, href:"http://www.google.com"});

});

answered Feb 07 '13 at 15:01

nixis

492
5
10

How to call jQuery colorbox with javascript onClick event instead of a link?

4 Answers4