別窓を開かず画像を拡大してくれるJavaScript「FancyZoom」

Webページ内で貼られている画像の中には、クリックすると拡大された画像を表示するものがあります。
あれは画像自体にリンクを貼って、クリックするとそのリンク先(この場合は拡大画像)に飛ぶように設定されているためです。

しかし、HTML標準のリンクでは、リンクをクリックするとページが更新されるか新しく別窓を開く設定になってしまいます。拡大画像を見たいだけなのに一々別窓が開くのは鬱陶しいの一言です。 Webサイトの運営者の中には改善したいと考えている方も多いでしょう。

そこで、別窓を開かず画像を拡大してくれるJavaScript「FancyZoom」を紹介します。
以下、そのサンプルです。


▲サンプル画像。クリックするとポップアップ形式で拡大。

※Webサイト運営者向けの記事です。ユーザー(閲覧者)が導入するものではないのでご注意ください。


FancyZoom

ダウンロードページ : FancyZoom 1.1

ライセンス : 非商用なら無料。商用1サイトに付き$39です。

jQuery版「FancyZoom」

○Fancy Zoom by John Nunemaker
http://static.railstips.org/orderedlist/demos/fancy-zoom-jquery/

Opensource - AJAX - Jquery Fancyzoom
http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/

ライセンス : GPLライセンスのようです。(以下、ライセンスの概要)

GPLは、プログラム(日本国著作権法ではプログラムの著作物)の複製物を所持している者に対し、概ね以下のことを許諾するライセンスである。

  1. プログラムの実行
  2. プログラムの動作を調べ、それを改変すること(ソースコードへのアクセスは、その前提になる)
  3. 複製物の再頒布
  4. プログラムを改良し、改良を公衆にリリースする権利(ソースコードへのアクセスは、その前提になる)

Wikipedia「GNU General Public License」より引用

特徴

  • リンクされている画像を、別窓など開かずに拡大表示します。
  • 設置が簡単。HEAD内に少しコードを書き加えるだけです。
  • ブログサービスでも利用しやすい。
  • 過去のページにあるサムネイル画像まで対応してくれます。

設置方法

  1. 「FancyZoom 1.1.zip」をダウンロード後、解凍。中に入っている画像ファイルをすべてサーバー内にアップロードします。
  2. 「FancyZoom.js」を開き、44行目(var zoomImagesURIの行)のコードを改変、先ほどアップロードした画像フォルダへパスを通します。
  3. 「FancyZoom.js」「FancyZoomHTML.js」のふたつをサーバーにアップロードします。
  4. 各ページの<head> ~ </head>でJavaScriptを呼出します。
    次に<body>タグ内から関数「onload="setupZoom()"」を呼び出します。

これで画像へリンクを貼った全てのページにある<img>タグに対して適用されポップアップするようになります。

拡大させたくない場合

「rel="nozoom"」を加える。

<a href="~.jpg"><img  rel="nozoom" src="~small.jpg" /></a>

詳細な設置法解説

ここは一応「初心者講座」を謳っているのでもう少し具体的に解説します。
とはいえ、基礎的なブログ管理の知識が必要ですので、以下の内容がわからないという方は一度勉強なさってから挑戦すると良いでしょう。(最低でも「アップロード方法」「リンクの概念」と「HTMLの基礎知識」が必要です。)


  1. 「FancyZoom 1.1.zip」をダウンロード後、解凍。中に入っている画像ファイルをすべてサーバー内にアップロードします。

    ダウンロードページから「FancyZoom 1.1.zip」をダウンロードして解凍します。すると「__MACOSX」と「FancyZoom 1.1」のふたつのフォルダが解凍されます。

    そのうち「FancyZoom 1.1」の中にある「images-global」内の画像をすべてサーバーにアップロードします。「zoom」フォルダごとアップロードすればOKです。アップロードする場所は任意で問題ありません。操作2で画像フォルダへのパスを通します。

  2. 「FancyZoom.js」を開き、44行目(var zoomImagesURIの行)のコードを改変、先ほどアップロードした画像フォルダへパスを通します。

    どんなソフトを使ってもいいので「js-global」フォルダ内にある「FancyZoom.js」(本体であるJavaScriptファイル)を開きます。メモ帳で開きたい場合は拡張子を「FancyZoom.js.txt」とすればOKです。

    開いたら、44行目「var zoomImagesURI ="~~";」の「"~~"」で囲まれた部分を先ほどアップロードした画像フォルダのURLに改変します。(絶対パスだと安全。)


    ▲クリックで拡大

  3. 「FancyZoom.js」「FancyZoomHTML.js」のふたつをサーバーにアップロードします。

    そのままです。「FancyZoom.js」「FancyZoomHTML.js」のふたつをサーバーにアップロードしてください。これも場所は任意です。操作4でJavaScriptファイルを指定します。

  4. 各ページの<head> ~ </head>でJavaScriptを呼出します。
    次に<body>タグ内から関数「onload="setupZoom()"」を呼び出します。

    各ページの<head> ~ </head>内でJavaScriptを呼出すコードを記述します。以下のように記述します。
    (※リンク部分「src=""」はアップロードしたJavaScriptファイルの場所を指定してください。)

    <script src="/xxxxxxxx/FancyZoom.js" type="text/javascript"></script>
    <script src="/xxxxxxxx/FancyZoomHTML.js" type="text/javascript"></script>

    さらに<body>タグ内から関数「onload="setupZoom()"」を呼び出すため、以下のようにコードを記述します。

    <body onload="setupZoom()">

    以上で導入は完了です。以下のように記述された画像リンクすべてに適用されます。

    <a href="~.jpg"><img  src="~small.jpg" /></a>

