ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

別窓を開かずにその場クリックで拡大画像を表示する4つの方法(4ページ目)

画像のクリック後にページを移動せず、その場で拡大画像を表示できるLightbox系スクリプトのおすすめ4本を紹介。JavaScriptを読み込むタグと短いHTMLを書くだけで簡単に使えます。jQueryを使う定番のLightbox2や、動画のポップアップも可能なColorbox、スマホ対応で全画面表示もできるIntense Imagesなどを紹介。CSSを使えば画像サイズの調整も簡単です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

Lightbox Plusのアップロードができたら、拡大画像をその場で表示させたいページに、Lightbox Plusを利用するためのHTMLソースを追記しましょう。
 

Lightbox PlusをHTMLから呼び出して使うには

Lightbox Plusを利用するためのHTMLを記述

Lightbox Plusを利用するためのHTMLを記述

さて、Lightbox Plusを使うには、HTMLに以下の2種類の記述が必要です。

(1) Lightbox Plusの本体を読み込む記述をhead要素内に追記
(2) Lightbox Plusを使って拡大画像が表示されるように、リンクに属性を追記

どちらも、とても短くて簡単な記述で済みます。以下のように記述して下さい。

 

Lightbox Plusの本体を読み込む記述

HTMLのhead要素内に、以下の2行をそのまま記述します。
<link rel="stylesheet" type="text/css" href="./resource/lightbox.css" media="screen,tv" />
<script type="text/javascript" charset="UTF-8" src="./resource/lightbox_plus.js"></script>
1行目(link要素)は、Lightbox Plusで使うスタイルシート「lightbox.css」を読み込む記述です。
2行目(script要素)は、Lightbox Plusの本体であるJavaScriptを読み込む記述です。
両方とも、resourceディレクトリ内に格納されている場合の記述です。もし別のディレクトリ名に変更している場合は、適宜修正して下さい。
 

Lightbox Plusを使って拡大画像が表示されるように、リンクに属性を追記

次に、Lightbox Plusを使って拡大画像を表示させたい画像リンクを、以下のように記述します。
<a href="(拡大画像)" rel="lightbox">
   <img src="(小画像)" ...>
</a>
上記は、「拡大画像にリンクする小画像」を作るHTMLソースです。小画像を表示するimg要素を、リンクを作るa要素に含ませているだけの、簡単なソースです。ただ、a要素に「rel属性」を加え、値に「lightbox」という文字列を記述しています。この「rel="lightbox"」という記述の付加されたリンクが、Lightbox Plusを使って拡大画像が表示される対象になります。

例えば、「森」の写真で、拡大画像ファイル名が「forest1.jpg」で、小画像ファイル名が「ps1.jpg」(サイズは120×96ピクセル)である場合は、下記のように記述します。
<a href="./forest1.jpg" rel="lightbox">
   <img src="./ps1.jpg" width="120" height="96" alt="森">
</a>
画面中央に拡大画像が表示される

画面中央に拡大画像が表示される

こう記述することで、小画像をクリックすると右図のようにウインドウ中央に拡大画像が表示されるようになります。このとき、拡大画像の背後にある元々のページ内容は、少し暗めに表示されます。

画像自身や、画像外領域、画像右上の[×]ボタンなどをクリックすると、拡大画像は消えて元の表示に戻ります。

 

完了

Lightbox Plusを使ったサンプル

Lightbox Plusを使ったサンプル

以上で、Lightbox Plusを使って拡大画像を表示する方法は完了です。実際にLightbox Plusを使って拡大画像を表示するサンプルページも用意していますので、併せてご参照下さい。各サムネイル画像をクリックしたときに、ページ移動することなく、ポップアップウインドウが出ることもなく、その場に拡大画像が表示されます。

 
なお、さらにLightbox Plusを活用するオプションとして以下の方法も解説しています。便利ですので、ぜひ順番に試してみて下さい。

【オプション作業の目次】
1. 複数の拡大画像を連続して表示できるように設定する記述方法 (p.5)
2. サイト内のどこからでも利用できるようにスクリプトをカスタマイズ (p.6)
3. 拡大縮小機能を無効にしたり、拡大画像の上に効果画像を重ねて表示する方法 (p.7)
  • 前のページへ
  • 1
  • 3
  • 4
  • 5
  • 7
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます