html/css javascript jquery jQueryプラグイン lightbox

目的別で考えるlightBox(モーダルウインドウ）-シンプル・ギャラリー編-

webページを見ている方に画像やテキストを強調してみてもらいたい時にlightboxプラグインはシンプルに取り入れることが出来て効果は高いjsプラグインの一つです。

ただ、その分、プラグインの数も結構な量があります。だから、その中からサイトイメージにあったものを選べればよりサイトの雰囲気をだせるのではないかと思います。

そのきっかけになればと思い今回は、『シンプル』『写真、ギャラリー系』用途を中心に少しだけ紹介したいと思います。

シンプル

●LeanModal

デモページ&ダウンロード

使用プラグイン：jQuery

対応ファイル：画像（ギャラリー表示は不可)、テキスト

使い方

1.JQueryとダウンロードしたファイルを呼び出します。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script>

2.CSSファイルに以下の記述を加えます。

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
3.ページ内で表示したいものはページ内で作成した後、CSSで隠します。
#呼び出したいid{ display:none;}

4.最後にjavascriptでモーダルウインドウを呼び出します。
$("#trigger_呼び出したいid").leanModal();

動きも特になく、単に半透明な背景に表示対象が出てくるだけというシンプルさ。
同じHTML上に表示したいものを隠しているので、使いすぎは修正や更新時に混乱を招くかもしれませんが、ワンポイントな強調目的に便利かと思います。

●Slimebox2

デモページ　　　ダウンロード

使用ライブラリ：JQuery、 Mootools

ファイルサイズ:4KB　

対応形式：Image

使用方法(JQuery版)

1.JQueryプラグインとダウンロードしたファイルを呼び出します。

記述例：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />

2.適用させたい画像にrel属性を指定します。

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

3.グループ表示したい場合

以下のように同じrel属性を指定します。

<a href="images/image-1.jpg" rel="lightbox-cats">image #1</a>
<a href="images/image-2.jpg" rel="lightbox-cats">image #2</a>
<a href="images/image-3.jpg" rel="lightbox-cats">image #3</a>

取り扱いファイルは画像のみですが、その分使い方もシンプルです。表示にわずかな動きがあり、かつ細かい部分をカスタマイズすることも可能です。

直角な枠に直角な動きが特徴的なlightboxですね。

●LightBox2

使用方法&ダウンロード

使用ライブラリ：jQuery

対応形式：Image(ギャラリー可)

・lightboxプラグインとは定番の一つですね。使用方法も簡単です。

先ほどのslimeboxと比較すると、角丸にゆるやかなフェードインで表示されて、柔らかい印象があります。ほんわかな印象を出したいときはこちらのほうが向いているのかもしれません。

ギャラリー系

●YoxView

デモ&ダウンロード　　使用方法

使用ライブラリ：jQuery

対応形式：Image,Iframe,flash…etc

・多機能なLightboxプラグインです。表示を消すためのボタンや、次へボタンが全て枠内に収まっています。外枠は枠線のみで枠による印象が少ない気がします。

イラストギャラリーや、動画ギャラリーなど幅も広いので、色々見せたい方はいかがでしょうか。

●SwipeBox

デモ　ダウンロード

使用ライブラリ：jQuery

対応形式：Image

使用方法

1.ダウンロードしたファイルとJQueryをページ内で呼び出します。

<script src="lib/jquery-1.9.0.min.js"></script>
<script src="source/jquery.swipebox.min.js"></script>
<link rel="stylesheet" href="source/swipebox.css">

2.プラグインを使って表示させたい画像を以下の例のように記述

<a href="big/image.jpg" title="My Caption">
	<img src="small/image.jpg" alt="image">
</a>

3.最後にSwipeBoxを使う記述を書きます（以下記述例）

<script type="text/javascript">
jQuery(function($) {
	$(".swipebox").swipebox();
});
</script>

・今までとは違い、画面全体に黒背景が敷かれて画像が表示されます。スワイプ対応で画像サイズも可変されてスマートフォン向き。
PCでも画面いっぱいに画像を見せたいときや、高画質画像を見せたいと思ったときでは使えるのではないかと思います。

まとめ

いまにあげたのはほんの一例ですが、それでも結構違いがあったのではないかと思います。

LightBox（モーダルウインドウ）は取り入れやすいプラグインですが、改めてサイトのイメージに近いものを選んでみてはいかがでしょうか。

関連記事