• Home » java script » 「Highslide JS」　カスタマイズ　各種設定方法

2008

5/10

「Highslide JS」　カスタマイズ　各種設定方法

Last modified: 2008年6月5日 （木）　 am 12時23分
Posted by jun  Published in java script

▼


せっかく設置したのだから 「Highslide JS」 の使い方を、それなりにマスターしようと頑張っていると　・・・カスタマイズ方法のページを発見！！　(*ﾟ oﾟ*) オオー！　・・・「 nlog(n) 」様

ノーマルの「highslide.js」には、なんと含まれていない機能があるとういう・・・知らなかった・・・だから「highslide-full.js」というのが一緒についていたのか・・・σ(^◇^;)ヒヤアセ
と、いうことで 「highslide-full.js」 を使えば（<head>で読み込ませれば）、すべての機能が使えるわけですが・・・サイズがあまりにもでかすぎる（70ｋB）・・・そこで必要な機能だけを、含ませたものを作成できるページが作者様のサイトにあるらしい　ｏ（＾＾ｏ）（ｏ＾＾）ｏ　おおおぉ！！

 
早速、「 nlog(n) 」様の実例ページを参考に２種類のカスタマイズをしてみる・・・

・・・と、その前に下記２種類のカスタマイズをするには標準の「highslide.js」では出来ないので、こちらの方法で「改造 １」の場合は「Advanced positioning」を、　「改造 ２」の場合は「Transitions」を、それぞれ追加するか、または「highslide-full.js」を使用いてください。

カスタマイズ 「highslide.js」 作成方法　・・・クリック！




やり方としては、「 nlog(n) 」様に詳しく書いてあるので簡単に書きますと・・・
  1. リファレンスページで、欲しい機能を探す。
    • ・・・英語がダメな自分にはつらい・・・(TOT)
  2. コンフィギュレータページで右側に並んでいる、欲しい機能にチェックを入れる。
    • 「Pack it!」にチェックを入れると圧縮されてサイズが半分になる・・・しかし、中身は読めないものになってしまうのでご自由に選択してください。
    • １番がよくわからない人は（自分です。）このページですべてにチェック入れてから「Update」をクリックして中央の「Highslide JS core」の画像 & 「Highslide HTML extension」のhtml系のものをそれぞれ表示させてみて、欲しい機能を探した方がいいかも・・・それぞれにある英語の説明文の「"」で括ってあるものが、右側で選択する機能名です・・・多分　(-_-;)
  3. 「Update」をクリックして更新する。
  4. 「Download」をクリックして、ファイルをダウンロードする。
  5. ダウンロードしたものを今まで使っていた「highslide.js」と、入れ替える。
と、こんな感じで必要な機能だけを、含ませた「highslide.js」を作成するそうです。


例　：
「改造 １」の「Advanced positioning」と、「改造 ２」の「Transitions」を追加する場合は、上記の「2.」で
highslide.JPG

こんな感じにチェックを入れて
「Pack it!」を選択し
「Update」クリック
「Download」クリック
「保存」
 



※下記すべてのカスタマイズについてのことですが、設定方法は<head>間に書き込んですべてに適用させる方法です。
個別に指定したい場合は、こちらを参考にして変更してください。

個別に指定する場合　・・・クリック！






個別に指定する場合の例

<script type="text/javascript">
hs.dimmingOpacity = 0.50;
hs.dimmingDuration = 25;
</script>
の場合は、上記の<head>間は必要ないので記述しないで、下記のように個別に記述します。
<a onclick="return hs.expand(this, { dimmingOpacity: '0.50',dimmingDuration: '25' })" class="highslide" title="画像のタイトル" href="リンク先の画像"><img src="サムネイル画像のアドレス" /></a>
上記のように複数の場合は真ん中を「,」で区切って下さい・・・なんとなくわかりますよね？　・・・ちなみに、このページのサンプルはすべて個別指定されていますので、ソースを見ていたければ・・・（＾∀＾2）、
 



背景を半透明にする設定　「改造 1」

