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

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …

no image

Photoshop で入力したテキストの「縦書き」「横書き」を変更する方法

この記事は約 1 分で読めます。 Photoshopを使うようになってもう何年も経つのに、意外と知らずに無駄な事をしていたり・・・が多かったりします。。。 効率よく作業するには、やっぱり便利な方法は活 …

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

この記事は約 1 分で読めます。 比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。 スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」 …

no image

検索エンジンに登録する方法。

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 いくつもあると思うのですが、今回は検索エンジンに登録する方法にチャレンジしたいと思います。 いろいろ方法をググっていたら、「Goo …

no image

WordPress カテゴリごとに部分的デザインを変えたい時

この記事は約 1 分で読めます。 WordPressで自分なりにテーマをカスタマイズしていると、カテゴリごとにデザインを変えたい!ということがあります。 ページまるごとデザイン(表示)を変える場合と、 …