画像のポップアップ表示などをページ移動したりページとして別窓で開かず
綺麗に表示してくれるスクリプト MT5.12-jQuery lightBoxを WordPress でも設置していますが
Highslide JS も設置してみたお話。

以前はファイルを全てダウンロードし設置していたのですが、現在は自分の好みの設定でダウンロードできるようになってました。

Highslide JSへ行き左メニューから「Editor」をクリックします




「Get started!」をクリックするとエディタが起動します
左側「Options」でお好みの内容に設定します
設定しながら右側の「Preview」確認できます


全て設定完了後、右側上にあるメニュー内の「Publish」をクリック


ライセンスに同意?っぽい(英語ワカラナイ)「YES」をクリック


「Download zip archive」をクリック
設定した内容のファイルをダウンロードできます。



「highslide-custom.zip」を解凍します

使用するファイル
highslide(フォルダ)
├ graphics(フォルダ)内全て
├ highslide.css
├ highslide-ie6.css
└ highslide.js 他全ての ***.js
上記をサーバーへアップロードします(アップロード先は任意)
テーマフォルダ内に「js」フォルダを作成し「highslide」をアップロードしてみました

テーマへタグを設置
「header.php」の </head> より前に下記を追加します

header.php
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/js/highslide/highslide.css" />
<!--[if lt IE 7]><link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/js/highslide/highslide-ie6.css" /><![endif]-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/highslide/highslide.config.js" charset="utf-8"></script>
記事内画像aタグへ下記を追加
onclick="return hs.expand(this)"
<a href="元画像URL/kyanamen2.jpg" title="きゃなめん" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="サムネイル画像URL/kyanamen2-150x150.jpg" alt="Kyanamen" title="きゃなめん" width="150" height="150" class="alignnone size-thumbnail wp-image-22" /></a>
Kyanamen

これで完了です。
上記設置方法を「小粋空間さん」で詳しく説明されていますので参考に。
Highslide JSの動作やスタイルを簡単に設定できる「Highslide Editor」の徹底解説
小粋空間さんの HighSlide タグページ

2012/01/16 Javascript
2012/01/19 ,
Comments(0)
関連記事