JavaScript + Ajax 実践サンプル集 - jQueryのAPIでサムネイルを拡大表示(サムネイルを水平に表示) #4

jQueryのAPIでサムネイルを拡大表示(サムネイルを水平に表示) #4

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryの各種apiを利用してイメージギャラリーを表示します。 Webページの上にイメージのサムネイルが表示されます。サムネイルをクリックするとそのイメージが拡大表示されます。拡大表示されたイメージの下に「タイトル」と「説明文」が表示されます。サムネイルの左端(赤のマーク)または右端(赤のマーク)に移動するとサムメイルが左右にスクロールします。

Playボタン(>)をクリックするとイメージを順番に拡大表示します。移動ボタン(<<,>>)をクリックすると手動でイメージを切り替えすることができます。

このサンプルを編集して試してみる

サムネイルの両端にマウスを移動したときにスクロールするには、jQueryのhover()イベントを使用します。そしてサムネイルをスクロールさせるにはanimate()を使用します。

  $('#slideLeft').hover(function(e) {
    $('#innerContainer').stop();
    $('#innerContainer').animate({ "left": "0px" }, 5000, "swing")
  }, function() {
    $('#innerContainer').stop();
  });

  $('#slideRight').hover(function(e) {
    posLeft = $('#thumbnails').offset().left;
    absLeft = e.pageX - posLeft;
    hiddenBit = thumbWidth - 500;
    $('#innerContainer').stop();
    $('#innerContainer').animate({ "left": -hiddenBit + "px" }, 5000, "swing")
  }, function() {
    $('#innerContainer').stop();
  });

サムネイルをクリックしたときに、そのイメージを拡大して表示するには、jQueryのfadeOut()を使用します。

  $('.thumb').click(function() {
    htmlStr = $(this).html();
    currentLarge = $(this).attr('class').split(' ').slice(-1);
    if ("p" + (total) == currentLarge) {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
				.attr("alt", "")
				.attr("title", "");
    }
    else {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/next.gif)")
				.attr("alt", "Next")
				.attr("title", "Next");
    }
    if ("p1" == currentLarge) {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
				.attr("alt", "")
				.attr("title", "");
    }
    else {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/previous.gif)")
				.attr("alt", "Previous")
				.attr("title", "Prevous");
    }

    /* swap images and information */
    $('#fullSize').fadeOut(600, function() { showDiv(htmlStr) });
  });

移動ボタン([<<],[>>])をクリックしたときも同様にfadeOut()を使用して表示します。

  $('#clickRight').click(function() {
    currentLarge = $('#fullSize img').attr('class');
    if ("p" + (total - 1) == currentLarge) {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
					.attr("alt", "")
					.attr("title", "");
    }
    if ("p" + total != currentLarge) {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/previous.gif)")
				.attr("alt", "Previous")
				.attr("title", "Previous");
      htmlStr = $('#innerContainer li.' + currentLarge).next('li').html();
      $('#fullSize').fadeOut(600, function() { showDiv(htmlStr) });
    }
  });

  $('#clickLeft').click(function() {
    currentLarge = $('#fullSize img').attr('class');
    if ("p2" == currentLarge) {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
				.attr("alt", "")
				.attr("title", "");
    }
    if ("p1" != currentLarge) {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/next.gif)")
					.attr("alt", "Next")
					.attr("title", "Next");
      htmlStr = $('#innerContainer li.' + currentLarge).prev('li').html();
      $('#fullSize').fadeOut(600, function() { showDiv(htmlStr) });
    }
  });

Playボタン([>])をクリックしたときは、jQueryのtoggle()を使用して表示します。Playボタンをクリックしたときは7秒間隔でイメージを切り替えます。showTimeに格納されている時間(ms)を書き換えるとこの間隔を調整できます。

  $('#autoPlay').toggle(function() {
  $('#autoPlay').css("backgroundImage", "url(jQuery/allinoneGallery/images/stop.gif)")
				.attr("alt", "Stop")
				.attr("title", "Stop");
    autoPlay()
  }, function() {
    clearTimeout(timer);
    $('#autoPlay').css("backgroundImage", "url(jQuery/allinoneGallery/images/play.gif)")
				.attr("alt", "Play")
				.attr("title", "Play");
  });

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - all-in-one gallery</title>
  <link href="jQuery/allinoneGallery/allinoneGallery.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/allinoneGallery/allinoneGallery.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      gallery();
    });  
  </script>
