Highslide JSの使用方法
Highslide JSの使用方法のメモ。
参考url：
http://www.koikikukan.com/archives/2007/01/18-005102.php
ダウンロードページ：
http://vikjavev.no/highslide/download.php
2008-04-10時点での最新バージョンは3.3.12でした。
１．スクリプトのインクルード設定
</head> の直前に設定します。
<script type="text/javascript" src="http://user-domain/highslide/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
window.onload = function() {
hs.preloadImages();
}
</script>
２．ポップアップ用空要素設定
Highslide JS でポップアップする画像を表示させるための div 空要素を設定します。そして div 要素の id 属性に “highslide-container” を設定します。
<body>タグの直下に記述します。
<div id="highslide-container"></div>
３．タグ設定
まず、サムネイル画像表示用の img タグを書き、それを a タグで括ります。a タグの href 属性には元画像の URL を設定してください。
そして a タグに class 属性 “highslide” と、onclick 属性を追加します。
なお、ユーザビリティを考慮して onkeypress 属性も追加しておくと良いでしょう。
<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="[サムネイル画像のURL]" alt="..." /></a>
他にもこちらを参考にしました。
http://www.koikikukan.com/archives/2007/03/30-003838.php