画像リンクをクリックすると、ズーム演出で大きな画像を表示するスクリプトを作りました。
演出のイメージとしては、以下のようにiPhoneやiPadなどでアプリを開いた時のような演出とお考えください。
バージョン2.0未満までの名称は「オーバーレイ・ズームボックス」でしたが、バージョン2.0以降は「オーバーレイ・ズームボックス・スクリプト」とします。
なぜ今さら名称を変更するかと言いますと、当サイトで配布・販売しているプログラムの中で、PHPが存在せずJSだけで動作するものを「●●●●スクリプト」という名称で統一させるためです。
バージョン2.0ではウインドウ表示領域より大きな画像にも対応し、ようやく私自身が満足できる仕上がりのものになりました。
既存サイトに組み込みやすいように作ってありますので、ぜひご利用ください。
現在の最新バージョンは2018年11月14日公開の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”を適用させる方が使い勝手の良いサイトなのではないでしょうか。
また、「ズームさせる」という演出の都合上、テキストリンクには機能しないようになっています。拡大ズームさせる前の初期画像がページ上に表示されていないわけですからね。
ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。