webmas.jp

原寸画像へリンクしているサムネイルをクリックしたとき、ページを移動せずブラウザの表示領域内に収まる最大のサイズで画像を表示するスクリプトです。このスクリプトはページ内の画像サムネイルをクリックした時に原寸画像に移動するようマークアップされた HTML に対して効果を発揮します。

目次

• プレビュー
• ダウンロード
• 使い方
• 注意点

プレビュー

まずはどんなものなのか実際の動作を確認してみましょう。下の画像のサムネイルはクリックすることができます。

• 
• 
• 

右上の✖ボタンで閉じます。画像の周りの暗転エリアをクリックしても閉じることができます。画像をクリックした場合は新規ウインドウで元画像を開きます。

ブラウザウインドウの横幅か縦幅のどちらか狭い方に合わせてぎりぎりまで拡大して表示します。縦横比は維持したまま拡大縮小されます。ウインドウのサイズより画像のサイズが小さい場合はその画像の最大の 100% サイズで表示されます。

ダウンロード

このスクリプトは HTML の若干の追記、変更と Javascript ファイルを読み込むことによって動作します。まずは Javascript ファイルをダウンロードします。ダウンロードしたファイルは自サイトのサーバーにアップロードしておきましょう。

ダウンロード

使い方

下記のコードではサムネイル画像のリストがあり、それぞれのサムネイルをクリックすると原寸画像が開くようになっています。このリンクをクリックした時の挙動を Javascript で変更します。画像の一覧を囲っているタグに対して『class=”gallery”』を指定します。

<ul class="gallery">
	<li><a href="image001.png"><img src="image_t001.png alt="画像1サムネイル" /></a></li>
	<li><a href="image002.png"><img src="image_t002.png alt="画像2サムネイル" /></a></li>
	<li><a href="image003.png"><img src="image_t003.png alt="画像3サムネイル" /></a></li>
</ul>

リストではなく段落になっている場合でも動作します。その場合は段落を囲っているタグに対して『class=”gallery”』を指定します。

<div class="gallery">
	<p>まず最初に画像1があります。</p>
	<p><a href="image001.png"><img src="image_t001.png alt="画像1サムネイル" /></a></p>
	<p>次に画像2がきます。</p>
	<p><a href="image002.png"><img src="image_t002.png alt="画像2サムネイル" /></a></p>
	<p>最後に画像3がきます</p>
	<p><a href="image003.png"><img src="image_t003.png alt="画像3サムネイル" /></a></p>
</div>

HTML へ class の指定が完了したら Javascript ファイルを読み込みます。HTML ファイルの内にタグを追記します。

<script type="text/javascript" src="/js/imageGallery.js"></script>

src=”” 内の URL は Javascript ファイルを置いた場所を指定します。これでこのスクリプトは動作するようになります。

注意点

• リンク先のファイルが『.png, .jpg, .gif, .svg』以外の場合はプレビューせずそのままページを開きます。
• 想定しうるすべての HTML 構造を考慮したスクリプトではないため、想定からかけ離れた使い方をすると動作しない可能性があります。なるべく上記の例にあげた HTML の構成にして使用してください。
• スクリプトはウインドウが完全に読み込まれてから動作するので、完了前にサムネイルをクリックすると通常通りリンク先のページへ移動します。