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

サムネールからオリジナル画像を参照する方法は幾つかあって、今のところ流行ってるのがLightbox。ただ、Lightboxは確かにクールなんだけど、演出過多ってことで飽きて嫌になる人もいる。とゆ～声が職場であったので、作ってみたのがコレ。

今回はオブジェクト指向をちょこっと取り込んでみました。ほんとにちょこっとだけですけどね。ソースの参照と解説は、以下から。

HTML

1. <p class="thumbOri">
2. <a href="./M1.jpg"><img src="./S1.jpg" alt="画像１"></a>
3. <a href="./M2.jpg"><img src="./S2.jpg" alt="画像２"></a>
4. <a href="./M3.jpg"><img src="./S3.jpg" alt="画像３"></a>
5. </p>

Script

1. window.onload = getSrc;
2.  
3. function getSrc() {
4. if (!document.getElementsByTagName){ return; }
5. x = document.getElementsByTagName('a');
6. for(i=0;i<x.length;i++)
7. {
8. if (x[i].parentNode.getAttribute('className') == 'thumbOri' || x[i].parentNode.getAttribute('class') == 'thumbOri')
9. {
10. preLoadImg(x[i].href);
11. x[i].onclick = function() { return thumbOri(this, this.href) };
12. x[i].onkeypress = function() { return thumbOri(this, this.href) };
13. }
14. }
15. }

Sig.の中では既に定番となっている、onloadイベント組み込み部分。ページ中の<a>タグを探し、親ノードの属性に「class=“thumbOri”」があれば、preLoadImg関数を起動。そしてthumbOri関数をonclickイベントに設定しています。

16. function thumbOri(self,imgSrc) {
17. var already = document.getElementById("originalImg");
18. var sameImg;
19.  
20. if(already)
21. {
22. imgContainer.removeChild(already);
23. sameImg = already.src;
24. if(sameImg == imgSrc) return false;
25. }
26.  
27. insertImg = new Image();
28. insertImg.src = imgSrc;
29. insertImg.id = 'originalImg';
30. insertImg.onclick = function () { imgContainer.removeChild(this); }
31. insertImg.style.display = 'block';
32. insertImg.style.cursor = 'pointer';
33. insertImg.style.padding = '5px 0 0 0 ';
34. insertImg.style.cursor = 'pointer ';
35.  
36. imgContainer = self.parentNode;
37. imgContainer.appendChild(insertImg);
38. return false;
39. }

Thumbnail to Origineスクリプト。略してサムオリ（ぁ
ここで書いていることは、３つ。サムネール・クリックでオリジナル画像を展開する。同じサムネールを再びクリックすると、オリジナル画像が消える。オリジナル画像をクリックしても、消える。

40. function preLoadImg(href) {
41. img = new Image();
42. img.src = href;
43.  
44. return img;
45. }

事前に画像を読み込んでおく、プリロードイメージ部分。これに関しては、特に言うことはないかな。

» download