ホーム > タグ > JavaScript

JavaScript

サムネイル拡大用スクリプトをFancyzoom→Fancyboxにした

またちょっと気まぐれが発動しました(^^;

真面目な話、サムネイル拡大するスクリプトはFancyzoomを気に入って使ってたのですが、一部表示が崩れることがあり、そのせいでテーマ選びが大変だったのです。でもLightboxは、表示するまでの「ニュルッ」という間が大嫌いなので避けてました。

過去記事のimgタグに修正を加えすに拡大表示できる物、という条件で探したところ、Fancyboxというスクリプトを発見。どんな風に動くのかは先日のドラクエ展の記事で試してください。

勝手にグループ化されるのが気になりますが、最近は大量の写真もないし、許容範囲と思っております。

で、「スクリプトをDL→テーマに記述」をすると大変なので、プラグインを導入します(笑)。

インストール→有効化するだけでFancyboxが動きます。楽ちん(^^)

FancyZoomをWordPressへお手軽に導入できるプラグイン WP FancyZoom

当サイトでは画像拡大にFancyZoomを導入しております。動作させるときに手間をかけなくて良い、マークアップがきれいにできる、という利点があります。ただ、WordPressで使うときには、テーマファイルの数箇所に修正を加えないと動かないので、テーマを頻繁に変更する場合にはちょっと手間でした。なので、プラグインを探し続けていたんですが1、やっと見つけました。試しに何もしていないテーマ+プラグインでテストしてみたら画像拡大が動いて感動です(笑)。

  • WP FancyZoom WordPress Plugin ? Live Granades

注意:WP FancyZoomというプラグインはGPLで配布されていますが、元のスクリプトであるFancyZoomは商用利用は有料です($39)。

License

FancyZoom is totally free for your non-commercial website.

In a bit of an experiment: if your website is commercial (i.e. makes you money), you can license FancyZoom for $39 per site, a one-time fee. Instantly add nice image zooming to your site. Click here to instantly and securely buy a license.

cabel.name: FancyZoom 1.1

導入手順

ここを修正

  1. プラグイン配布元からwp-fancyzoom.zipをダウンロードして解凍する。
  2. 解凍して出来たwp-fancyzoomフォルダをwp-content/plugins/へFTPでアップロードする。
  3. 管理画面でプラグインを有効にする。
  4. (1〜3で動かない場合)管理画面の設定→WP FancyZoomを開いて、プラグインまでのパスを指定する。(追記:blogのURLとWordPressのURLが異なる場合はhttp://example.com/から指定しないと、Topページ以外で動かないようです。)

追記あり。画像復活。

  1. 作れるだけの技量はないので(^_^; [Back]

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

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

全文を読む

Home > タグ > JavaScript

Tag Cloud
Categories
Archives

Return to page top