</head>
<body>
  <div id="wrapper">
    
    <div id="content">

<div id="gallery">
        <div id="thumbnails">
          <ul id="innerContainer">
            <li class="thumb p1">
              <img class="p1" src="jQuery/allinoneGallery/images/t1.jpg" alt="" />
              <div>
                <h1>タイトル #1</h1>
                <p>ここにイメージの説明を記述する・・・</p>
              </div>
            </li>
            <li class="thumb p2">
              <img class="p2" src="jQuery/allinoneGallery/images/t2.jpg" alt="" />
              <div>
                <h1>タイトル #2</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p3">
              <img class="p3" src="jQuery/allinoneGallery/images/t3.jpg" alt="" />
              <div>
                <h1>タイトル #3</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p4">
              <img class="p4" src="jQuery/allinoneGallery/images/t4.jpg" alt="" />
              <div>
                <h1>タイトル #4</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p5">
              <img class="p5" src="jQuery/allinoneGallery/images/t5.jpg" alt="" />
              <div>
                <h1>タイトル #5</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p6">
              <img class="p6" src="jQuery/allinoneGallery/images/t6.jpg" alt="" />
              <div>
                <h1>タイトル #6</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p7">
              <img class="p7" src="jQuery/allinoneGallery/images/t7.jpg" alt="" />
              <div>
                <h1>タイトル #7</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p8">
              <img class="p8" src="jQuery/allinoneGallery/images/t8.jpg" alt="" />
              <div>
                <h1>タイトル #8</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p9">
              <img class="p9" src="jQuery/allinoneGallery/images/t9.jpg" alt="" />
              <div>
                <h1>タイトル #9</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p10">
              <img class="p10" src="jQuery/allinoneGallery/images/t10.jpg" alt="" />
              <div>
                <h1>タイトル #10</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
                </div>
            </li>
            <li class="thumb p11">
              <img class="p11" src="jQuery/allinoneGallery/images/t11.jpg" alt="" />
              <div>
                <h1>タイトル #11</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p12">
              <img class="p12" src="jQuery/allinoneGallery/images/t12.jpg" alt="" />
              <div>
                <h1>タイトル #12</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p13">
              <img class="p13" src="jQuery/allinoneGallery/images/t13.jpg" alt="" />
              <div>
                <h1>タイトル #13</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p14">
              <img class="p14" src="jQuery/allinoneGallery/images/t14.jpg" alt="" />
              <div>
                <h1>タイトル #14</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p15">
              <img class="p15" src="jQuery/allinoneGallery/images/t15.jpg" alt="" />
              <div>
                <h1>タイトル #15</h1>
                <p>ここにイメージの説明を記述する・・・</p>              
              </div>
            </li>
            <li class="thumb p16">
              <img class="p16" src="jQuery/allinoneGallery/images/t16.jpg" alt="" />
              <div>
                 <h1>タイトル #16</h1>
                <p>ここにイメージの説明を記述する・・・</p>
              </div>
            </li>
            <li class="thumb p17">
              <img class="p17" src="jQuery/allinoneGallery/images/t17.jpg" alt="" />
              <div>
                <h1>タイトル #17</h1>
                <p>ここにイメージの説明を記述する・・・</p>
              </div>
            </li>
            <li class="thumb p18">
              <img class="p18" src="jQuery/allinoneGallery/images/t18.jpg" alt="" />
              <div>
                <h1>タイトル #18</h1>
                <p>ここにイメージの説明を記述する・・・</p>
              </div>
            </li>
            <li class="thumb p19">
              <img class="p19" src="jQuery/allinoneGallery/images/t19.jpg" alt="" />
              <div>
                <h1>タイトル #19</h1>
                <p>ここにイメージの説明を記述する・・・</p>
              </div>
            </li>
          </ul>
        </div>
        
        <div id="fullSize"></div>
        <div id="imageNumber"></div>
        <div id="slideLeft" title="«"></div>
        <div id="slideRight" title="»"></div>
        <div id="clickLeft" alt="" title=""></div>
        <div id="clickRight" alt="Next" title="Next"></div>
        <div id="autoPlay" alt="Play" title="Play"></div>
      </div>
    
    </div>

