JavaScript + Ajax 実践サンプル集 - jQueryでサムネイルナビゲーションギャラリーを実装する

jQueryでサムネイルナビゲーションギャラリーを実装する

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

このサンプルは、jQueryとCSSを利用してサムネイルナビゲーションギャラリーを実装しています。サンプルが表示されたら「Newest Collection」の右端に表示されてい[V]をクリックします。サムネイルの一覧が表示されたら任意のサムネイルをクリックして拡大してみてください。サムネイルにマウスを移動して左右に移動するとサムネイルがスライドします。サムネイルを閉じるには[^]をクリックします。

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

このサンプルのソースと解説は、ここをクリックしてください。

<!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>Thumbnails Navigation Gallery with jQuery</title>
  <link href="jQuery/thumbnailsNavigationGallery/css/style.css" rel="stylesheet" type="text/css" />
  <link href="jQuery/thumbnailsNavigationGallery/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/thumbnailsNavigationGallery/js/cufon-yui.js" type="text/javascript"></script>
  <script src="jQuery/thumbnailsNavigationGallery/js/Quicksand_Book_400.font.js" type="text/javascript"></script>
  <script type="text/javascript">
    Cufon.replace('span,p,h1', {
      textShadow: '0px 0px 1px #ffffff'
    });
  </script>
  <script type="text/javascript">
    $(function () {
      
      var $loader = $('#st_loading');
      
      var $list = $('#st_nav');
     
      var $currImage = $('#st_main').children('img:first');

$('<img>').load(function () {
        $loader.hide();
        $currImage.fadeIn(3000);
        
        setTimeout(function () {
          $list.animate({ 'left': '0px' }, 500);
        },
					1000);
      }).attr('src', $currImage.attr('src'));

buildThumbs();

function buildThumbs() {
        $list.children('li.album').each(function () {
          var $elem = $(this);
          var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
          var $thumbs = $thumbs_wrapper.children(':first');

var finalW = $thumbs.find('img').length * 183;
          $thumbs.css('width', finalW + 'px');
       
          makeScrollable($thumbs_wrapper, $thumbs);
        });
      }

$list.find('.st_arrow_down').live('click', function () {
        var $this = $(this);
        hideThumbs();
        $this.addClass('st_arrow_up').removeClass('st_arrow_down');
        var $elem = $this.closest('li');
        $elem.addClass('current').animate({ 'height': '170px' }, 200);
        var $thumbs_wrapper = $this.parent().next();
        $thumbs_wrapper.show(200);
      });
      $list.find('.st_arrow_up').live('click', function () {
        var $this = $(this);
        $this.addClass('st_arrow_down').removeClass('st_arrow_up');
        hideThumbs();
      });

$list.find('.st_thumbs img').bind('click', function () {
        var $this = $(this);
        $loader.show();
        $('<img class="st_preview"/>').load(function () {
          var $this = $(this);
          var $currImage = $('#st_main').children('img:first');
          $this.insertBefore($currImage);
          $loader.hide();
          $currImage.fadeOut(2000, function () {
            $(this).remove();
          });
        }).attr('src', $this.attr('alt'));
      }).bind('mouseenter', function () {
        $(this).stop().animate({ 'opacity': '1' });
      }).bind('mouseleave', function () {
        $(this).stop().animate({ 'opacity': '0.7' });
      });

function hideThumbs() {
        $list.find('li.current')
						 .animate({ 'height': '50px' }, 400, function () {
						   $(this).removeClass('current');
						 })
						 .find('.st_thumbs_wrapper')
						 .hide(200)
						 .andSelf()
						 .find('.st_link span')
						 .addClass('st_arrow_down')
						 .removeClass('st_arrow_up');
      }

コメント・提案の投稿！

名前
メール
件名
本文

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

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

jQueryでサムネイルナビゲーションギャラリーを実装する

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

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

jQueryでサムネイルナビゲーションギャラリーを実装する

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

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