<script type="text/javascript" src="導入場所/highslide/highslide.js"></script>
上記、js設置場所を記載したスクリプトの後に、
<script type="text/javascript">
<!--
hs.graphicsDir = "導入場所/highslide/graphics/";
window.onload = hs.preloadImages;
//-->
</script>
というスクリプトを<head></head>内に記入すること!
何だか上手く動かなくて、延々ローディングの繰り返し。何でかなぁと思っていたら、WEB上に情報が…。Highslideを初期化するスクリプト(Version: 4.1.4以降のポイントらしいです。)
ただ、別サーバーにUPしていて呼び出していた時は問題なく動いていて、同じサーバー内に置くようになってからの不具合なので、スクリプトだけを他の場所にUPしている場合は発生しないのかも。
Highslide Editorを使ってfullバージョンをDownloadしておくとhighslide-full.jsとhighslide.config.jsだけを読み込ませればたいていのことが出来るので楽です。ということで、以下そうしている前提のお話です。
<a href="***.htm" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: '500' } )" onkeypress="">
リンクさせるテキスト</a>
こうしておくと、HTMLをwidthのサイズで読み込んでくれるので楽。あまり大きく表示させたくなかったので、MUSIC ROOMで使ってます。見る人の環境でサイズを好きに変えてもらえるのが良いですね。
HTMLの<head></head>のscript表記にある下記の部分が画像の説明(Caption)にどの部分を使うかというものを設定してます。(Highslide Editorを使ってfullバージョンをDownloadした場合はhighslide.config.js内に記載があります。)
hs.captionEval = 'this.thumb.alt';
上記だとサムネイル画像のalt属性。'this.thumb.title'だとサムネイルのtitle属性。'this.a.title'だとアンカーのtitle属性です。デフォルトはこの行を削除。そうすると、HTML上で、
<div class="highslide-caption"></div>
で囲った部分が表示されます。この場合、class属性のhighslide-captionが関連づけられているので変更しちゃうと駄目です。
沢山写真があるようなギャラリー的な部分では毎回キャプションを記載していると大変なので、個人的にはalt属性で表示させるのがお勧めです。alt属性は画像が表示されない時やjsが許可されていない時に表示されますから、記載しておくのが標準だと思うので…。尚、表示色等はCSSで.highslide-caption部分を設定。色や配置文字の大きさ等を変えられますよ。
ギャラリーID毎にまとめて写真を表示する事が出来ます。スライドショーでもそのID内だけで繰り返せるので楽ですね。Photoページで使用しています。
<head></head>内には下記スクリプトを記載しておきます。スライドショーとギャラリーの設定です。
<script type="text/javascript">
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
その後、一枚目の写真は、下記のようにします。
<a id="l1" href="写真の場所" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 1 } )" onkeypress="">
<img src="サムネイル写真の場所" alt="画像説明" />
</a>
で、二枚目以降そのカテゴリ内の写真は下記のようにします。
<a href="写真の場所" onclick="return hs.expand(this, { thumbnailId: 'l1', slideshowGroup: 1 , captionText: '画像の説明' })" onkeypress="">
<img src="サムネイル写真の場所" alt="画像説明" />
</a>
一枚目の写真でid指定したものが2枚目の写真のthumbnailIdに対応し、slideshowGroupの数を揃えれば完了です。カテゴリーが増える毎にIDや数を変えればOK。
注意点はキャプション表示。2枚目の写真部分にはcaptionText: '画像の説明'が記載してあります。これをしないと、同じギャラリー内では一枚目(id指定したもの)のキャプションが引き継がれてしまいます。
一個前で話したhs.captionEvalよりも優先度が高いのでキャプションが同じになってしまったり、違う言葉にしたい時等は、こちらを使うと良いです。