如何使用灯箱插件颜色框？

Question

我想在页面加载时在灯箱中显示隐藏div的内容.

我怎么能用彩盒做到这一点？

我不明白的是:

我需要使用他们的CSS文件吗？哪一个,它在哪里？

如何在页面加载时使灯箱亮起？

我试过这个但没有运气:

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

Answer 1

约瑟夫的回答是在正确的轨道上.我还必须在div显示之前使div可见(否则它只显示黑屏).然后我必须在用户关闭灯箱后隐藏div.

注意:我还必须编辑css文件以指向我放置图像的目录.

这是我的最终代码:

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

Answer 2

您需要使用您想要的任何主题的ColorBox css文件.下载中包含5个.请参阅文件夹Example1,Example2,Example3,Example4,Example5.每个人都有一个css文件和一个带图像的文件夹.如果您愿意,您还可以创建自己的自定义主题.

要在页面加载时打开ColorBox,您需要使用公共方法:$ .colorbox()

工作示例:http://jsbin.com/uficu

在那个例子中我有html: <div id="content">Hello from JSBin</div>

公共方法:$ .colorbox({href:'#content',open:true,inline:true})

查看文档:http://colorpowered.com/colorbox/