Home > Blog > サムネイルから元画像を拡大するFancyZoom

サムネイルから元画像を拡大するFancyZoom

サムネイルがクリックされると元画像を拡大されて表示するJSライブラリはいくつもありまして、Lightbox JSが一番普及している模様です。亜流というか、派生した同類のライブラリも沢山ありますし、WordPress界隈でも実装を簡単にするプラグインが大量にあります。でもどうしてもなじめなくて導入を見送っていました。

一長一短な有名どころ

この間の雪

設定にもよるのかもしれませんが、LightBox JSで表示されるときのあの「モッサリ」とした感じがどうしても受け付けなくて、イライラしちゃうんです(苦笑)。なのでウチでは長いことHighSlide JSを使っているのですが、これは書き込むタグが面倒くさいし、たとえば導入前のエントリの写真に適応させようと思ったら過去エントリ全部直さないとならないので、結構手間なんですよ。

先々のことも考えたときに、もう少しお手軽に使えるツールはないものかと探していたらこんなのを見つけました。del.icio.usユーザすごすぎ。試しに画像をクリックしてみてください。

導入もお手軽に

  1. 配布元からダウンロードしてきたアーカイブを解凍する。
  2. 解凍してできた2フォルダをルートディレクトリに転送する。
  3. ページの<head>〜</head>の間に以下を記述する。注意:blogで使う場合http://example.com/から記述したほうが良いでしょう。
    <script src="/js-global/FancyZoom.js" type="text/javascript"></script>
    <script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
  4. ページの<body>要素にonload="setupZoom()"を追加する

画像へのリンクは
<a href="元画像URL"><img src="サムネイル画像URL" /></a>
で、特に何か特別なことをする必要もなく普通に動いてくれます。1

ついでに前述の手順を自動でやってくれるWordPressプラグインがあれば楽なんですけどね。ぜいたくは言わないでおきます(^^;。

  1. 導入手順さえきちんとしていれば、ですが。 [Back]

コメント:0

コメントフォーム
Remember personal info

This blog is kept spam free by WP-SpamFree.

トラックバック:0

このエントリーのトラックバックURL
http://topaz-blue.com/2008/02/14/024410/trackback/
Listed below are links to weblogs that reference
サムネイルから元画像を拡大するFancyZoom from Trash can::ver.2

Home > Blog > サムネイルから元画像を拡大するFancyZoom

Tag Cloud
Categories
Archives

Return to page top