ライトボックスプラグインカラーボックスの使い方は？

StackOverflow https://stackoverflow.com/questions/1246963

  •  12-09-2019
  •  | 
  •  

質問

ページの読み込み時に、非表示の div の内容をライト ボックスに表示したいと考えています。

どうすればこれを行うことができますか カラーボックス?

理解できないこと:

CSS ファイルを使用する必要がありますか?どっち、どこにあるの？

ページの読み込み時にライトボックスを表示するにはどうすればよいですか?

これを試してみましたが、うまくいきませんでした:

$(document).ready(function(){
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});
役に立ちましたか？

解決

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

他のヒント

必要なテーマの 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/

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

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

ここでトリックです。 JavaScriptを追加（またはカラーボックスクローズイベントをフックする）このためにする必要はありません。

jquery.colorboxはそれを表示する前に、HTML>身体のルートをオフに作成し、それが閉じていたときに、それを後退する構造にあなたのインラインコンテンツを再配置します。それは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を維持することです。

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

いくつかのボタンをクリックemailPopupオン

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

あなたは、そのID

emailPopup_contentusingカラーボックスでいくつかのポップアップを開きたいです 
<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"});
});

説明：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する

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top