Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

前回つくったスクリプトをベースに、普通にブログで使えるようにちょこちょこカスタムしてみた。次から当サイトで使います。変更点は以下。

• 対象ブロックを class名 にて特定するようにした。
• 拡大画像が挿入される位置を選択できるようにした。
• 拡大画像をJavaScriptで生成するようにした。

»サンプル・ページへ

つまり、記事一覧で複数表示されても動作し、拡大画像の挿入位置をCSSの都合で選べて、JS無効環境では単純なサムネールの画像リンクになる。

HTML

1. <div class="showcase">
2. <p>
3. <a href="m01.jpg" title="コメント１"><img src="s01.jpg" alt="" /></a>
4. <a href="m02.jpg" title="コメント２"><img src="s02.jpg" alt="" /></a>
5. <a href="m03.jpg" title="コメント３"><img src="s03.jpg" alt="" /></a>
6. <a href="m04.jpg" title="コメント４"><img src="s04.jpg" alt="" /></a>
7. <a href="m05.jpg" title="コメント５"><img src="s05.jpg" alt="" /></a>
8. </p>
9. </div>

HTML部分。特に何の変哲も無い、画像リンクが並ぶだけの構成。

JavaScript

1. var showcase = {
2. init: function(cname,pos){
3. var wrap = this.getElementsByClass(cname);
4. for(var i=0; i<wrap.length; i++){
5. this.setup(wrap[i],pos);
6. }
7. },
8.  
9. setup: function(wrap,pos){
10. var links = wrap.getElementsByTagName('a');
11. var bigWrap = document.createElement('p');
12. var bigImg = new Image();
13. var text = document.createTextNode(links[0].title);
14.  
15. if(pos == 'before'){
16. var thumb = wrap.getElementsByTagName('p')[0];
17. wrap.removeChild(thumb);
18. wrap.appendChild(bigWrap);
19. wrap.appendChild(thumb);
20. } else {
21. wrap.appendChild(bigWrap);
22. };
23.  
24. bigWrap.className = "bigImg";
25. bigImg.src = links[0].href;
26. bigWrap.appendChild(bigImg);
27. bigWrap.appendChild(text);
28.  
29. for(var i=0; i<links.length; i++) {
30. var thumb = new Image();
31. thumb.src = links[i].href;
32. links[i].onclick = function(){
33. showcase.showImg(this,bigImg,text);
34. return false;
35. };
36. }
37. },
38.  
39. showImg: function(elm,bigImg,text){
40. bigImg.src = elm.href;
41. text.nodeValue = elm.title;
42. },
43.  
44. getElementsByClass: function(searchClass) {
45. var classElements = new Array();
46. var els = document.getElementsByTagName('div');
47. var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
48.  
49. for (i = 0, j = 0; i < els.length; i++) {
50. if ( pattern.test(els[i].className) ) {
51. classElements[j] = els[i];
52. j++;
53. }
54. }
55. return classElements;
56. }
57.  
58. }
59. window.onload = function(){showcase.init('showcase','before')};

ちょっと長くなった。変更点は３つ。
init() の分割と、bigImgの生成/挿入処理の追加、あと getElementsByClass() メソッドの追加。順を追って軽く解説していきます。

まずinit()の分割。これは複数表示したときの変数のスコープの問題で、しょうがなかった。具体的には画像切替の段階で、複数のショーケースを設置していても、最後に生成された bigImg しか切り替わらない状態になっていた。これはJavaScriptにおいて、変数のスコープは宣言された関数の中に限定されるため。したがって init() の中でfor文を回すのではなく、init() にて showcase の数だけ setup() を実行するカタチになっている。いま思えば匿名関数で括っても良かったのかもだけど、結果的には、起動部と実行部が分離された今の状態のほうがよりスマート。

bigImgの生成/挿入に関しては、特に言うべきことはないかな。タグをひとつずつ生成して突っ込んで行ってるだけ。15～22行がbigImgの挿入場所を決める分岐処理。包括ブロックがもうちょい複雑なら InsertAdjacent を使ったほうが良いかもしれない。今はコレで十分。LightBoxっぽくするかどうかはCSSで決めれば良い。このままでもやろうと思えばできる。まあその場合はDocument直下に突っ込んだほうが設定はしやすいだろうけど。好きに料理してください。

getElementsByClass() は... まあ別に良いよね？ 今回はパッケージ化の問題でshowcaseオブジェクトに含めてるけど、自前のが既にあるならソレ使っても問題ない。まあ捜索対象のノードとタグは、下手打てば負荷増になるから環境に合わせてチェックはしたほうが良いかもね、てくらいかな。

»サンプル・ページへ