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

目的別で考えるlightbox(モーダルウインドウ) ～アクション・高級仕様編～

前回は、シンプル、ギャラリー編と称して、lightboxの違いをわずかですが、紹介しました。 今回は動きのあるlightboxプラグインを次いでご紹介。

sexylightbox

 

デモ    ダウンロード

使用ライブラリ：mootool.js(ver.1.2)

対応形式：画像

実行すると上からモーダルウインドウが勢い良く振ってくるライトボックス。エンターテイメントなサイトで使うと躍動感を出したり、サイトの印象にインパクトが出ます。

使い方：

1.ダウンロードした画像フォルダとcss,jsファイルなどを任意の位置へ配置して呼び出し。

 <link href="SexyLightBox/sexylightbox.css" rel="stylesheet" type="text/css">
　　<script type="text/javascript" src="SexyLightBox/mootools.js"></script>
　　<!-- /ver 1.2 -->
<script type="text/javascript" src="SexyLightBox/sexylightbox.js"></script>

 

※.画像ファイルをドキュメントルート以外に配置した場合は sexylightbox.jsの以下を修正してください。

sexylightbox.jsの28行目の以下を任意の位置、任意のファイル名に。

例：imagesdir :’xxx/sexyimages’,

 2.呼び出し画像のアンカーリンクにクラス指定をします。

 
<a href="image-1.jpg"  title="ここにテキストが入ります">
<img src="base-set/img/thumb-1.jpg" alt="thumb1">
</a>
 

グループ化したい時は”rel=group”などでそろえればグループ化となります。

3.最後にjavascriptで実行します

<script type="text/javascript">
    window.addEvent('domready',function(){
     new SexyLightBox({ find:'sexylightbox', 
                        color:'white', 
                        hexcolor:'#FFFFFF',
                        captionColor:'#000' 
     }); 
   });
</script>  

 

これだけじゃなくて、映像も使いたい、jQueryのバージョン欲しい方は有料ですが、Sexylightbox2もあります。  

bPopup.js

 

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

使用ライブラリ:jQuery

対応形式：画像、iframe,flash

一見すると、シンプルなモーダルウインドウですが、このプラグインは

  • ページをスクロールしても追尾してくる。
  • ウインドウ表示位置の自由指定
  • ウインドウ表示方法の指定（画面横から出てくる、画面丈夫から出てくる)
  • ウインドウ同士を重ねることができる
  • とにかく動きが滑らか
  • カスタマイズ度が高い
多機能タイプのプラグインです。
 
基本的な使い方

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

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_lib/jquery.bpopup.min.js"></script>

2.呼び出したいものを以下のように記述

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

  上記の使い方はあくまで基本で、細かい指定がまた必要かと思います。 それでも、一度使い方を覚えると幅広く使えるタイプだと思います。 easing.jsを併せて使えば、さらに幅は広がります。  

ページ全体で使用するlightBoxたち

多機能ではなく、高機能型のlighboxをこのまま紹介。使い方は簡略していきます。

Superbox

デモ　ダウンロード

使用ライブラリ：jQuery

対応形式：画像

これもlightbox系プラグインです。画像ギャラリー特化ですが、レスポンシブに対応もしており、使用するためののcssファイル、jsファイルも合計で4KBという超軽量。 イラストサイト、写真サイトなど、画像を見せたいサイトで活躍してくれると思います。

photobox

デモ　ダウンロード

使用ライブラリ：jQuery

対応形式：画像、youtube,vimeo

HTML5、CSS3を使用したギャラリー型lightboxプラグイン。スマホのフリック操作にも対応しています。    

終わりに

前回は5つ、今回は4つだけの紹介ですが、lightboxも広さが分かるものを選んでみました。 ここまでも十分にすごいんですが、まだまだ進化していくような気もしたりします。それでも、lightboxの本来の「画像を拡大表示させてユーザーへ意識を寄せる」という枠は忘れずに考えることは注意したいところです。見てる人が見やすく、かつ楽しめるlighboxプラグインを見つけるきっかけになればと思います。  

関連記事