ImageCanvas Annex

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

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

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ディレクトリをサーバ上の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対応に置き換わります。

動作サンプル

——–
更新履歴
2009.4.11 v0.1 初版
2019.1.13 v0.2 PHP7対応

Filed under:
Plugin, WordPress by あけび