他にもJavascript onloadがある場合

Javascript onloadが他にも複数ある場合は、上手く作動しないことがあります。「window.onload」が複数ある場合、一番最後に実行されたものが優先されてしまうからです。

解決法は以下のサイトで詳しく書かれています。

Javascript onloadが複数ある場合の対処法 ~FancyZoomとCubeブログシールを共存させる - ブログ・カスタマイズ徒然記

HTMLでの呼び出し方である「onload="setupZoom()"」を、Javascriptによる呼び出し方である
「window.onload = function() {setupZoom();}」に変更させ、「window.onload」を複数実行できるよう外部スクリプトファイルを置くという手法です。

 
function addOnloadEvent(fnc){
  if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", fnc, false );
  else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", fnc );
  }
  else {
    if ( window.onload != null ) {
      var oldOnload = window.onload;
      window.onload = function ( e ) {
        oldOnload( e );
        window[fnc]();
      };
      
    }
    else
      window.onload = fnc;
  }
}

以上のコード通りに記述したJavascriptファイル(addonload.js)を作成しアップロードします。
これをすべてのJavascriptの呼び出しよりも早く読み込ませるため、呼び出しコードを冒頭に記述します。

<script type="text/javascript" src="/xxxxxxxx/FancyZoom/addonload.js"></script>

<script type="text/javascript" src="/xxxxxxxx/aaa.js"></script>
<script type="text/javascript" src="/xxxxxxxx/bbb.js"></script>

▲どのJavascriptの呼び出しコードよりも上に記述します。(上記コードでは addonload.js を最初に読み込んでいる)

その後、以下のコードを加えます。このとき、<body>タグ内の「onload="setupZoom()"」は削除します。

<script type="text/javascript"> addOnloadEvent(function() {setupZoom();}); </script>

これで他のwindow.onloadを使用しているスクリプトを読み込んだとしても、正しく実行できるようになるようです。
(当ブログでもやっています)

コード

<head>

<!-- // Javascript onloadの複数実行JS // -->
<script type="text/javascript" src="/xxxxxxxx/FancyZoom/addonload.js"></script>

<!-- // FancyZoom本体の読み込み // -->
<script src="/xxxxxxxx/FancyZoom.js" type="text/javascript"></script>
<script src="/xxxxxxxx/FancyZoomHTML.js" type="text/javascript"></script>

<script type="text/javascript"> addOnloadEvent(function() {setupZoom();}); </script>

</head>

<body>

▲最終的には以上の様な形になるはずです。

まとめ

以前から「拡大画像を表示させるたびに別窓(タブ)が開くのは面倒だろうな~」と思っていたので良いスクリプトがないか探していました。この「FancyZoom」はそんな悩みを一気に解決してくれたためこれからも重宝すると思います。

導入もちょこっとHEADにJavaScriptを加えるだけですので記事自体を書き換える必要もなく、すべての画像リンクに適用できるので本当に便利です。

無料のブログサービスでも「JavaScriptのアップロードと実行」「画像をフォルダ単位で管理可能」なブログであるなら簡単に導入できます。ぜひ試してみてはいかがでしょうか。

スポンサーリンク

Track Back

Track Back URL

コメントする

非公開。必須ではありません。

(いくつかのHTMLタグ(a, strong, ul, ol, liなど)が使えます)

このページの上部へ

サイト内検索

広告

最近のコメント

Powered by Movable Type 6.3.2