How to use the lightbox plugin colorbox?

StackOverflow https://stackoverflow.com/questions/1246963

  •  12-09-2019
  •  | 
  •  

Question

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});
});
Was it helpful?

Solution

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();
    });
});

OTHER TIPS

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/

Try the open option Olli. 

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

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'>...

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

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top