highslide.jsを使ってみるその１
最近やたらとJavaScriptで遊んでいるんですが、凄いですよね。今まで裏方の処理しか作った事無かったんでprototype.jsやjQuery.jsの存在を知ってから感動しています。
もちろん今までにJavaScriptで処理を書いた事はあるんですが、JavaScriptをきちんと書いているわけじゃなく、コーディングのついでに書いているようなものなので、JavaScript的に言ってよろしくないコーディングをしていたかもです。
でだ、highslide.jsってのを見つけたので使ってみる。highslide.jsってのは画像の拡大プレビューをかっこよく見せるときに使うそうです。
上記URLから早速落としてきて設置。使い方は簡単。
<script type="text/javascript" src="[PATH]/highslide.js"></script>
header部分に書いて、次にイメージ側の記述
<a href="a.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="a_s.jpg" alt="" border=0/>
</a>
JavaScript側は一行記述するだけ
<script type="text/javascript">
<!---
hs.graphicsDir = '[拡大画像が存在するパス]';
//-->
</script>
これでおしまいだよ。凄いね。簡単に画像の拡大プレビューをかっこよくできたよ。感動だよ。
そうそう、ちなみにhighslide.jsのバージョンは4.1.7(latest)版を使用しています。ダウンロードするのに相当迷ったのはここだけの秘密です。
作成後、驚いたのは拡大画像の上にマウスポインタを合わせると、その部分に文字が表示されている事。残念な事に文字が化けているのでなんでかな〜と思ったら、highslide.jsはEUCだったんだけど、私が作ったコードはSJISで、そこで化けていた。文字コードをEUCに修正したら直ったけど「クリックすると元に戻り、ドラッグで移動するです」って「するです」ってめちゃめちゃかわいいやん。
そこで疑問だが、私はhighslide.jsの日本語版をダウンロードしたのでしょうか？そんなつもりは無かったのに、highslide.jsのソースコードを除いて見ると、上記文言がべたでかかれてました。と言う事は、「クリックすると・・・」は別の文言に書き直せるのではと思ってやってみた。
<script type="text/javascript">
<!---
hs.graphicsDir = '[拡大画像が存在するパス]';
hs.restoreTitle = 'Hello, Good Morning. Click Here!';
//-->
</script>
上記のように書いてみたら、拡大画像にマウスポインタを合わせた際に表示される文言が変わりましたよ。おお〜すごいね。おもしろい。にわかJavaScriptしか知らない私にとっては感動です。
今後も続けて行きたいな〜では
追記。
ちなみに、highslide.jsの処理を変える？って言うのかな、するには、
よりも、
<script type="text/javascript">
<!---
hs.graphicsDir = '[拡大画像が存在するパス]';
hs.restoreTitle = 'Hello, Good Morning. Click Here!';
//-->
</script>
の方が、正しいやり方のような気がする。
<a href="a.jpg" class="highslide" onclick="return hs.expand(this, { restoreTitle :'Hello, Good Morning. Click Here!' })">
<img src="a_s.jpg" alt="" border=0/>
</a>
