画像をスムーズに拡大ポップアップしてくれるスクリプトFancyZoom 1.1

ブログに画像拡大スクリプトFancyZoom 1.1を導入してみました。個人的にはなかなか良いスクリプトだと思います。

画像をスムーズに拡大ポップアップしてくれるスクリプトFancyZoom 1.1

fancyzoom1.1
昨晩からブログ内の画像をポップアップ形式でスムーズに拡大するスクリプトFancyZoom 1.1をいうものを導入してみました。

ピカデリーサーカス
▲サンプル画像。
クリックすると画像がブラウザ内でスムーズに拡大、ポップアップ表示されます。

ブログやホームページを大掛かりな改造したりせず、HEAD内にチョコチョコっとJavaScriptを加えるだけで導入は超簡単。
過去ページのサムネイル画像(大きな画像にリンクしてあるもの)までポップアップに対応してくれるのが大きな魅力です。

FancyZoom

配布ページ:FancyZoom

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

jQuery版が以下サイトで紹介されています
Fancy Zoom by John Nunemaker
Opensource - AJAX - Jquery Fancyzoom
こちらはGPLライセンスのようです。

設置の仕方

  1. ダウンロードした画像を自サーバ内にアップロード。
  2. FancyZoom.js内の44行目(var zoomImagesURIの行)で画像フォルダへパスを通す。
  3. FancyZoom.js、FancyZoomHTML.jsの2つのファイルをアップロード。
  4. 各ページでJavaScriptを呼出し、<body>タグ内から関数onload="setupZoom()"を呼び出す。

上記の手順で画像へリンクを貼った<img>タグが、全てブラウザ内でポップアップするようになります。

ポップアップしたくない場合
<a href="../big.png"><img rel="nozoom"src="../small.png" /></a>
自分用メモ: FancyZoomの改造してたら、nozoomタグが効かなくなった。
このサイト内の画像を別窓表示させたく無い場合はrel="lightbox"と指定する。

画像にタイトルを付けたい場合
<a href="../big.png"><img  title="画像のタイトル" src="../small.png"/></a>

JavaScriptのアップロード、画像をフォルダ単位で管理出来るサービスならブログでも設置は簡単です。(Livedoorブログなどは難しいかも)

サイト内に他にもJavascript onloadがある場合

Javascript onloadが複数存在する場合、後者が優先され上手く作動しない場合があります。そんな場合の解決策が以下のサイトに記されています
Javascript onloadが複数ある場合の対処法 ~FancyZoomとCubeブログシールを共存させる : ブログ・カスタマイズ徒然記

FancyZoom 1.1はIEで作動しない?

導入にあたり、IEでは作動しない、モタつく、カクつく、などの評判を聞き色々テストしてみたのですが、サブ機のPentiumM1.6Ghz 512mb(XP SP3)のIE7でも気になるほどの速度低下は見られなかったので導入しました。

IE6の場合はかなり速度低下が見られましたが、それでも別窓が開く鬱陶しさや「戻る」ボタンで記事ページに戻る手間を考えるとFancyZoomを導入した方がWeb閲覧はスムーズに行える気がします。

(とはいえIEではFirefoxを使用した場合の半分くらいの速度しか出ないようです。)

FancyZoomのIEでの表示速度はサイトによってマチマチ?

FancyZoomを導入されたサイトさんをアチコチ見て回っていますが、IEでも十分な速度でポップアップ表示されているサイトさんがいくつかあります。どういう改造をされているのかただいま勉強中。

おまじない1
<meta http-equiv="Imagetoolbar" content="no" />
の一文を入れておくとIEでの表示が多少マトモになるようです。
IE6~7での表示速度は当方でも改善されました。

IE8で素早く表示されているサイトさんはどういう仕掛けをされているんだろう・・・?

また、IE、Firefox、Opera関係なく、Shiftキーを押しながら画像をクリックした場合はポップアップがもの凄くスローモーションになるみたいです。

個人的あとがき

PCのメイン環境をXPからWindows7に移行して、WindowsのGUIが大きく変化しました。このサイトのメイン記事の横幅は520ピクセル程度なのですが、Windows7の画像を使って解説を行おうとするとこの横幅では殆どの画像を縮小表示せねばならず、簡単に画像のポップアップ表示を行えるプログラムを探していました。

FancyZoomはHEADにJavaScriptを加えるだけで記事本文を書き換える必要がなく本当に助かります。



次のページへ
前のページへ
画像をスムーズに拡大ポップアップしてくれるスクリプトFancyZoom 1.1
TOPページへ

コメント(多忙中のため休止中) C[0] T[0]

人気ブログランキング
このブログを応援する・このブログに寄付する
mona:MEmMcKYAWfdX1r3XkoWBoweJTSjtDgdqRo
btc :1342ndtQDJ3NKkTw1BfP8AD4xMy8NJ4kWb


広告&サイト内おすすめページ

 

関連記事(ぜんぶ見る>> Web作成支援
逆アクセスランキングについて
拡張子を一括変更できるフリーソフト:極窓とNamery
【超メジャー】FTPクライアントのフリーツールFFFTP
IPアドレスからホスト名を取得(その逆も)できるフリーソフト、IP2HOST PLUS

※コメント欄の一時休止中につき、Monacoin企画も休止中です。
簡単!4ステップでふるさと納税 a8
次のページへ
前のページへ

更新日 2013/07/24(2009年09月公開)このページはリンクフリーです

カテゴリ(メニュー)
このページ

Amazon

Amazon 日替わりタイムセール
サイト内検索
Special Thanks (TOP15)

Amazon
リンク集
楽天市場/ブログランキング
a8 a8