JavaScript + Ajax 実践サンプル集 - jQueryのAPIを利用してフルページのイメージギャラリーを実装する

jQueryのAPIを利用してフルページのイメージギャラリーを実装する

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

このサンプルは、jQueryのAPIとCSSを利用してフルページに対応したイメージギャラリーを実装します。サンプルが表示されたら左下に表示されている任意のサムネイルをクリックします。するとサムネイルがフルページで拡大表示されます。マウスを移動するとイメージがスクロールします。拡大表示されたイメージを切り替えるには左右に表示されている矢印ボタンをクリックします。サムネイルを表示するには、画面最下位に表示されている「VIEW THUMBS」をクリックします。

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

このサンプルのソースコードは、ここからダウンロードできます。

<!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>Full Page Image Gallery with jQuery</title>
  <link href="jQuery/fullpageImageGallery/css/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/fullpageImageGallery/demo.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jQuery/fullpageImageGallery/jquery.easing.1.3.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(window).load(function () {
      sliderLeft = $('#thumbScroller .container').position().left;
      padding = $('#outer_container').css('paddingRight').replace("px", "");
      sliderWidth = $(window).width() - padding;
      $('#thumbScroller').css('width', sliderWidth);
      var totalContent = 0;
      $('#thumbScroller .content').each(function () {
        totalContent += $(this).innerWidth();
        $('#thumbScroller .container').css('width', totalContent);
      });
      $('#thumbScroller').mousemove(function (e) {
        if ($('#thumbScroller  .container').width() > sliderWidth) {
          var mouseCoords = (e.pageX - this.offsetLeft);
          var mousePercentX = mouseCoords / sliderWidth;
          var destX = -(((totalContent - (sliderWidth)) - sliderWidth) * (mousePercentX));
          var thePosA = mouseCoords - destX;
          var thePosB = destX - mouseCoords;
          var animSpeed = 600;
          var easeType = 'easeOutCirc';
          if (mouseCoords == destX) {
            $('#thumbScroller .container').stop();
          }
          else if (mouseCoords > destX) {
            $('#thumbScroller .container').stop().animate({ left: -thePosA }, animSpeed, easeType); 
          }
          else if (mouseCoords < destX) {
            $('#thumbScroller .container').stop().animate({ left: thePosB }, animSpeed, easeType); 
          }
        }
      });
      $('#thumbScroller  .thumb').each(function () {
        $(this).fadeTo(fadeSpeed, 0.6);
      });
      var fadeSpeed = 200;
      $('#thumbScroller .thumb').hover(
				function () { 
				  $(this).fadeTo(fadeSpeed, 1);
				},
				function () { 
				  $(this).fadeTo(fadeSpeed, 0.6);
				}
			);
    });
    $(window).resize(function () {
      $('#thumbScroller .container').stop().animate({ left: sliderLeft }, 400, 'easeOutCirc'); 
      $('#thumbScroller').css('width', $(window).width() - padding);
      sliderWidth = $(window).width() - padding;
    });
  </script>
  <script type="text/javascript">
    $(function () {
      var current = -1;
      var $btn_thumbs = $('#fp_thumbtoggle');
      var $loader = $('#fp_loading');
      var $btn_next = $('#fp_next');
      var $btn_prev = $('#fp_prev');
      var $thumbScroller = $('#thumbScroller');

var nmb_thumbs = $thumbScroller.find('.content').length;
    
      var cnt_thumbs = 0;
      for (var i = 0; i < nmb_thumbs; ++i) {
        var $thumb = $thumbScroller.find('.content:nth-child(' + parseInt(i + 1) + ')');
        $('<img/>').load(function () {
          ++cnt_thumbs;
          if (cnt_thumbs == nmb_thumbs)
            showThumbs(2000);
        }).attr('src', $thumb.find('img').attr('src'));
      }

makeScrollable();

$thumbScroller.find('.content').bind('click', function (e) {
        var $content = $(this);
        var $elem = $content.find('img');
        current = $content.index() + 1;
        var pos_left = $elem.offset().left;
        var pos_top = $elem.offset().top;
        var $clone = $elem.clone()
					.addClass('clone')
					.css({
					  'position': 'fixed',
					  'left': pos_left + 'px',
					  'top': pos_top + 'px'
					}).insertAfter($('BODY'));

var windowW = $(window).width();
        var windowH = $(window).height();

$clone.stop()
					.animate({
					  'left': windowW / 2 + 'px',
					  'top': windowH / 2 + 'px',
					  'margin-left': -$clone.width() / 2 - 5 + 'px',
					  'margin-top': -$clone.height() / 2 - 5 + 'px'
					}, 500,
					function () {
					  var $theClone = $(this);
					  var ratio = $clone.width() / 120;
					  var final_w = 400 * ratio;

$loader.show();

$('<img class="fp_preview"/>').load(function () {
					    var $newimg = $(this);
					    var $currImage = $('#fp_gallery').children('img:first');
					    $newimg.insertBefore($currImage);
					    $loader.hide();
					    $theClone.animate({
					      'opacity': 0,
					      'top': windowH / 2 + 'px',
					      'left': windowW / 2 + 'px',
					      'margin-top': '-200px',
					      'margin-left': -final_w / 2 + 'px',
					      'width': final_w + 'px',
					      'height': '400px'
					    }, 1000, function () { $(this).remove(); });
					    $currImage.fadeOut(2000, function () {
					      $(this).remove();
					    });
					    showNav();
					  }).attr('src', $elem.attr('alt'));
					});
        hideThumbs();
        e.preventDefault();
      });

$btn_thumbs.bind('click', function () {
        showThumbs(500);
        hideNav();
      });

function hideThumbs() {
        $('#outer_container').stop().animate({ 'bottom': '-160px' }, 500);
        showThumbsBtn();
      }

function showThumbs(speed) {
        $('#outer_container').stop().animate({ 'bottom': '0px' }, speed);
        hideThumbsBtn();
      }

function hideThumbsBtn() {
        $btn_thumbs.stop().animate({ 'bottom': '-50px' }, 500);
      }

function showThumbsBtn() {
        $btn_thumbs.stop().animate({ 'bottom': '0px' }, 500);
      }

function hideNav() {
        $btn_next.stop().animate({ 'right': '-50px' }, 500);
        $btn_prev.stop().animate({ 'left': '-50px' }, 500);
      }

function makeScrollable() {
        $(document).bind('mousemove', function (e) {
          var top = (e.pageY - $(document).scrollTop() / 2);
          $(document).scrollTop(top);
        });
      }
    });
  </script>
