7/7 別窓を開かずにその場クリックで拡大画像を表示する4つの方法 [ホームページ作成] All About

マウスのホイールで画像を拡大・縮小できる機能の設定

拡大・縮小ボタン

Lightbox Plusでは、拡大画像の左上に右図のようなボタンが表示されます。このボタンをクリックすると、マウスのホイールボタンの回転に合わせて画像を拡大・縮小できるようになります。拡大画像の本来のサイズが、閲覧者の画面サイズよりも大きい際に、特に便利な機能です。

この拡大・縮小機能は、初期状態で有効になっています。しかし、スクリプト本体である「lightbox_plus.js」ファイルの中身を修正することで、無効にも設定できます。

この機能を無効にするには、「lightbox_plus.js」ファイルの1,033行目(ファイル末尾から4行目)にある以下の記述部分を、

resizable:true

次のように書き換えます。

resizable:false

上記のように変更することで、マウスのホイールボタンによる拡大・縮小機能が無効になります。

拡大画像の上から効果画像を加える機能

拡大画像の左上に効果画像が重なっている

Lightbox Plusには、拡大画像の上から別の効果画像を重ねて表示できるオプションがあります。Lightbox Plusを構成するファイルの中に、「zzoop.gif」という効果画像が用意されており、右図のように表示されます。

これは、zzoop.gifファイルを他の画像に置き換えることで、好きな画像を重ねることができます。

この効果を出すには、画像リンクを作っているa要素に、以下のようにclass属性を追記します。

<a href="(拡大画像)" rel="lightbox" class="effectable">
   <img src="(小画像)" ...>
</a>

上記のように、rel属性(rel="lightbox")だけでなくclass属性(class="effectable")も付加することで、効果画像が重なって表示されます。ちょっとした面白い効果を出してみたい際に使うと良いでしょう。

手軽に設置できて、閲覧者も手軽に操作できる便利な拡大表示スクリプト

今回は、ページを移動することなく、別ウインドウも開かず、その場で拡大画像を表示できるスクリプトLightbox Plusの使い方をご紹介いたしました。HTMLの追記量も少なく、他のライブラリも不要なため、手軽に利用できます。画像をたくさん並べて掲載しているアルバムページなどに、ぜひ使ってみて下さい。

【関連記事】