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

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

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

関連記事

no image

Worepressのロゴ、ボタン、カラースキームなどの公式データをメモ

この記事は約 1 分で読めます。 WordPressのロゴ、ボタン、カラースキームなど、公式データがダウンロード出来るようになっていたので、メモ。 ちゃんと、あったんですね!!しかも、かなり種類が豊富 …

no image

WordPressのオベンキョウ①

WordPressで、自分のサイトを作る事にしました。

no image

WordPressで「ブルートフォースアタック」や辞書攻撃にあった時にやってみたこと。

この記事は約 1 分で読めます。 昨年(2013年8月)、ロリポップのレンタルサーバーでWordPressサイトへの改ざん事件がありました。 その後も、「ブルートフォースアタック」や辞書攻撃があってい …

no image

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …

no image

Webフォント「Google Web Fonts」を使ってみた

この記事は約 1 分で読めます。 だんだんと古いブラウザに対応しなくてよくなってくると、以前は画像だけで対応していたものがcss3などを利用できるようになってきます。 Webフォントもcss3の技術。 …