写真のスライドショーができるカスタマイズ可能多機能LightBox

写真のスライドショーができるカスタマイズ可能多機能LightBox - Lightview

[Lightbox]や[ThickBox]などと同等の機能を持ち、
角丸でカスタマイズにも柔軟なLightviewの紹介です。

当サイトの写真展示ページでも使用しています。

他のページを読み込む → Google

実装に必要な素材
prototype.jsとscriptaculous.jsは最新のものをGoogle AJAX Librariesを使って読み込む方法もあります。

Prototype.js → ダウンロードページ
scriptaculous.js → ダウンロードページ
lightview.js → ダウンロードページ

設定 ▼

文章型宣言はXHTML 1.0 Transitionalにした方が良さそうです。
私の場合、XHTML 1.0 Strictに設定するとIE7とIE8で角丸が消えていました。
XML宣言もしない方が良いかもしれません・・・。試してませんが・・・。

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

設定 ▼（順番が決まっているようです。）

            <script src="prototype.js" type="text/javascript" charset="utf-8"></script>
            
            <script src="scriptaculous.js?load=effects" type="text/javascript" charset="utf-8"></script>
            
            <script src="lightview.js" type="text/javascript" charset="utf-8"></script>

設定 ▼Google AJAX Librariesを使用した場合

            <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js'></script>
            
            <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
            
            <script type='text/javascript' src='js/lightview.js'></script>

次にcssを読み込みます。

設定 ▼

            <link rel="stylesheet" type="text/css" href="css/lightview.css" />

HTML ▼ (通常の使い方)

<a>に「lightview」というクラスをつけます。またタイトルの後に｢::｣をつけると、コメントが書けます。

            <a href="表示したい内容" class="lightview" title="タイトル::コメント">リンクテキスト</a>

HTML ▼ (複数枚の画像をグループとして呼び出場合)

<a>に「lightview」というクラスをつけます。そのあとに「rel="gallery[グループ名]"」でグループにしたいものに共通の属性を付けます。

            <a rel="gallery[グループ名]" href="表示したい内容1" class="lightview">リンクテキスト</a>
            <a rel="gallery[グループ名]" href="表示したい内容2" class="lightview">リンクテキスト</a>
            <a rel="gallery[グループ名]" href="表示したい内容3" class="lightview">リンクテキスト</a>

「rel="gallery[グループ名]"」を「rel="set[グループ名]"」にするとアイコンの表示が変わります。

            <a rel="set[グループ名]" href="表示したい内容1" class="lightview">リンクテキスト</a>
            <a rel="set[グループ名]" href="表示したい内容2" class="lightview">リンクテキスト</a>
            <a rel="set[グループ名]" href="表示したい内容3" class="lightview">リンクテキスト</a>

HTML ▼ (他のページを読み込む場合)

通常のものと同様に「lightview」クラスを付け、hrefに表示させたい外部のリンク先を記述します。
rel属性に｢iframe｣を指定し、タイトルにフルスクリーンを｢true｣と記述することで画面をフルスクリーンに設定できます。

          
            <a href='http://google.com' rel='iframe' title='Google :: :: fullscreen: true' class='lightview'>Google</a>

これら以外にも、同一ページ内の指定箇所を読み込んだり、AJAX.Requestが使えたり、
QuickTime形式の動画の再生や、読み込んだウィンドウにエフェクトを付けることができるようです。

またオプション設定でウィンドウの幅や高さの指定、フルスクリーン指定や、動画のループなど、他にもたくさんのオプションが指定できます。

studio-benkei