</div>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */

gallery = function() {

  /* show first image and information */
  showTime = 7000;
  timer = 0;
  absLeft = 0;
  picCount = 0;
  total = $('.thumb img').length;
  $totalImgs = $('.thumb img');
  $('#imageNumber').html('Image 1 of ' + total + ' images');

  thumbWidth = 0;
  for (x = 0; x < total; x++) {
    thumbWidth = thumbWidth + $($totalImgs[x]).outerWidth();
  }

  $('#innerContainer').css({ width: thumbWidth + 'px' });
  $('#innerContainer img').css({ display: 'inline' });

  firstStr = $('.thumb');
  showStr = firstStr.html();
  showDiv(showStr)


  $('#slideLeft').hover(function(e) {
    $('#innerContainer').stop();
    $('#innerContainer').animate({ "left": "0px" }, 5000, "swing")
  }, function() {
    $('#innerContainer').stop();
  });

  $('#slideRight').hover(function(e) {
    posLeft = $('#thumbnails').offset().left;
    absLeft = e.pageX - posLeft;
    hiddenBit = thumbWidth - 500;
    $('#innerContainer').stop();
    $('#innerContainer').animate({ "left": -hiddenBit + "px" }, 5000, "swing")
  }, function() {
    $('#innerContainer').stop();
  });



  /* monitor mouse clicks */
  $('.thumb').click(function() {
    htmlStr = $(this).html();
    currentLarge = $(this).attr('class').split(' ').slice(-1);
    if ("p" + (total) == currentLarge) {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
				.attr("alt", "")
				.attr("title", "");
    }
    else {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/next.gif)")
				.attr("alt", "Next")
				.attr("title", "Next");
    }
    if ("p1" == currentLarge) {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
				.attr("alt", "")
				.attr("title", "");
    }
    else {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/previous.gif)")
				.attr("alt", "Previous")
				.attr("title", "Prevous");
    }

    /* swap images and information */
    $('#fullSize').fadeOut(600, function() { showDiv(htmlStr) });
  });

  /* show image and information */
  function showDiv(htmlStr) {
    $('#fullSize').html(htmlStr)
						.fadeIn(600);
    currentLarge = $('#fullSize img').attr('class');
    currentLarge = currentLarge.substr(1, 3);
    $('#imageNumber').html('Image ' + currentLarge + ' of ' + total + ' images');
  }


  $('#clickRight').click(function() {
    currentLarge = $('#fullSize img').attr('class');
    if ("p" + (total - 1) == currentLarge) {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
					.attr("alt", "")
					.attr("title", "");
    }
    if ("p" + total != currentLarge) {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/previous.gif)")
				.attr("alt", "Previous")
				.attr("title", "Previous");
      htmlStr = $('#innerContainer li.' + currentLarge).next('li').html();
      $('#fullSize').fadeOut(600, function() { showDiv(htmlStr) });
    }
  });

  $('#clickLeft').click(function() {
    currentLarge = $('#fullSize img').attr('class');
    if ("p2" == currentLarge) {
      $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
				.attr("alt", "")
				.attr("title", "");
    }
    if ("p1" != currentLarge) {
      $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/next.gif)")
					.attr("alt", "Next")
					.attr("title", "Next");
      htmlStr = $('#innerContainer li.' + currentLarge).prev('li').html();
      $('#fullSize').fadeOut(600, function() { showDiv(htmlStr) });
    }
  });


  $('#autoPlay').toggle(function() {
  $('#autoPlay').css("backgroundImage", "url(jQuery/allinoneGallery/images/stop.gif)")
				.attr("alt", "Stop")
				.attr("title", "Stop");
    autoPlay()
  }, function() {
    clearTimeout(timer);
    $('#autoPlay').css("backgroundImage", "url(jQuery/allinoneGallery/images/play.gif)")
				.attr("alt", "Play")
				.attr("title", "Play");
  });


}

