如何使用灯箱插件彩盒？答案

【问题标题】：How to use the lightbox plugin colorbox?如何使用灯箱插件彩盒？
【发布时间】：2009-08-07 20:56:30
【问题描述】：

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

如何使用color box 做到这一点？

我不明白的：

我需要使用他们的 CSS 文件吗？哪些，在哪里？

如何在页面加载时让灯箱出现？

我试过了，但没有运气：

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

【问题讨论】：

标签： jquery lightbox colorbox

【解决方案1】：

jyoseph 的回答是正确的。我还必须让 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();
    });
});

【讨论】：

您可以通过将要显示的内容“#div_id_i_want_to_show”放在隐藏的 div 中来放弃显示和隐藏。

【解决方案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/

【讨论】：

【解决方案3】：

尝试打开选项 Olli。

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

【讨论】：

【解决方案4】：

这是一个技巧。不需要为此添加 javascript（或挂钩颜色框关闭事件）。

jquery.colorbox 在显示之前将您的内联内容重新定位到它从 html>body 根创建的结构中，并在它关闭时将其移回。这是 IMO 的一种奇怪行为，但请利用并相应地应用您的“隐藏规则”。

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

或者，反转规则并放置一个依赖于颜色框定义元素的“显示规则”。

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

哦，还有一个选择是将您的 #div_id_i_want_to_show 保存在 .hiddenDiv 包装器中。

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

【讨论】：

【解决方案5】：

点击某个按钮emailPopup

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

您想打开一些 id 为 emailPopup_contentusing colorbox 的弹出窗口

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

你需要做的就是把 jQuery 写成：

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

说明：jQuery 隐藏的 div emailPopup_content 显示在弹出窗口中，如 href 下引用的那样

不要忘记包括：

<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

【讨论】：