画像をクリックするとズーム演出で大きな画像を表示するスクリプトの無料ダウンロード

公開日: 2014年2月5日
最終更新日: 2019年10月11日

画像リンクをクリックすると、ズーム演出で大きな画像を表示するスクリプトを作りました。
演出のイメージとしては、以下のようにiPhoneやiPadなどでアプリを開いた時のような演出とお考えください。

バージョン2.0未満までの名称は「オーバーレイ・ズームボックス」でしたが、バージョン2.0以降は「オーバーレイ・ズームボックス・スクリプト」とします。
なぜ今さら名称を変更するかと言いますと、当サイトで配布・販売しているプログラムの中で、PHPが存在せずJSだけで動作するものを「●●●●スクリプト」という名称で統一させるためです。

バージョン2.0ではウインドウ表示領域より大きな画像にも対応し、ようやく私自身が満足できる仕上がりのものになりました。
既存サイトに組み込みやすいように作ってありますので、ぜひご利用ください。

現在の最新バージョンは2018年11月14日公開の2.0です。
各バージョンごとのアップデート内容については、このページ最下部の「アップデート履歴」に記載してあります。

特長

HTMLページにも組み込み可能。
設定用のファイルなし。サーバにアップロードするだけで動きます。
画像(img要素)が何枚あっても適用可能。
ウインドウ表示領域より大きな画像でも、ウインドウ内に収まるように表示。(バージョン2.0以降)

サンプルデモとダウンロード

オーバーレイ・ズームボックス・スクリプトのサンプル
このスクリプトはスマホやタブレットでの表示の際は機能しないようにできています。(理由は後述)
PCから動作をご確認ください。

オーバーレイ・ズームボックス・スクリプトのダウンロード
無料でダウンロードできます。

使い方の説明

まずは以下の作業をし、動作確認をすると良いでしょう。
既存サイトへの組み込みはその後にしたほうが無難です。

1、オーバーレイ・ズームボックス・スクリプトをダウンロードし、展開する。

2、フォルダごとアップロードする。

3、ブラウザでindex.htmlにアクセスし、動作を確認する。

既存サイトへの組み込み方法

以下の解説は同梱のindex.htmlのHTMLソースを見ながら、またはコピーしていくと間違いが起きにくいでしょう。

4、このスクリプトを適用したい画像リンク(aタグ)に class=”overlay-zoombox” を付ける。

<a href="image/sample-1.jpg" class="overlay-zoombox"><img src="image/sample-small-1.jpg" alt="" /></a>

5、overlay-zoombox.cssを読み込む。
このoverlay-zoombox.cssの設置場所はどこでもOKです。
もしサーバ上にすでにcssファイルを格納しているフォルダがあるのなら、その中に移動させても構いません。

<link rel="stylesheet" href="css/overlay-zoombox.css" />

6、jQuery本体とoverlay-zoombox.jsを読み込む。
このoverlay-zoombox.jsの設置場所もどこでもOKです。
もしサーバ上にすでにjsファイルを格納しているフォルダがあるのなら、その中に移動させても構いません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/overlay-zoombox.js"></script>

以上です。
画像リンクをクリックしてみて、正常に動作するか確認してみましょう。

モバイル端末(スマホ・タブレット)での動作や、テキストリンクについて

このスクリプトはモバイル端末(スマホ・タブレット)での表示の際は機能しないようにできています。

なぜなら、タブレットならまだしも、ただでさえ狭いスマホの画面内で画像をオーバーレイ(重ねて)表示させるのは、重ねて表示させる意味があまり感じられないからです。(あまり拡大されないから)

そんなことをするより素直に「新しいウインドウで開く」、つまりtarget=”_blank”を適用させる方が使い勝手の良いサイトなのではないでしょうか。