HOME > Wordpress > 【WordPress】画像がスムーズに拡大するhighslide.JSのワードプレス導入がかなりラクになっていたという話
公開日:2011.5.30
この記事は約4分で読めます。

【Wordpress】画像がスムーズに拡大するhighslide.JSのワードプレス導入がかなりラクになっていたという話

この記事は最終更新日から8年以上経過しているため現状にそぐわない可能性もあります。

以前、画像をクリックするとぎゅわーんと拡大されるエフェクトを見て”これ使いたいなぁ”と調べてみたところ、それが「Highslide.JS」というものでした。

でも導入がちょっと面倒くさそうだったのでなんとなく敬遠していたんです。

最新のHighslide.JSはエディターで一気に設定を仕上げてくれるらしいですね。

ということで再度ワードプレスに導入してみようと試みてみました。

実際に当ブログで使用している「Highslide.JS」の各種設定はそのエディターを使って仕上げたものです。

Highslide.JSは画像だけでなくHTML文書やFlash、Ajax、ギャラリー表示用としても使えます。

しかし今回は単純に画像を拡大するだけの利用に絞ってのみご説明していきます。

SIRIUSレビューイメージ画像

Highslide.JSにアクセス

Highslide.JS ページを開き、エディターを呼び出します。

このページのみHighslide.JSが読み込まれているので画像をクリックするとず~んとズームアップしますよ。

highslideページ画面

Generalタブは言語と画像枠の設定

highslide General画面

「Gallery」と「HTML」タブは今回使わないのでデフォルトのままです。

Styleタブは見た目の細かな設定

highslide Styleタブ画面1

highslide Styleタブ画面2

highslide Styleタブ画面3

Behaviorタブは画像の動きや表示に関する設定

当ブログでは 下画像2番目の設定Alignmentで”Thumbnail top left”つまり「サムネイル画像の左上を起点に拡大」を指定しているんですが、なぜかその通りに動いてくれません。

その原因がずっとわからないでいたんですがようやく解決の運びとなりました。

(下の方にある「ダウンロードしたファイルのチェック」を参照のこと)

highslide Behaviorタブ画面

Overlaysタブはキャプションなどの表示設定

highslide Behaviorタブ画面

Publishは設定の書き出し

highslide Publishタブ画面

サイトへの書き方例

highslide 書き方画面

ダウンロードしたファイルのチェック

ダウンロードした zipファイルを解凍した「highslide」フォルダの中にはいくつものファイルが入ってます。

その中の”highslide.config.js”を開くと以下のような記述で始まってるかと思います。

ここにエディターで設定した値が記されてます。

上記画像フォルダへのパス指定「hs.graphicsDir = 'highslide/graphics/';」の部分ですが、このままでいると画像をクリックしたときに”loading”の文字が延々と回り続けて一向に進まなくなります。

ここは”http://~”で始まる「絶対パス」に変える必要があります。

画像の拡大スタート位置ですが、デフォルトのままなら「Auto」になります。

当ブログでは「サムネイル画像の左上を起点に拡大」させたかったのでAlignment の設定で「Thumbnail top left」を選択してます。

しかしこれが見事に反映されない。

まあそれほど大きい問題でもなかったのでほっといたんですが、この記事を書くに当たって再度highslide.config.jsをよ~く見ていたら「ん?」と感じた箇所があったんです。

ダウンロードしたばかりのhighslide.config.jsはこんな風になってます。

この中で拡大画像の表示位置の設定は「hs.anchor」の部分だと思われるんですが、ここだけ末尾に「;」がついてなくて「'top-left'」で終わっているんです。

そこでスクリプトに関して全くの素人が出した答えは…ここに「;」をつけたらうまくいくかも?

果たして結果は…ビンゴ。

思った通りの動きになりましたよ。

これはバグなんでしょうか。
私にはさっぱりわかりません。

アップロード

「highslide」フォルダのアップ場所ですが、原文ページではroot上に置けと書いてあります。

しかし当ブログでは自作テーマフォルダ内index.phpと同じ階層にアップしてみました。

アップするファイルは以下のものだけで今のところ充分みたいです。

  • graphicsフォルダ
  • highslide.js
  • highslide-with-gallery.js
  • highslide.config.js
  • highslide.css

実際に<head>に読み込むファイルは以下の3つのみでいいようです。

  • highslide.js
  • highslide.config.js
  • highslide.css

HTML本文の書き方ですが、当ブログのように画像拡大のみであれば下記のようにシンプルなもんです。

classに”highslide”を指定してあげます。

エラー

このスクリプトを試す時に一番多かったエラーが"loading"の文字が延々と回って先に進まないという症状でした。

原因は「highslide.config.js」内のパスが絶対パスになってない時。

これ以外に画像パスの記述が間違っていてもこの症状になります。

以上です。

参考サイト

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)