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

Total 337 views
この記事の所要時間は約 4分です。

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

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

最新の Highslide.JSはエディターで一気に設定を仕上げてくれるらしいですね。
ということで再度ワードプレスに導入してみようと試みてみました。

スポンサーリンク


 

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

Highslide.JS は画像だけでなく
HTML文書や Flash、Ajax、ギャラリー表示用としても使えます。
しかし今回は単純に画像を拡大するだけの利用に絞ってのみご説明していきます。

イメージ画像

 

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」内のパスが絶対パスになってない時。
これ以外に画像パスの記述が間違っていてもこの症状になります。

以上です。

参考サイト

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




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