</head>
<body>
  <div id="fp_gallery" class="fp_gallery">
    <img src="jQuery/fullpageImageGallery/images/1.jpg" alt="" class="fp_preview" style="display: none;" />
    <div class="fp_overlay">
    </div>
    <div id="fp_loading" class="fp_loading">
    </div>
    <div id="fp_next" class="fp_next">
    </div>
    <div id="fp_prev" class="fp_prev">
    </div>
    <div id="outer_container">
      <div id="thumbScroller">
        <div class="container">
          <div class="content">
            <div>
              <a href="#">
                <img src="jQuery/fullpageImageGallery/images/thumbs/1.jpg" 
                  alt="jQuery/fullpageImageGallery/images/1.jpg" class="thumb" /></a>
            </div>
          </div>
          <div class="content">
            <div>
              <a href="#">
                <img src="jQuery/fullpageImageGallery/images/thumbs/2.jpg" 
                  alt="jQuery/fullpageImageGallery/images/2.jpg" class="thumb" /></a>
            </div>
          </div>
          <div class="content">
            <div>
              <a href="#">
                <img src="jQuery/fullpageImageGallery/images/thumbs/3.jpg" 
                  alt="jQuery/fullpageImageGallery/images/3.jpg" class="thumb" /></a>
            </div>
          </div>
          <div class="content">
            <div>
              <a href="#">
                <img src="jQuery/fullpageImageGallery/images/thumbs/4.jpg" 
                  alt="jQuery/fullpageImageGallery/images/4.jpg" class="thumb" /></a>
            </div>
          </div>
          <div class="content">
            <div>
              <a href="#">
                <img src="jQuery/fullpageImageGallery/images/thumbs/5.jpg" 
                  alt="jQuery/fullpageImageGallery/images/5.jpg" class="thumb" /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
  </div>
  <div>
    <span class="reference">
      <a href="http://www.flickr.com/photos/markjsebastian/">Photos by Mark Sebastian</a>
    </span>
  </div>
</body>
</html>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryのAPIを利用してフルページのイメージギャラリーを実装する

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

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

jQueryのAPIを利用してフルページのイメージギャラリーを実装する

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

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