Webの記録

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

投稿日:

この記事は約 6 分で読めます。

LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。

たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」というjQueryプラグインにチャレンジです♪

ColorBoxデモ画面イメージ

ColorBox」は、Lightboxのように画像を拡大表示するjQueryのプラグインです。

主な特徴

  • 拡大表示できるのは・・・画像の以外にも、画像をグループ化して表示、Flashムービー、Ajax、インラインHTML、iFrameをつかった外部サイト呼び出しです。
  •  Javascriptだけの容量は10KBなので、軽量。
  • 4種類のスタイルが用意されている。
  • CSSでデザインをカスタマイズできる。
  • ローディング画像の設置が可能。
  • ライセンスはMIT。

設置方法

ColorBox」をサイト(URL:    http://colorpowered.com/colorbox/)からダウンロードします。

ColorBoxをダウンロード出来るファイル一覧ダウンロードしたら、「colorbox」フォルダから「jquery.colorbox-min.js」または「jquery.colorbox.js」を取り出します。

colorboxフォルダから「jquery.colorbox-min.js」または「jquery.colorbox.js」を取り出します。

「example1」~「example5」まではデモ用のファイルなので、好みのファイルの「colorbox.css」ファイルと「images」フォルダを取り出します。

headerの記述。

HTML ファイルのheaderでjsファイルとcssの関連付けの記述。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.colorbox.js"></script>

 

colorboxの設定をjavascriptで記述。

単純な画像のグルーピングの場合の記述です。rel=”の中身がグループ名となります。
transitionやopacityなどの設定をしたい場合は、「ColorBox」のサイトに記述方法が書かれています。

<script type="text/javascript">// <!&#91;CDATA&#91;
   $(document).ready(function(){
    //Examples of how to assign the ColorBox event to elements
 	$("a&#91;rel='example1'&#93;").colorbox();    

   //Example of preserving a JavaScript event for inline calls.
 	$("#click").click(function(){
  	  $('#click').css(
        {"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); 		          return false;
 	});
   });
// &#93;&#93;></script>

 

htmlの記述。

画像ギャラリーを作りたいので、画像グルーピングの場合の記述をします。「thickbox.js」を使った時と同じものにしてみました。

<div class="image_box">
<ul>
	<li><a title="Me and my grandfather on the Ohoopee." href="content/ohoopee1.jpg" rel="example1">
<img src="content/ohoopee1t.jpg" alt="Me and my grandfather on the Ohoopee." /></a></li>
	<li><a title="On the Ohoopee as a child" href="content/ohoopee2.jpg" rel="example1">
<img src="content/ohoopee2t.jpg" alt="On the Ohoopee as a child" /></a></li>
	<li><a title="On the Ohoopee as an adult" href="content/ohoopee3.jpg" rel="example1">
<img src="content/ohoopee3t.jpg" alt="On the Ohoopee as an adult" /></a></li>
</ul>
</div>
<!-- /.image_box -->

あとは、お好みでcssをカスタマイズしてオシマイ。

headerの中のスクリプトをいろいろ書き加えると、また見せ方が変わると思います。
サイトに合せて、いろいろいじると良いかもしれません。

-Webの記録
-, , , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

「ページ内リンクはするするスクロール」にチャレンジ!!

今日は・・・、「ページ内リンク」でちょっとイイカンジにスクロールするjQueryにチャレンジです。
ページ内リンクをそのまましても(javaScriptなし)出来ますが、そのままだといきなり戻り先に到着してしまってびっくりするので、「yuga.js」でするするという動きをつけてみました。

no image

日本語文章校正ツールを使ってみた。

この記事は約 1 分で読めます。 今回は、Yahoo!Japan校正支援Webサービスを利用した校正支援ツールを試してみました。 誰かに伝える文章を書く時に使えそうな、Webツール「日本語文章校正ツー …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

WordPress Moreタグを使った抜粋にチャレンジ

この記事は約 1 分で読めます。 今回は、「抜粋」にチャレンジします♪ 「抜粋」は、記事の一部のみ表示して「続きを読む」という文字をクリックすると、全文が表示されるものです。 長い文章の場合にはかなり …

no image

WordPressのオベンキョウ③ アクセス解析ツール導入

この記事は約 1 分で読めます。 「Google Analytics」を先日始めてみて・・・。 少しずつ内容が見えてきました。 でも、まだまだ・・・長期で見ていかないといけないかなぁと思ってます。 今 …