function autoPlay() {
  currentLarge = $('#fullSize img').attr('class');
  if ("p" + (total - 1) == currentLarge) {
    $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
					.attr("alt", "")
					.attr("title", "");
  }
  if ("p" + total != currentLarge) {
    $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/previous.gif)")
					.attr("alt", "Previous")
					.attr("title", "Previous");
    htmlStr = $('#innerContainer li.' + currentLarge).next('li').html();
    $('#fullSize').fadeOut(600, function() { playDiv(htmlStr) });
  }
  if ("p" + (total) == currentLarge) {
    $('#clickLeft').css("backgroundImage", "url(jQuery/allinoneGallery/images/blank.gif)")
					.attr("alt", "")
					.attr("title", "");
    $('#clickRight').css("backgroundImage", "url(jQuery/allinoneGallery/images/next.gif)")
					.attr("alt", "Next")
					.attr("title", "Next");
    htmlStr = $('#innerContainer li.p1').html();
    $('#fullSize').fadeOut(600, function() { playDiv(htmlStr) });
  }
  timer = setTimeout("autoPlay()", showTime);
}

function playDiv(htmlStr) {
  $('#fullSize').html(htmlStr).fadeIn(600);
  currentLarge = $('#fullSize img').attr('class');
  currentLarge = currentLarge.substr(1, 3);
  $('#imageNumber').html('Image ' + currentLarge + ' of ' + total + ' images');
}

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
#gallery
{
  position: relative;
  width: 600px;
  height: 690px;
  background: #efebe7 url(images/back.gif) no-repeat 42px 13px;
  padding-bottom: 10px;
  border: 1px solid #8b7f72;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 1.5em;
}
#gallery #imageNumber
{
  display: block;
  width: 200px;
  height: 38px;
  background: url(images/number.gif);
  text-align: center;
  line-height: 38px;
  font-size: 11px;
  margin: 0;
  color: #222;
  position: absolute;
  top: 110px;
  left: 200px;
}
#thumbnails
{
  width: 500px;
  height: 75px;
  overflow: hidden;
  margin: 20px 49px 60px 49px;
  position: relative;
}
#innerContainer
{
  position: absolute;
  left: 0;
  top: 0;
  height: 75px;
  overflow: hidden;
}
#thumbnails ul
{
  margin: 0;
  padding: 0;
  list-style: none;
}
#thumbnails ul li
{
  float: left;
  height: 75px;
}
#thumbnails ul li div
{
  display: none;
}
#thumbnails ul li img
{
  display: block;
  height: 75px;
  padding: 0 1px;
}
#fullSize
{
  width: 500px;
  margin: 0 auto;
  background: #a49a91;
  text-align: center;
  border: 1px solid #8b7f72;
}
#fullSize img
{
  display: block;
  margin: 10px auto 10px auto;
  border: 1px solid #fff;
}
#fullSize div
{
  margin: 0 auto;
  background: #a49a91;
  text-align: left;
  padding: 10px;
}
#fullSize div h1
{
  margin: 0;
  padding: 0;
  font-size: 18px;
  line-height: 18px;
  color: #fff;
}
#clickLeft
{
  width: 35px;
  height: 38px;
  position: absolute;
  left: 160px;
  top: 110px;
  background: #fff url(images/blank.gif);
}
#clickRight
{
  width: 35px;
  height: 38px;
  position: absolute;
  left: 405px;
  top: 110px;
  background: #fff url(images/next.gif);
}
#slideLeft
{
  width: 15px;
  height: 89px;
  position: absolute;
  left: 50px;
  top: 14px;
  background: url(images/trans.gif);
}
#slideRight
{
  width: 15px;
  height: 89px;
  position: absolute;
  right: 50px;
  top: 14px;
  background: url(images/trans.gif);
}
#autoPlay
{
  width: 35px;
  height: 38px;
  position: absolute;
  left: 445px;
  top: 110px;
  background: #fff url(images/play.gif);
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
  <link href="jQuery/allinoneGallery/allinoneGallery.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/allinoneGallery/allinoneGallery.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      gallery();
    });  
  </script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="wrapper">
  
  <div id="content">

    <div id="gallery">
      <div id="thumbnails">
        <ul id="innerContainer">
          <li class="thumb p1">
            <img class="p1" src="jQuery/allinoneGallery/images/t1.jpg" alt="" />
            <div>
              <h1>タイトル #1</h1>
              <p>ここにイメージの説明を記述する・・・</p>
            </div>
          </li>
          <li class="thumb p2">
            <img class="p2" src="jQuery/allinoneGallery/images/t2.jpg" alt="" />
            <div>
              <h1>タイトル #2</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p3">
            <img class="p3" src="jQuery/allinoneGallery/images/t3.jpg" alt="" />
            <div>
              <h1>タイトル #3</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p4">
            <img class="p4" src="jQuery/allinoneGallery/images/t4.jpg" alt="" />
            <div>
              <h1>タイトル #4</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p5">
            <img class="p5" src="jQuery/allinoneGallery/images/t5.jpg" alt="" />
            <div>
              <h1>タイトル #5</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p6">
            <img class="p6" src="jQuery/allinoneGallery/images/t6.jpg" alt="" />
            <div>
              <h1>タイトル #6</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p7">
            <img class="p7" src="jQuery/allinoneGallery/images/t7.jpg" alt="" />
            <div>
              <h1>タイトル #7</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p8">
            <img class="p8" src="jQuery/allinoneGallery/images/t8.jpg" alt="" />
            <div>
              <h1>タイトル #8</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p9">
            <img class="p9" src="jQuery/allinoneGallery/images/t9.jpg" alt="" />
            <div>
              <h1>タイトル #9</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p10">
            <img class="p10" src="jQuery/allinoneGallery/images/t10.jpg" alt="" />
            <div>
              <h1>タイトル #10</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
              </div>
          </li>
          <li class="thumb p11">
            <img class="p11" src="jQuery/allinoneGallery/images/t11.jpg" alt="" />
            <div>
              <h1>タイトル #11</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p12">
            <img class="p12" src="jQuery/allinoneGallery/images/t12.jpg" alt="" />
            <div>
              <h1>タイトル #12</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p13">
            <img class="p13" src="jQuery/allinoneGallery/images/t13.jpg" alt="" />
            <div>
              <h1>タイトル #13</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p14">
            <img class="p14" src="jQuery/allinoneGallery/images/t14.jpg" alt="" />
            <div>
              <h1>タイトル #14</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p15">
            <img class="p15" src="jQuery/allinoneGallery/images/t15.jpg" alt="" />
            <div>
              <h1>タイトル #15</h1>
              <p>ここにイメージの説明を記述する・・・</p>              
            </div>
          </li>
          <li class="thumb p16">
            <img class="p16" src="jQuery/allinoneGallery/images/t16.jpg" alt="" />
            <div>
               <h1>タイトル #16</h1>
              <p>ここにイメージの説明を記述する・・・</p>
            </div>
          </li>
          
          <li class="thumb p17">
            <img class="p17" src="jQuery/allinoneGallery/images/t17.jpg" alt="" />
            <div>
              <h1>タイトル #17</h1>
              <p>ここにイメージの説明を記述する・・・</p>
            </div>
          </li>
          <li class="thumb p18">
            <img class="p18" src="jQuery/allinoneGallery/images/t18.jpg" alt="" />
            <div>
              <h1>タイトル #18</h1>
              <p>ここにイメージの説明を記述する・・・</p>
            </div>
          </li>
          <li class="thumb p19">
            <img class="p19" src="jQuery/allinoneGallery/images/t19.jpg" alt="" />
            <div>
              <h1>タイトル #19</h1>
              <p>ここにイメージの説明を記述する・・・</p>
            </div>
          </li>
        </ul>
      </div>
      
      <div id="fullSize"></div>
      <div id="imageNumber"></div>
      <div id="slideLeft" title="«"></div>
      <div id="slideRight" title="»"></div>
      <div id="clickLeft" alt="" title=""></div>
      <div id="clickRight" alt="Next" title="Next"></div>
      <div id="autoPlay" alt="Play" title="Play"></div>
    </div>
  </div>

</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのAPIでサムネイルを拡大表示(サムネイルを水平に表示) #4

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのAPIでサムネイルを拡大表示(サムネイルを水平に表示) #4

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!