JavaScript + Ajax 実践サンプル集 - jQueryのAPIでサムネイルを拡大表示する(サムネイルを下に表示) #2

jQueryのAPIでサムネイルを拡大表示する(サムネイルを下に表示) #2

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

このサンプルは、jQueryのfadeOut/fadeIn/animate apiを使用してスライドを表示します。Webページに表示されているサムネイルを左右にスクロールして任意のイメージをクリックすると、そのイメージが拡大されて表示されます。

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

イメージをサムネイル化するには、以下のようなスタイルシートを使用します。イメージのheightを設定すると自動的にwidthが調整されます。

#thumbnails img
{
  height: 50px;
  margin: 5px;
  border: 1px solid #fff;
  display: block;
  float: left;
  display: none;
}

イメージの背景はfadeIn、イメージそのものはanimateを使用して表示します。

$('#' + current).fadeIn('slow');
$('#fullSize').animate({ height: currentHeight + 40 + 'px' }, 500);

<!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 - Slide Show #2</title>
  <link href="jQuery/slideshow2/slideShow2.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.2.6.js" type="text/javascript"></script>
  <script src="jQuery/slideshow2/slideShow2.js" type="text/javascript"></script>  
  <script type="text/javascript">
    $(function(){
      gallery();
    });  
  </script>

</head>
<body>

</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() {
  current = 'img1a';
  var total = $('.thumbs').length;
  thumbWidth = 0;
  for (var x = 0; x < total; x++) {
    thumbWidth = thumbWidth + $('#img' + (x + 1)).innerWidth() + 12;
  }
  $('#innerContainer').css({ width: thumbWidth + 'px' });
  $('#innerContainer img').css({ display: 'inline' });

  $('#innerContainer img').click(function() {

    $('#' + current).fadeOut('slow');
    current = this.id + "a";
    currentWidth = $('#' + current).outerWidth();
    currentHeight = $('#' + current).outerHeight();
    if (currentWidth < 478) {
      $('#' + current).animate({ marginLeft: (478 - currentWidth) / 2 + 'px' }, 500);
      $('#gallery').animate({ width: '480px' }, 500);
    }
    else {
      $('#gallery').animate({ width: currentWidth + 'px' }, 500);
      $('#' + current).animate({ marginLeft: '-' + (currentWidth - 478) / 2 + 'px' }, 500);
    }
    $('#' + current).fadeIn('slow');
    $('#fullSize').animate({ height: currentHeight + 40 + 'px' }, 500);
  });

  return false;
}

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

            
/* ================================================================ 
      This copyright notice must be untouched at all times.
      Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
    =================================================================== */
#gallery
{
  width: 480px;
  padding: 10px;
  background: #222;
  border: 1px solid #fc6;
  margin: 0 auto;
}
#thumbnails
{
  width: 480px;
  height: 80px;
  overflow: auto;
  margin: 0 auto;
}
#innerContainer
{
  height: 50px;
}
#thumbnails img
{
  height: 50px;
  margin: 5px;
  border: 1px solid #fff;
  display: block;
  float: left;
  display: none;
}
#fullSize
{
  width: 478px;
  margin: 0 auto;
  position: relative;
  background: #222;
}
#fullSize img
{
  display: none;
  position: absolute;
  top: 10px;
  border: 1px solid #fff;
  background: #222;
}

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

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

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

            
<div id="gallery">
  <div id="fullSize">     
    <img class="images" id="img1a" src="jQuery/slideshow2/t1.jpg " alt="" />
    <img class="images" id="img2a" src="jQuery/slideshow2/t2.jpg " alt="" />
    <img class="images" id="img3a" src="jQuery/slideshow2/t3.jpg " alt="" />
    <img class="images" id="img4a" src="jQuery/slideshow2/t4.jpg " alt="" />
    <img class="images" id="img5a" src="jQuery/slideshow2/t5.jpg " alt="" />
    <img class="images" id="img6a" src="jQuery/slideshow2/t6.jpg " alt="" />
    <img class="images" id="img7a" src="jQuery/slideshow2/t7.jpg " alt="" />
    <img class="images" id="img8a" src="jQuery/slideshow2/t8.jpg " alt="" />
    <img class="images" id="img9a" src="jQuery/slideshow2/t9.jpg " alt="" />
    <img class="images" id="img10a" src="jQuery/slideshow2/t10.jpg " alt="" />
    <img class="images" id="img11a" src="jQuery/slideshow2/t11.jpg " alt="" />
    <img class="images" id="img12a" src="jQuery/slideshow2/t12.jpg " alt="" />
    <img class="images" id="img13a" src="jQuery/slideshow2/t13.jpg " alt="" />
    <img class="images" id="img14a" src="jQuery/slideshow2/t14.jpg " alt="" />
    <img class="images" id="img15a" src="jQuery/slideshow2/t15.jpg " alt="" />
    <img class="images" id="img16a" src="jQuery/slideshow2/t16.jpg " alt="" />
    <img class="images" id="img17a" src="jQuery/slideshow2/t17.jpg " alt="" />
    <img class="images" id="img18a" src="jQuery/slideshow2/t18.jpg " alt="" />
    <img class="images" id="img19a" src="jQuery/slideshow2/t19.jpg " alt="" /> 
  </div>
  
  <div id="thumbnails">
    <div id="innerContainer">
      <img class="thumbs" id="img1" src="jQuery/slideshow2/t1.jpg " alt="" />
      <img class="thumbs" id="img2" src="jQuery/slideshow2/t2.jpg " alt="" />
      <img class="thumbs" id="img3" src="jQuery/slideshow2/t3.jpg " alt="" />
      <img class="thumbs" id="img4" src="jQuery/slideshow2/t4.jpg " alt="" />
      <img class="thumbs" id="img5" src="jQuery/slideshow2/t5.jpg " alt="" />
      <img class="thumbs" id="img6" src="jQuery/slideshow2/t6.jpg " alt="" />
      <img class="thumbs" id="img7" src="jQuery/slideshow2/t7.jpg " alt="" />
      <img class="thumbs" id="img8" src="jQuery/slideshow2/t8.jpg " alt="" />
      <img class="thumbs" id="img9" src="jQuery/slideshow2/t9.jpg " alt="" />
      <img class="thumbs" id="img10" src="jQuery/slideshow2/t10.jpg " alt="" />
      <img class="thumbs" id="img11" src="jQuery/slideshow2/t11.jpg " alt="" />
      <img class="thumbs" id="img12" src="jQuery/slideshow2/t12.jpg " alt="" />
      <img class="thumbs" id="img13" src="jQuery/slideshow2/t13.jpg " alt="" />
      <img class="thumbs" id="img14" src="jQuery/slideshow2/t14.jpg " alt="" />
      <img class="thumbs" id="img15" src="jQuery/slideshow2/t15.jpg " alt="" />
      <img class="thumbs" id="img16" src="jQuery/slideshow2/t16.jpg " alt="" />
      <img class="thumbs" id="img17" src="jQuery/slideshow2/t17.jpg " alt="" />
      <img class="thumbs" id="img18" src="jQuery/slideshow2/t18.jpg " alt="" />
      <img class="thumbs" id="img19" src="jQuery/slideshow2/t19.jpg " alt="" />
    </div>
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryのAPIでサムネイルを拡大表示する(サムネイルを下に表示) #2

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

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

jQueryのAPIでサムネイルを拡大表示する(サムネイルを下に表示) #2

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

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