« || »

 WordPress用Highslide JSプラグイン(ak-hs)

2009. 4. 11 (土)
タグ: ,

WordPressのエントリ内画像リンクをHighslide JSに対応させるプラグインです。
他の方の同様のプラグインも既にいくつか公開されていますが、私は必要最低限のものでよかったので自作しました。
Wordpress 2.7.1日本語版で動作を確認しています。

zipファイルを解凍すると、以下のファイルが生成されます。

/ak-hs/
  |-- ak-hs.php
  |-- ak-hs.css

Highslide JS自体は同梱していませんので、適宜ダウンロードしておいて下さい。

ダウンロード手順(現在の遷移です。将来的に変わる可能性もあります。)
Highslide JSのトップページ右 「GET HIGHSLIDE Download!」をクリック
・「GET THE ZIP PACKAGE」で最新版(私が現在使っているのは4.1.2)
を選択して「Download now!」をクリック
・ページ下の「Highslide Download」の「Yes」ボタンをクリック

ダウンロードしたファイルを解凍し、その中のhighslideディレクトリ内にある
・highslide.js
・highslide.css
・graphicsディレクトリ(中身ごと)
を、ak-hsディレクトリ内に以下のような階層状態になるようにコピーします。

/ak-hs/
  |-- ak-hs.php
  |-- ak-hs.css
  |-- highslide.js
  |-- highslide.css
  |  
  |-- /graphics/
        |-- fullexpand.gif
        |-- loader.white.gif
        |-- zoomin.cur
        |-- zoomout.cur
        |  
        |-- /outlines/
              |-- drop-shadow.png

(ak-hsプラグインで使用している必要最小限のファイルのみ記載しています。不要なファイルは削除してもしなくても、どちらでも構いません)

ak-hsディレクトリをサーバ上のWordpressのプラグインディレクトリへアップロードし、プラグイン管理画面でak-hsを有効にすれば設定完了です。

このプラグインでは、使用するHighslideのアウトラインはdrop-shadowに固定になっています。
他のアウトラインを使いたい場合は適宜変更して下さい。

ak-hs.php内の主な設定

hs.outlineType = ‘drop-shadow’;
使用するHighslideアウトライン

// hs.showCredits = false;
Highslideのクレジットの非表示設定
(このプラグインでは表示するようにしていますが、highslide.js内を見ると you can set this to false if you want とあるので、消したければ消しても構わないようです。消したい場合は行頭のコメントを削除すれば非表示設定が有効になります。)

hs.wrapperClassName = ‘wide-border’;
highslide.css内の幅広枠系スタイル使用

hs.lang.restoreTitle = ‘クリック:画像を閉じる / クリック&ドラッグ:移動’;
hs.lang.fullExpandTitle = ‘実サイズに拡大’;
hs.lang.focusTitle = ‘前面へ移動’;

マウスオーバー時のメッセージ

ak-hs.cssは、highslide.cssに対するオーバーライド設定です。

エントリ内の画像リンクへのHighslideの反映のさせ方に特別な方法はありません。
これまで通りの画像の挿入方法で、ak-hsプラグインが有効の場合のみHighslide対応に置き換わります。

動作サンプル
imgp8496 imgp8502

« || »

3 Responses to “WordPress用Highslide JSプラグイン(ak-hs)”

  1. WordPress 記事の画像リンクを編集せずにHighslide化するプラグイン

    WordPress 記事の画像リンクを編集せずにHighslide化するプラグイン
    導入するだけで、古い記事を書き換えることなく画像リンクが全て、Highslide化しました。^^

  2. はじめまして

    以前にトラックバックさせて頂いております。コメントが遅くなってスイマセン。

    先日残っていたhighslideタグを画像リンクに置換えました。これで、携帯StyleでコンバートされたWebで画像が参照できるようになりました。標準のタグはやはりいいですね。有用なプラグインありがとうございました。

  3. コメントまで残して下さいましてありがとうございます。

    プラグインの使用を中止したくなった場合の手間を考えて
    独自の記述を書き込む方法は避けたのですが、
    他のプラグインの動作に影響を与えにくいというメリットもあるんですね。