WordPressでHighSlideを使う

画像サムネイルをクリックしたときに、画面遷移せずに元のサイズの画像を表示させたほうが使い勝手がいいです。

HighSlide JSとは

そのためのJavaScriptプラグインで、HighSlide JSというのを気に入って使っています。

HighSlideはドラッグ可能な画面の拡大ダイアログ、キャプション、キーボードによるナビゲーションなどをサポートした高機能なサムネイル・ギャラリーを作成できるjavaScriptライブラリです。

画像にキャプションをつけられること、画面にあわせた拡大画像を表示してくれるところが優れています。今でも開発が続けられており、以前に較べると導入しやすくなりました。

ライセンスがちょっと微妙なのですが個人ではフリーライセンスなものの、収益のある宣伝サイト、政府系サイト、WEBアプリケーションでは有料のコマーシャルライセンスの取得を求めています。

個人ブログのWordPressへの組み込みは無料でしかもプラグインを入れるだけという簡単さなので、おすすめです。

WordPressにHighSildeを組み込むプラグイン

実際にWordPressでHighSlideを使うにはHighSlideの公式サイトで紹介されていた「Highslide Integration in WordPress」が良かったので紹介します。

他のプラグイン同様、ダウンロードしてwp-contentのPluginsフォルダに入れてください。後は管理画面でプラグインを有効化するだけです。

後は普通にWordPressのメディアライブラリからサムネイル画像を投稿に挿入するだけでHighSlideの機能を使って表示されます。
HighSlide本体をダウンロードしたり、アップロードしたディレクトリに合わせて設定ファイルを書き換える手間もありません。カンタン!
[html]
<a href="http://www.mikame.net/pr/wp-content/uploads/2012/08/render_002.png">
<img src="http://www.mikame.net/pr/wp-content/uploads/2012/08/render_002-150×150.png" alt="" title="render_002" width="150" height="150" class="alignnone size-thumbnail wp-image-136" />
</a>
[/html]
WordPressで画像を入れたときのHTMLのコードは上のような単純なリンク付のサムネイル画像です。しかしちゃんとHighSlideで開きます。
画像を開くとキーボードのカーソルキーを使った操作が有効になります。

カスタマイズ

WordPressの設定に「HighSlide Integration」ができていますので、ここで設定ファイルを編集できます。
とりあえずコントロールボタンは不要でしたのでuseControlsをtrueからfalseに変えておきました。
[javascript]
// HIDE CREDITS
hs.showCredits = false;

// SHOW IMAGE TITLES AS CAPTIONS
//hs.captionEval = ‘this.thumb.title’;
//hs.captionOverlay.position = ‘below’;
hs.headingEval = ‘this.thumb.title’;

// DROP SHADOW
hs.outlineType = ‘rounded-white’;

// USE GRAPHICAL EFFECTS
hs.transitions = [‘expand’, ‘crossfade’];
hs.fadeInOut = true;
hs.expandDuration = 150;
hs.restoreDuration = 150;

// SHOW SLIDESHOW CONTROLBAR
hs.addSlideshow({
interval: 5000,
repeat: false,
useControls: false,
fixedControls: ‘fit’,
overlayOptions: {
className: ‘large-dark’,
opacity: ‘0.75’,
position: ‘bottom center’,
offsetX: ‘0’,
offsetY: ‘-25’,
hideOnMouseOut: true
}
});

// DIMM WEBSITE WHEN IMAGE IS OPEN
// hs.dimmingOpacity = 0.75;

// SHOW CLOSE-BUTTON
// hs.registerOverlay({
// html: ‘<div class="closebutton" onclick="return hs.close(this)"></div>’,
// position: ‘top right’,
// fade: 2
// });
[/javascript]

HighSlideのプロパティの詳細についてもっと知りたい人はHighslide JS API Reference(英語)がありますがHighslide Editorでデザインを変えてみたほうが分かりやすいかもしれません。

キャプションやヘッダを表示するにはhighslide-captionクラスのspanを加える方法(改行OK)、他にaタグのtitle、または画像のtitle,alt属性を設定によってキャプションまたはヘッダにする方法(改行できない)があります。
WordPressのcaptionタグとは別物ですので注意してください。

キャプションの表示がうまくいかなかった

今回テストしたのではキャプションの文字がボーダーの外にでてしまう問題がありました。
これが解決できるといいのですが回避する方法があるかもしれません。

特に手間も無くサムネイル画像の使い勝手が向上することを考えると、サムネイル画像しか使わないといったブログでも導入しない手はないでしょう。

 なにかコメントをどうぞ