しなやか暮らし研究所パソコン処理ホームページの自作拡大図の表示 Lightbox, LightBoxPlusの利用法

拡大図の表示 - Lightbox, LightBoxPlus

特徴、利点

Lightboxおよび、LightboxPlusは大きい画像イメージを表示するのに利用できるるJavaScriptアプリケーションです。配布サイトからファイルをダウンロードし、必要なファイルを自分のWeb領域にアップロードし、拡大表示するイメージを記述したHTMLファイル内に数行のソースを追加することにより、新たなページを開かずに拡大画像を表示することが出来ます。

Lightboxの利用

LightBoxのサイトからLightboxをダウンロードします。
Lightboxに対応させたいページと同じフォルダにcss、images、jsをアップロードします。

Lightboxを使いたいページの<head></head>内に以下の４行のタグを挿入。

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Lightboxを使って画像の拡大を行いたい場所に以下のタグを挿入
<a href="./largeimage.jpg" rel="lightbox" title="画像の説明文">
<img src="./smallimage.jpg " width="(横幅)" height="(高さ)" alt="(代替文字)"></a>

Lightbox Plusの利用

Lightbox Plusは拡大画像の左上端に表示されるアイコンをクリックすると、マウスカーソルのホイールボタンの回転に合わせ、画像をさらにズームアップしたり、画像をパンしながら詳細を確認することが出来ます。

SerendipityNZ Ltd.のアプリケーション配布サイト：toyboxからLightBox Plus配布ページに入って、必要ファイルをダウンロードします。
ダウンロードしたlightbox_sample.zipファイルには、サンプル用のHTMLや画像ファイルも含まれており、Lightbox Plusを利用するにはresourceフォルダの中身だけが必要です。
resourceフォルダをLightbox Plusを利用したいファイルのあるフォルダー内にアップロードします。 (Lightbox Plusをサイト内のどこからでも利用できるようにする変更は後述）

Lightbox Plusを使うHTMLソースのhead要素内にLightbox Plusのresourceフォルダの内容を読み込む記述を追加。

<link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv">
<script type="text/javascript" charset="UTF-8" src="./resource/spica.js"></script>
<script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>

Javascriptの記述は順序に注意。spica.jsが先で、lightbox_plus.jsが後。

Lightbox Plusを使用する記述を、拡大画像を表示したい場所に追加。
<a href="./largeimage.jpg" rel="lightbox">
<img src="./smallimage.jpg " width="(横幅)" height="(高さ)" alt="(代替文字)"></a>
imgタグで表示されるsmallimageをクリックするとウインドウ中央にlargeimageが表示され、背後のページは暗くなる。aタグのリンクで拡大画像を指定。拡大画像のサイズはlargeimageの解像度で自動的に決定される。画像自身や、画像外領域、画像右上の[×]ボタンなどをクリックすると、拡大画像は消えて元の表示に戻る。

Lightbox Plus補足

一連の画像をスライドショーのように表示する
rel属性で指定する属性名をlightboxに任意の文字を追加したものにすると、同じ名前の拡大画像間で表示を移動するボタンが表示され、表示の前後移動が出来るようになる。

<a href="./largeimage1.jpg" rel="lightboxA">
   <img src="./smallimage1.jpg" width="120" height="96" alt="代替文字1">
</a>
<a href="./largeimage2.jpg" rel="lightboxA">
   <img src="./smallimage2.jpg" width="120" height="96" alt="代替文字2">
</a>
<a href="./largeimage3.jpg" rel="lightboxA">
   <img src="./smallimage3.jpg" width="120" height="96" alt="代替文字3">
</a>

Lightbox Plusをサイト内のどこからでも利用できるようにする
Lightbox Plusは拡大画像のコントロールアイコンとして独自の画像を使用しており、それらの画像のパス指定がresourceフォルダーを配置した位置からの相対パスになっている。そこで同じフォルダー以外からLightbox Plusを呼び出したい場合は、lightbox_plus.jsの末尾7箇所のパス指定を絶対パスに書き換える。

Event.register(window,"load",function() {
   var lightbox = new LightBox({
      loadingimg:'resource/loading.gif',
      expandimg:'resource/expand.gif',
      shrinkimg:'resource/shrink.gif',
      previmg:'resource/prev.gif',
      nextimg:'resource/next.gif',
      effectimg:'resource/zzoop.gif',
      effectpos:{x:-40,y:-20},
      effectclass:'effectable',
      closeimg:'resource/close.gif',
      resizable:true
   });
});

拡大画像のズームアップ機能を無効にする
lightbox_plus.jsの末尾から3行目にある、
resizable:true
をfalseに変更。

2 3 4