（￣□￣；）！！　こ・これは！！　・・・初めて「Highslide」を使ったときにやって見たいと思ったことではないですか！！
これは絶対やらなければ！！(゜゜)(。。)(゜゜)(。。)ウンウン　と喜びながらチャレンジ！！
hs.dimmingOpacity = 0.50;<br />hs.dimmingDuration = 0;<br />で指定してあります。<br /><br />「IE6」の皆さん２回目もちゃんと背景表示されますか？　(￣ー￣; ヒヤリ<br />



サンプル
 

 <head>間にすでに記述してある「highslide」の「script」部分に下記の黄文字を追記
<script type="text/javascript">
hs.dimmingOpacity = 0.50;     // 透明度を設定　（0.00～1.00で指定）
hs.dimmingDuration = 25;      // 背景の切り替わる時間を設定　（単位は ms）
</script>
※「highslide.js」のバージョンが3.3.11以前の場合は、「hs.dimmingDuration」の指定は「IE6」でバグがあるらしいので、最短で「25」を指定してください。それ以降は「25」の倍数で指定！　・・・それ以外の指定をすると、1回目しか背景が変わらなくなるそうです。
※現在の最新バージョン3.3.18では、自分が試した時は「0」に設定しても「IE6」で2回目以降もちゃんと切り替わりました。　修復されたようです・・・多分

そして、スタイルシートに下記を追記
.highslide-dimming {
position: absolute;
background: black;
}
もちろん、背景色は黒でなくても構いません。　（＾∀＾）


やったよ！！　これで完成だよ！！
ｏ（＾＾ｏ）（ｏ＾＾）ｏ　おおおぉ！！
 ・・・と喜んだのも一瞬でした・・・設定後、色々表示テストをしていたら問題点（自分的に）が浮上しました・・・(TOT)
何と、複数表示が出来なくなってしまうのです！！　これでは「Highslide JS」の最大のメリット（自分的に）の2個のうち1個がなくなってしまう！！　それではあまりにも、記述の大変さのデメリット（自分的に）の方が目立つ・・・ちなみにもう一個のメリットはドラッグで移動できることです。　（＾∀＾2）、

・・・ちなみに何故できなくなるかと言えば・・・この設定の場合、周りの透明背景をクリックしても閉じることができるようになるからです・・・つまり、次を開こうとすると・・・閉じる！！　ちなみに・・・このページ上で試せますが、透明背景のものを最後に表示する場合は可能です。（笑）

・・・喜びが大きかった分、かなりショックでした・・・　｡･ﾟﾟ･(×_×)･ﾟﾟ･｡　仕方がないので、使うときは単品表示の時のみになりそうです・・・でも単品表示の時は、「Lightbox」使ってるんだけどね・・・ﾍ(__ﾍ)☆＼(^^;)オイオイ


画像を中央に表示させる設定　「改造 2」

拡大される画像を諸事情により？真ん中に表示させたい時もあるでしょう・・・そんな時はこれ！！
このように、他のサンプルと違い<br />どの位置でクリックしても<br />画面中央に表示されます。<br />



サンプル
 

 <head>間にすでに記述してある「highslide」の「script」部分に下記の黄文字を追記
<script type="text/javascript">
hs.align = 'center';
</script>
・・・これまた、問題点としては複数表示の場合に使うとすべてが中央に重なって見づらい・・・当たり前ですが　（笑）
これも、単品表示での使用が良いでしょう。






そしてその後、自分でもこの「Highslide JS」のリファレンスページを参考にしてカスタマイズをがんばってみた。

拡大表示の始点を指定する設定

サムネイル画像のどこの角を始点にして大きくなるかを設定できます。
'bottom left'で指定してあります。<br />この指定だとサムネイル画像の<br />左下を始点に表示されます。<br />



サンプル
 

 <head>間にすでに記述してある「highslide」の「script」部分に下記の黄文字を追記
<script type="text/javascript">
hs.anchor = 'bottom left';
</script>
上記の場合、サムネイル画像の左下を始点に拡大します。　（　hs.anchor = 'right';　など1個の指定でもOKです。）


キャブションを簡単に使用する設定

通常では・・・
<div class="highslide-caption">ここに、キャプションをいれる。</div>
と、リンクの後に記述することでキャプションが入る・・・これは少し面倒くさい・・・そこで、下記の設定をすると簡単になる。・・・サンプルは特にないですが、このページのサンプルすべてが「其の壱」を使用しています。

「其の壱」
<head>間にすでに記述してある「highslide」の「script」部分に下記の黄文字を追記
<script type="text/javascript">
hs.captionEval = 'this.thumb.alt';
</script>
そしていつもの画像リンクを作成し、サムネイル画像の方の「alt=""」にキャプションに表示させたい文章を記述。
<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス" title="画像のタイトル"><img src="サムネイル画像のアドレス" alt="ここに好きな文章を記述<br />すると、記述した内容が<br />キャプションに表示されます。" /></a>


「其の弐」
上記とはまったく別の方法です。　（上記の<head>間はいりません。）
<a class="highslide" onclick="return hs.expand(this, { captionText: 'ここに好きな文章を記述<br />すると、記述した内容が<br />キャプションに表示されます。' } )" href="リンク先画像のアドレス" title="画像のタイトル"><img src="サムネイル画像のアドレス" /></a>
赤文字がポイントです。　この場合、指定した画像のみが効果を得ます・・・つまり、単品指定バージョン。


・・・この上記２種の、キャプション設定の問題点としては、これでキャプションを使用すると通常のキャプションが使えなくなります・・・つまり、キャプション内コントロールバーは使えなくなります。　σ(^◇^;)ヒヤアセ
さらに、優先順位を書いておきますと「其の弐」が一番優先されるようです。　次に「其の壱」　そして「通常キャプション」になるようです・・・多分　σ(^◇^;)ヒヤアセ


フェードイン　フェードアウト　の設定

拡大表示される時と閉じる時のエフェクト効果です。
どうですか？　この表示方法は？他のサンプルの表示と比べてみてください。<br />これを使う場合、画像周りの幅が広い方が効果的だと思います。



サンプル
 

 <head>間にすでに記述してある「highslide」の「script」部分に下記の黄文字を追記
<script type="text/javascript">
hs.transitions = ['fade'];
</script>

単品指定バージョンの場合
<a onclick="return hs.expand(this, { transitions: ['fade'] })" class="highslide" title="画像のタイトル" href="リンク先の画像"><img src="サムネイル画像のアドレス" /></a>
上記の赤文字の部分がポイントです。　この場合、指定した画像のみが効果を得ます。


キャプションのスライドスピードを変える設定

・・・そのままですが、キャプションを入れたときの下にスライドしていく速度を変更する方法です。 残念なことにサンプルはないです。　これだけ、個別指定が出来ないようです・・・(T^T)　全てに適用しても、意味無さそうなのでやめました・・・σ(^◇^;)ヒヤアセ

 
 <head>間にすでに記述してある「highslide」の「script」部分に下記の黄文字を追記
<script type="text/javascript">
hs.captionSlideSpeed = 0.75;      // スライドする速度を指定　（単位は ms　）
</script>
デフォルトは「1.00」です。　250ms（0.25）間隔で指定します。
・・・数字が小さい方がスライドの速度が遅くなります。　?(゜_。)?


マウスオーバーテキストの日本語化

「highslide.js」の圧縮版を使用していない場合は、「highslide.js」ファイルの44行目あたり
restoreTitle : 'クリックで閉じ、ドラッグで移動。方向キー「→」で次の画像、「←」で前の画像。',
loadingText : 'ロード中...',
loadingTitle : 'クリックでキャンセル',
loadingOpacity : 0.75,
focusTitle : 'クリックで前に移動',
allowMultipleInstances: true,
numberOfImagesToPreload : 5,
captionSlideSpeed : 1, // set to 0 to disable slide in effect
padToMinWidth : false, // pad the popup width to make room for wide caption
outlineWhileAnimating : 2, // 0 = never, 1 = always, 2 = HTML only
outlineStartOffset : 3, // ends at 10
fullExpandTitle : '実際のサイズに拡大',
fullExpandPosition : 'bottom right',
黄文字のところを、こんな感じにすると日本語で表示されます・・・自分の場合、簡単な英語はそのままにしましたが・・・「highslide-with-html.js」を使用している場合も同様です・・・ちなみに、下記の圧縮版の方法でも設定可能です。
※日本語が含まれているので（あたりまえですが・・・）、保存の時の文字コードは、対応している文字コードで保存してください。　「utf-8」 とか 「euc」 など・・・
ちなみに、ここの設定でライセンス表示を消せてしまいますが、ライセンス違反になるのでやってはいけません！！(⌒^⌒)ｂ　うん


「highslide.js」の圧縮版を使用している場合は、ファイルが読めないため下記の設定しかありません・・・（＾∀＾2）、
<head>間にすでに記述してある「highslide」の「script」部分に下記の黄文字を追記
<script type="text/javascript">
hs.fullExpandTitle = '実際のサイズに拡大';
hs.restoreTitle = 'クリックで閉じ、ドラッグで移動。方向キー「→」で次の画像、「←」で前の画像。';
hs.focusTitle = 'クリックで前に移動';
hs.loadingText = 'ロード中...';
hs.loadingTitle = 'クリックでキャンセル';
</script>
こんな感じにすると、日本語で表示されます。




以上、自分が理解できたのはこんなところでしょうか・・・英語わからないからね～(o^v^o)えへ
また面白そうなのがあったら追記して行こうと思います。　（＾∀＾）

人気度 : 54 %

「20点」　まったく役に立たなかったよ　。。｡･ﾟﾟ･(＞Д＜；)･ﾟﾟ･｡。。。「40点」　ちょっとだけ役に立ったかな　(T^T)「60点」　まぁ～まぁ～の記事だね　v（＾∀＾）v「80点」　良い記事だけど、あとちょっと・・・　(ノ´▽｀)ノオオオッ♪「100点」　探していたのはこの記事だ！！　(*ﾟ oﾟ*) マジっすか！？ (1 投票, 平均値/最大値: 5 / 5)

Previous Top



関係のある記事

No user の書き込みがあります

Subscribe to this post コメント RSS or トラックバック URL
コメントほしぃ～よぉ～　σ(^◇^;)

 お名前 (* 必須)

 メールアドレス (* 非公開)

 ウェブサイト (* 任意)