jquery.colorbox.jsを使用。height=150></a>(注)コメントのデモ番号をクリックすると該当のデモを見ることができます。});</script></head><body>$(".single");Aタグのクラスセレクター。".single"のsingleは、表示したい画像などコンテンツのAタグのクラス名。書き方は、".single"または"a.single"。height;外枠とボタンなどを含んだ表示画面の縦の最大のサイズ。書き方は、"95%"、"500px"または600。例では、画像表示の縦の最大サイズをウィンドーサイズの95%にしたい。height=150></a>class;Aタグのクラス名。対応するjQuery設定のクラスセレクターのクラス名に合わせる。href;表示する画像などのコンテンツのURL。"content/takao-tengu.jpg"。title;表示する画像などのコンテンツのタイトル(キャプション)。画像クリックでデモを見ることができます。});</script></head><body>$(".group1")/$(".group2")/$(".group3");Aタグのクラスセレクター。".group1"のgroup1は、表示したい複数の画像などコンテンツのAタグのクラス名。ここでは、3つの画像グループの例を示している。rel;同じグループにしたい画像のAタグのクラス名。一般には、クラスセレクターとrelの値は同じ名前ー$(".group1").colorbox({rel:'group1'});。3枚の画像を1つのグループにしたとき、そのグループの3枚の画像のAタグのクラス名は同じにする。ように書くと、表示バリエーションの違った画像をグループ化できる。transition;画像切り替え時の移り変わり(遷移)の方法(効果)。none:効果なしwidth;表示画面の外枠およびボタンを含む横のサイズ。hight;表示画面の外枠およびボタンを含む縦のサイズ。height=150></a>class;Aタグのクラス名。対応するjQuery設定のクラスセレクターのクラス名に合わせる。複数のAタグのクラス名を同じにして画像グループを作る。href;表示する画像などのコンテンツのURL。"content/girl1.jpg"。title;表示する画像などのコンテンツのタイトル(キャプション)。画像クリックでデモを見ることができます。上から列順に、グループ1、グループ2、グループ3。});</script></head><body>$(".group4");Aタグのクラスセレクター。".group4"のgroup4は、表示したい複数の画像などコンテンツのAタグのクラス名。rel;同じグループにしたい画像のAタグのクラス名。一般には、クラスセレクターとrelの値は同じ名前ー$(".group1").colorbox({rel:'group1'});。ここでは、画像グループのスライドショーの例を示している。7枚の画像を1つのグループにしたとき、そのグループの7枚の画像のAタグのクラス名は同じにする。slideshow;画像などコンテンツグループの自動スライドショー。faiseまたはデフォルト:自動スライドショーをおこなわない。スタート時にスライドショーが始まりますが、これを止めたいときは次のプロパティslideshowAutoを指定する。slideshowAuto:false(スライドショーはボタンクリックで始まる)。slideshowAutoのデフォルトはtrue。height;外枠とボタンなどを含んだ表示画面の縦の最大のサイズ。書き方は、"95%"、"500px"または600。例では、画像表示の縦の最大サイズをウィンドーサイズの100%にしたい。height=100></a>class;Aタグのクラス名。対応するjQuery設定のクラスセレクターのクラス名に合わせる。複数のAタグのクラス名を同じにして画像グループを作る。href;表示する画像などのコンテンツのURL。title;表示する画像などのコンテンツのタイトル(キャプション)。画像クリックでデモを見ることができます。デモ番号ex5スライドショー。0px;}一般的に、動画や音楽などのプレーヤーは、停止中の時は「停止ボタン-stop」、再生中は「開始ボタン-start」が表示されている。Colorboxのスライドショーの場合、表示が反対で、停止中の時は「開始ボタン-start」、再生中は「停止ボタン-stop」が表示される。これを、停止中の時は「停止ボタン-stop」、再生中は「開始ボタン-start」が表示されるように修正する(上のコードは修正された状態)。});</script></head><body>$(".ajax");Aタグのクラスセレクター。".ajax"のajaxは、表示したい画像などコンテンツのAタグのクラス名。(Ajax)</a>class;Aタグのクラス名。対応するjQuery設定のクラスセレクターのクラス名に合わせる。ロードできるファイルは、DOCTYPE、METAタグのないテキスト表示タグのみのHTMLファイルです。画像クリックでデモを見ることができます。});</script></head><body>$(".ajax");Aタグのクラスセレクター。".ajax"のajaxは、表示したい画像などコンテンツのAタグのクラス名。iflame;コンテンツタイプがアイフレーム。trueの場合、外部のHTMLなどのコンテンツがアイフレームに表示される。デフォルトは、false。innerWidth;表示画面の外枠およびボタンを含まない横のサイズ。innerHeight;表示画面の外枠およびボタンを含まない縦のサイズ。width;表示画面の外枠およびボタンを含む横のサイズ。hight;表示画面の外枠およびボタンを含む縦のサイズ。(Iframe)</a>(ex10)class;Aタグのクラス名。対応するjQuery設定のクラスセレクターのクラス名に合わせる。href;表示する動画などのコンテンツのURL。title;表示する動画などのコンテンツのタイトル(キャプション)。Googleマップです。動画のURLは共有動画サイトの場合、埋め込みコードのURLを使用します。詳細を見るクリックでデモを見ることができます。});</script></head><body>$(".inline");Aタグのクラスセレクター。".inline"のinlineは、表示したい画像などコンテンツのAタグのクラス名。inline;コンテンツタイプがインライン。trueの場合、カレントのHTML内のコンテンツを表示する。デフォルトは、false。width;表示画面の外枠およびボタンを含む横のサイズ。hight;表示画面の外枠およびボタンを含む縦のサイズ。(Inline)</a>class;Aタグのクラス名。対応するjQuery設定のクラスセレクターのクラス名に合わせる。href;表示するカレントHTML内のコンテンツのURL。書き方は、"#inline_content"、inline_contentは、DIVタグなどのID名。インラインコンテンツの書き方。表示するコンテンツのブロックは隠します。</div>title;表示する動画などのコンテンツのタイトル(キャプション)。クリックでデモを見ることができます。表示のトランスミッションの種類(バリエーション、遷移)を指定。‘elastic’(伸び縮みする)か’fade’(フェード)か’none’で初期値は’elastic’。初期値は350ミリセカンド(msまたはmsec)。トランスミッションの種類が‘elastic’か’fade’のとき。代替のアンカーURLとして使用したり、画像やフォームボタンなど非アンカー要素にURLを関連付けることができます。アンカーのtitle属性の代替として使用することができます。アンカーのrel属性の代替として使用することができます。これにより、rel属性が異なる要素をグループ化することができるようになります。グループ表示のN枚中、n枚目表示のテキストを設定します。グループ表示の「previous」ボタンのテキストを設定します。exsample5フォルダのCSSを使用時のみ有効。グループ表示の「next」ボタンのテキストを設定します。exsample5フォルダのCSSを使用時のみ有効。「close」ボタンのテキストを設定します。exsample5フォルダのCSSを使用時のみ有効。ajaxで取得した際にロードできなかった場合のエラーメッセージを指定。画像などのコンテンツのロードに失敗した場合のエラーメッセージを指定。trueの場合、コンテンツをiframeで表示します。falsetrueの場合、ドキュメント内の要素をコンテンツとして表示します。trueの場合、設定したHTMLを表示します。表示コンテンツの横サイズを指定。外枠とボタン表示部分も含まれる。表示コンテンツの縦サイズを指定。外枠とボタン表示部分も含まれる。borderやbuttonも含まれる。表示コンテンツの横サイズを指定。外枠とボタン表示部分は含まれない。表示コンテンツの縦サイズを指定。外枠とボタン表示部分は含まれない。コンテンツを読み込む時の初期の幅を指定。コンテンツを読み込む時の初期の高さを指定。コンテンツの最大幅を指定。コンテンツの最大高さを指定。グループの場合に、自動スライドショーするかどうの設定。スライドショーで次を表示するまでの時間を設定。trueの場合、スタート時にスライドショーを自動で開始する。スライドショー開始ボタンのテキストを設定できる。slideshow”。exsample5フォルダのCSSを使用時のみ有効。スライドショー停止ボタンのテキストを設定できる。slideshow”。exsample5フォルダのCSSを使用時のみ有効。ライトボックスを固定位置に表示するかどうかを指定。fixedがtrueの時のtopからの位置を指定。fixedがtrueの時のbotomからの位置を指定。fixedがtrueの時のleftからの位置を指定。fixedがtrueの時のrightからの位置を指定。ウインドウサイズが変更されたときに、ボックス位置を変更するかどうかを指定。※モーダルwindow:画像などメディアの表示は新しい別ウインドー(*2)最終更新日:2015.12.1(初版)これはinlineコンテンツです。(Inline)</a>。