シンプルなショーケースをJavaScriptで

/web/javascript

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

シンプルな画像ギャラリーを作ってみた。こんなひとに向いてます。

  • 「サムネール → オリジナル画像」をやりたいけど、ライブラリ使うほどじゃない場合
  • 拡大/縮小やホワイトアウトといったアニメーションよりも、軽快な動作を優先したい場合
  • 似たような写真を見比べたい場合（同じアングルでレンズが違うとか、間違い探しみたいな）

この手のスクリプトはLightbox以降、星の数ほど出てきたけど、凝ったアニメーションってそのうち飽きるんだよね。いっぱいありすぎて探すのもメンドイし。ものによってはありえないほど重いしなー。EeePCブームな今だと意外と使えるんじゃないだろうか。

まあ発端は「そろそろ写真も出していこうか」って私的な事情なのだけども。ハンドメイド万歳！

»サンプル・ページへ

HTML

  1. <div id="showcase">
  2. <p><img src="m01.jpg" alt="コメント１" /></p>
  3. <p>
  4. <a href="m01.jpg" title="コメント１"><img src="s01.jpg" alt="" /></a>
  5. <a href="m02.jpg" title="コメント２"><img src="s02.jpg" alt="" /></a>
  6. <a href="m03.jpg" title="コメント３"><img src="s03.jpg" alt="" /></a>
  7. <a href="m04.jpg" title="コメント４"><img src="s04.jpg" alt="" /></a>
  8. <a href="m05.jpg" title="コメント５"><img src="s05.jpg" alt="" /></a>
  9. </p>
  10. </div>
  11. <script type="text/javascript"> showcase.init('showcase'); </script>

HTML部分。指定したID内の<a>要素を取得し、onclickイベントを付与する。
<a>要素のhref属性が切替画像のsrc属性に、title属性がコメントになる仕組みです。

JavaScriptが無効な状態では、単なる画像リンクになる。気になるなら切替対象の画像要素をJSで生成しても良いでしょう。その場合だとJS無効状態でサムネールだけ生成されるため、文章構造的にはよりスマート。今回は判りやすさを優先します。

JavaScript

  1. var showcase = {
  2. init: function(obj){
  3. var wrap = document.getElementById(obj);
  4. var links = wrap.getElementsByTagName('a');
  5. var bigImg = wrap.getElementsByTagName('img')[0];
  6. var text = document.createTextNode(links[0].title);
  7. bigImg.parentNode.appendChild(text);
  8.  
  9. for(i=0; i<links.length; i++) {
  10. var thumb = new Image();
  11. thumb.src = links[i].href;
  12. links[i].onclick = function(){
  13. showcase.showImg(this,bigImg,text);
  14. return false;
  15. };
  16. }
  17. },
  18.  
  19. showImg: function(obj,bigImg,text){
  20. bigImg.src = obj.href;
  21. bigImg.title = obj.title;
  22. text.nodeValue = obj.title;
  23. }
  24. }
  25. window.onload = function(){showcase.init('showcase')};

JS部分。showcase.init()で対象の特定、およびイベントハンドラの設定を行います。showcase.showImg()が動作部分。まあ大したことはしていない。核心はシンプルに。Less is more, more is less. たとえばコメントにリンクを埋め込むとか、いろいろカスタムのし甲斐があるんじゃないかと。

HTMLのID名を縛りたくなかったので、コメントの挿入位置、および拡大画像（切替画像）の特定は文章構造から取ってます。例では1つめのimg要素、といった感じ。切替対象をHTML上で下に持っていきたい場合とか、順番の指定に気をつけてくださいね。ズレます。

課題・問題点

外部JSで「window.onload」しようとしてもできません。bodyタグの中で直接起動してやる必要がある。大きな問題ではないが、なんとかしたいところ。

テスト時の名残で <body onload=""> となっていたのが原因。ここで初期化してしまっていた。<body>からonload属性をはずせば問題なし。
roadさんに感謝！ いつもありがとうございます。

参照

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。

6 Comments

road wrote:
ためしてないのですが

var addEvent = function(element, type, listener, useCapture) {
if (element.addEventListener) {
element.addEventListener(type, listener, useCapture);
return true;
} else if (element.attachEvent) {
return element.attachEvent('on' + type, listener);
}
};
addEvent(window, 'load', showcase.init('showcase'));

みたいなことやったら外部にだせないですかね？ 2008–08–27 19:03
Sig. wrote:
addEvent(window, 'load', function(){showcase.init('showcase')});

...とすれば、できたよ！
ありがとう＾＾ｂ

んーでも別のマシンではFirefoxおんりーだった。
微妙にブラウザ依存してる...？ もうちょい追ってみまっす。
ちなみに DOMContentLoaded でもいけた。
起動がかなりもっさりしてるけど＾＾； 2008–08–28 04:20
Sig. wrote:
原因がわかった！
テスト時の名残で <body id="" onload=""> としていたのが原因。
ここで初期化しちゃってたんだな＾＾；

なので <body> からonload属性を外せば、
window.onload = function(){showcase.init('showcase')};
...普通に使えるぜ！ 2008–08–28 04:35
緋 wrote:
たいへん面白いブログもあるんだと実感しました。
ありがとう御座いました。
毎日勉強しに来ます。

黒川新一　AKA　Shin A. Kurokawa 2008–08–29 06:16
Sig. wrote:
どもーっ！
よろしくご贔屓に＾＾ｂ 2008–08–30 05:22
まさゆき wrote:
軽くて実装がそんなに難しくないイメージギャラリーをずっと探していて、こちらにたどり着きました。
さっそく私のサイトで使わさせて頂きました。
どうもありがとうございました。 2010–02–09 14:48