[ 勉強 ] jQueryで同一ページで複数の画像ギャラリーを表示する

人様のソースコードを読み解くシリーズです。今回は、サムネイル付きのギャラリーです。スライドショー付きではありません。

共通のHTMLはこちら。

<div class="swap">
   <p><a href="img/img1_b.jpg"><img src="img/img1.jpg" alt="" width="550" height="400" /></a></p>
   <ul>
      <li><a href="img/img1.jpg" class="selected"><img src="img/img1_s.jpg" alt="" width="100" height="100" /></a></li>
      <li><a href="img/img2.jpg"><img src="img/img2_s.jpg" alt="" width="100" height="100" /></a></li>
      <li><a href="img/img3.jpg"><img src="img/img3_s.jpg" alt="" width="100" height="100" /></a></li>
   </ul>
</div>

フェードとかない普通のバージョン

(function () {
   $('div.swap li a').click(function (e) {
      e.preventDefault();
      var imagePath = $(this).attr('href');
      var mainImage = $(this).parents('div.swap').find('p img');
      $(mainImage).attr('src', imagePath);
   });
});

『preventDefault();』というのは初めて見ましたが、リンクを無効にするものなのですね。今までは『return false;』でリンクを無効化していました。

あと、『parents』とか『find』とか使うことで、複数のギャラリーを同一ページに設置できるようになっていますね。なるほどー。

フェードあり、現在選択ありバージョン

画像をフェード効果で切り替え、選択したサムネイルにデザイン(枠線)が付いているタイプです。

$(function () {
   $('div.swap li a').click(function (e) {
      e.preventDefault();
      var imagePath = $(this).attr('href');
      var mainImage = $(this).parents('div.swap').find('p img');
      var selectedNo = $(this).parents('div.swap').find('li a');
      $(selectedNo).removeClass('selected');
      $(this).addClass('selected');
      if (imagePath == mainImage.attr('src')) {
         return;
      } else {
         $(mainImage).fadeOut('fast', function () {
            $(this).fadeIn().attr('src', imagePath);
         });
      }
   });
});

fadeOut()のコールバックにfadeIn()を実行しているので、元の画像をフェードアウトした後にフェードインするということですね。個人的には、フェードアウトとフェードインを同時に行うほうが、滑らかに切り替わるので好きですが。

ふと思いましたが、変数をそのまま使う『mainImage』と、$()で囲む『$(mainImage)』の違いってなんなんでしょうね。普段何気なく、変数は全て$()で囲んでいない方を使っていたので…。蛇足ですが、調べてみました。

ここでは、『this』と『$(this)』の違いですが、要は、DOMエレメントかjQueryオブジェクトかの違いということですね。変数でも同様のことが言えるのだと思います。