++ Highslide JS ++

導入の注意点

<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している場合は発生しないのかも。

HTMLの呼び出し

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よりも優先度が高いのでキャプションが同じになってしまったり、違う言葉にしたい時等は、こちらを使うと良いです。

inserted by FC2 system