サムネイル画像をJavascriptによって拡大表示するライブラリ。以前導入したLightbox JS v2.0もいいのですがこちらも相当良いです。
highslide-2.2.8.zipをHighslide JSのホームページからダウンロードする。
highslide-2.2.8 Folderができるのでその中の「highslide」フォルダのみJavascript用のディレクトリにアップロード。他のファイルはサンプル用なので不要ですね。
使用するHTMLファイルに、
<script type="text/javascript" src="highslide/highslide.js"></script>
と記述。ウチのJavascriptディレクトリは「/js」なので「highslide/highslide.js」の部分は「/js/highslide/highslide.js」となる。
拡大する画像を表示させるための「div」を
の直後に記述する。「id」属性に "highslide-container" を設定する。ここ忘れやすいので要注意。「cssもjsもリンクも正しく設定したのになぜ？」ってなっちゃうので。<div id="highslide-container"></div>
拡大させる時の<a>の設定は下記の通り。
<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)">
<img src="[サムネイル画像のURL]" alt="..." />
</a>
<img src="[サムネイル画像のURL]" alt="..." />
</a>
まぁ詳しくは毎度お世話になっている「小粋空間」さんに詳細が。まいど。
拡大した画像の左上に表示される「powered by Highslide JS」のクレジットをもう少し控えめにしたいので、cssファイルに、
a.highslide-credits, a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover, a.highslide-credits:hover i {
color: white;
background-color: gray;
}
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover, a.highslide-credits:hover i {
color: white;
background-color: gray;
}
と記述。他のcssの設定は、「小粋空間」さんや「ちょほいとまちなは」さんに書かれていますのでそちらもご参考に。
さっそくこないだの公演の舞台写真を修正してみる。こんな感じに仕上がりました。
参考URL：
小粋空間→http://www.koikikukan.com/archives/2007/01/18-005102.php
ちょほいとまちなは→Highslide JSをMovableTypeに導入してみる
http://youmos.com/news/highslide_js.html
http://www.bayashi.net/archives/entry/2006/000394.html
http://weblibrary.s224.xrea.com/weblog/mt/custom/highslide_jsmov.html
http://vita.qee.jp/archives/2006/12/06-2120.php
（2007/1/22追記）画像を拡大する時に表示される「Loading...」の文字のスタイルを定義し忘れていました。cssファイルに追加。
.highslide-loading {
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
}
display: block;
color: white;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;
}
