如何使用灯箱插件colorbox？

Question

如何使用灯箱插件colorbox？

jquerylightboxcolorbox

9

当页面加载时，我希望在灯箱中显示隐藏div的内容。

我该如何使用color box实现这一点？

我不明白的是：

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

我如何使灯箱在页面加载时弹出？

我尝试过这个但没有成功：

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

- Greg

5个回答

5

您需要使用您想要的主题中的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/

- jyoseph

0

点击某个按钮emailPopup

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

您想使用colorbox打开一些弹出窗口，其id为emailPopup_content

<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

- KNU

0

尝试使用开放选项Olli。

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

- johnnymire

0

这是一个诀窍。为此，不需要添加JavaScript（或挂钩colorbox关闭事件）。

jquery.colorbox将您的内联内容重新定位到它创建的结构中，该结构位于html>body根部之后显示内容，并在关闭时将其移回原处。这是一种奇怪的行为，在我看来，但可以利用并相应地应用您的“隐藏规则”。

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

- Shannon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Greg · Accepted Answer

注意：我还必须编辑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();
    });
});