ページ内にあるサムネイル画像をクリックするとビュイーンと画像がおっきくなるhighslide JS。
結構いろんなところで使われていると思いますし、僕が手がけるサイトでも、ブログ機能なんかをつける場合はだいたいhighslideをつけてくれという指示をいただきます。
通常、highslideを動かすためには↓こんなようなソースを書く必要がある。
<head>
<script type="text/JavaScript" src="/js/highslide/highslide.js"></script>
<script>
hs.graphicsDir = "/js/highslide/graphics/";
hs.outlineType = "rounded-white";
</script>
<body>
<div id="content">
<a href="http://sample.net/images/sample.jpg" mce_href="http://sample.net/images/sample.jpg" class="highslide" onclick="return hs.expand(this)"><img src="sample.jpg" /></a>
</div>
</body>要はhighslide.jsを読み込んでaタグにクリック時のイベントを書けば動くわけですが、ブログで記事を書くときに毎回これを書くのは面倒だし、ユーザビリティを考えてもこれを自分で書かせるのはあまりよろしくはない。
そこで、画像を投稿したら勝手にhighslideが動くようなjavascriptでも書いておけば、便利じゃないかな～と思う。それなら画像を投稿するだけで良いもんね。
<script>
addHighslide = function() {
var id = 'content';
if(id) {
var element = document.getElementById(id);
if(!element) {
return;
}
} else {
element = document.body;
}
var images = element.getElementsByTagName('a');
for(var i = 0; i < images.length; i++) {
if(images[i].firstChild.tagName == 'img') {
images[i].className = 'highslide';
if(IE='v'=='v') {
images[i].setAttribute('onclick', new Function('return hs.expand(this)'));
} else {
images[i].setAttribute('onclick', 'return hs.expand(this)');
}
}
}
}
</script>何をやっているかというと、要はid=’content’で囲われた中にある文の中からaタグを探してきて、その中にimgタグがあったら、highslide属性を付け足しますよということです。単純にaタグだけ拾ってきてhighslide属性をつけたら、ただのリンクにもついちゃいますからね。
とりあえずはこんなjavascriptのコードを書いて、addHighslide.jsとでも適当に名前をつけて<head></head>の中で読み込む。あとはfooterの部分、</body>の前にでも以下のコードを書けばＯＫ。
<script type="text/javascript">
//<![CDATA[
addHighslide();
//]]>
</script>これは、一度ページを全部読み込んでから上のjavascriptを実行させますよってこと。
if(IE=’v’==’v’)は、使っているブラウザがIEかどうかを判定しています。理由はあまりよく分かっていないんだけど、IEだとsetAttribute(‘onclick’, ‘return hs.expand(this)’)って書いても上手くhighslide属性がつかないので、こんな場合分けをしてあげないといけない。
これを書いておけば、いちいち自分でブログを更新するときにaタグの中にclass=”highslide”やら何やらを書かなくても大丈夫。誰がブログを更新してもhighslideが使えますね。
ちなみにこのソースを書くにあたり、こちらの本を参考にさせていただきました。ていうか、ほぼパクリ。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
