How to use the lightbox plugin colorbox?

V

5

9

I want to show the contents of a hidden div in a light box when the page loads.

How can I do this with color box?

What I'm not understanding:

Do I need to use their CSS files? Which ones, where is it?

How do I make the lightbox come up when the page loads?

I tried this but no luck:

$(document).ready(function(){
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});

Venerate answered 7/8, 2009 at 20:56 Comment(0)

V

8

jyoseph's answer was on the right track. I also had to make the div visible before it would show up (otherwise it just shows a black screen). and then I had to hide the div after the user closes the light box.

Note: I also had to edit the css file to point to the directory where I put my images.

Here's my final code:

$(document).ready(function(){
    $('#div_id_i_want_to_show').show();
    $.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
    $(document).bind('cbox_closed', function(){
            $('#div_id_i_want_to_show').hide();
    });
});

Venerate answered 8/8, 2009 at 16:5 Comment(1)

You can forgo the showing and hiding by placing the div what you want to show "#div_id_i_want_to_show" inside a hidden div. – Fields 4/10, 2010 at 21:46

S

5

You do need to use the ColorBox css file from whichever theme you want. There are 5 included in the download. See the folders Example1, Example2, Example3, Example4, Example5. Each one will have a css file and a folder with images. You can also create your own custom theme, if you wish.

In order to open ColorBox on the page load you need to use the public method: $.colorbox()

Working example: http://jsbin.com/uficu

In that example I have html: <div id="content">Hello from JSBin</div>

And the public method: $.colorbox({href:'#content', open:true, inline:true})

Check out the documentation: http://colorpowered.com/colorbox/

Seger answered 8/8, 2009 at 2:52 Comment(0)

T

0

Try the open option Olli.

$(".el").colorbox({open:true})

Thun answered 28/11, 2009 at 18:30 Comment(0)

V

0

Here's a trick. It isn't necessary to add javascript (or hook the colorbox close event) for this.

jquery.colorbox relocates your inline content into a structure it creates off the html>body root, before displaying it, and moves it back when it's closed. That's a strange behavior IMO, but take advantage and apply your 'hide rule' accordingly.

<style>
 #div_id_i_want_to_show { display: block; ...your other style rules... }
 #divParent #div_id_i_want_to_show { display: none; }
<style>
<div id='parent'><div id='div_id_i_want_to_show'>...

Alternately, invert the rules and place a 'reveal rule' that depends on a colorbox-defined element.

<style>
 #div_id_i_want_to_show { display: none; ...your other style rules... }
 .colorbox #div_id_i_want_to_show { display: block; }
<style>
<div id='div_id_i_want_to_show'>...

Oh, also, yet another option is to keep your #div_id_i_want_to_show inside a .hiddenDiv wrapper.

<style>
 #div_id_i_want_to_show { ...your style rules... }
 .hiddenDiv { display: none; }
<style>
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...

Vanderhoek answered 22/11, 2010 at 19:2 Comment(0)

M

0

On clicking some button emailPopup

<div class="emailUse">
    <a class="emailPopup" href="#emailPopup_content">Mail Me</a>
</div>

You want to open some popup whose id is emailPopup_contentusing colorbox

<div style='display: none'>
    <div id='emailPopup_content'>
    Hi user,
    Thank you!
    </div>
</div>

All you need to do is write the jQuery as :

$(document).ready(function() {
    $('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"});
});

Explanation: the jQuery hidden div emailPopup_content is shown in the popup as referenced under href

DO NOT forget to include :

<head>
    <link rel="stylesheet" href="colorbox.css">
    <script src="jquery.min.js"></script>
    <script src="jquery.colorbox-min.js"></script>
</head>

http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css

Michael answered 29/9, 2015 at 12:23 Comment(0)

Recommended topics

Hot tags