2009-08-07 8 views
9

ページが読み込まれたときに、隠しdivの内容をライトボックスに表示したいとします。ライトボックスプラグインのカラーボックスの使用方法は?

color boxでどうすればいいですか?私は理解していないよ何

が、私は彼らのCSSファイルを使用する必要がありますか?どちらが、どこですか?

ページが読み込まれたときにライトボックスを表示させるにはどうすればよいですか?あなたが欲しい方テーマからカラーボックスのCSSファイルを使用する必要があります

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

答えて

8

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

あなたが置くことによって、表示と非表示を見送ることができますあなたが "#div_id_i_want_to_show"を隠しdivの中に表示したいdiv。 – mcassano

5

は、私は、このしかし、運を試してみました。ダウンロードには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/

0

がオープンオプションオリを試してみてください:

は、ここに私の最終的なコードです。

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

これはトリックです。これには、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'>... 

ああ、また、さらに別のオプションは、.hiddenDivラッパーの内側にあなたの#div_id_i_want_to_showを維持することです。emailPopup

あなたはIDがカラーボックス

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

を使用してemailPopup_contentあるいくつかのポップアップを開きたい

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

いくつかのボタンをクリックすると

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

すべてを行う必要があるようにjQueryを書きます:

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

説明:hrefの

の下に参照されるようにjQueryの隠しのdiv emailPopup_contentがポップアップで表示され含めることを忘れないでください:

<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

関連する問題