如何使用lightbox插件colorbox？

我想在頁面加載時在燈箱中顯示隱藏div的內容。如何使用lightbox插件colorbox？

我該怎麼做color box？

我不理解：

我需要使用他們的CSS文件嗎？哪些，它在哪裏？

如何在頁面加載時使燈箱亮起來？

我試過，但沒有運氣：

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

來源

2009-08-07 Greg

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

來源

2009-08-08 16:05:48 Greg

可以放棄的表現，並通過將隱藏div在隱藏div內顯示「#div_id_i_want_to_show」。 – mcassano 2010-10-04 21:46:40

你需要使用從任何你想要的主題顏色框css文件。下載中包含5個。請參閱文件夾Example1，Example2，Example3，Example4，Example5。每個人都會有一個css文件和一個包含圖像的文件夾。如果您願意，您也可以創建自己的自定義主題。

爲了打開彩盒上，你需要使用公共方法頁面加載速度：$ .colorbox（）

工作例如：http://jsbin.com/uficu

在那個例子我的html：<div id="content">Hello from JSBin</div>

而公共方法：$ .colorbox（{HREF： '＃內容'，打開：真正的，內聯：真}）

退房的文檔：http://colorpowered.com/colorbox/

來源

2009-08-08 02:52:45 jyoseph

嘗試打開的選項奧利。

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

來源

2009-11-28 18:30:04 johnnymire

這是一個竅門。沒有必要爲此添加javascript（或掛鉤colorbox關閉事件）。

jquery.colorbox重新定位您的在線內容到結構它創建掉HTML>體根部，顯示它之前，並且在關閉時移回。這是一個奇怪的行爲國際海事組織，但利用並相應地應用你的「隱藏規則」。

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

或者，反轉規則並放置依賴於colorbox定義元素的「顯示規則」。

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

來源

2010-11-22 19:02:34 Shannon

在點擊一些按鈕emailPopup

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

你想開一些彈出一個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

來源

2015-09-29 12:23:01 KNU

如何使用lightbox插件colorbox？

回答

相關問題