JavaScript + Ajax 実践サンプル集 - イメージギャラリー

イメージギャラリー

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

このサンプルは、jQueryのgallery()プラグインを利用してイメージギャラリーを表示します。サンプルが表示されたら「JQUERY GALLERY」の右側の「COLLECTION 1」をクリックします。すると「GALLERY1-3」が表示されますのでお好きなギャラリーをクリックします。先頭のイメージが表示されたらイメージの上部にマウスを移動します。このギャラリーに登録されているイメージのサムネイルが表示されますので選択します。イメージ上部の左右に表示されている[back]と[next]をクリックして切り替えることもできます。

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

イメージギャラリーで表示するイメージは、images.jsファイルに格納されています。ここでは、flickr.comのイメージを表示しています。

var images = {
'collection 1' : {
  'gallery 1' : [
    'http://farm4.static.flickr.com/3169/2658701268_f02946413d.jpg',
    'http://farm4.static.flickr.com/3156/2570392533_8a03b999b7.jpg',
    'http://farm4.static.flickr.com/3068/2545650273_8f8ca22fb5.jpg',
    'http://farm4.static.flickr.com/3024/2530880977_ff6cfc5012.jpg'
  ],
  'gallery 2' : [
    'http://farm3.static.flickr.com/2160/2150890145_1b93f5c407.jpg',
    'http://farm3.static.flickr.com/2114/2077867996_9f894fedd3.jpg',
    'http://farm3.static.flickr.com/2021/2048088388_454608c0cd.jpg'            
  ],
  'gallery 3' : [
    'http://farm3.static.flickr.com/2261/2039645366_7128d09091.jpg',
    'http://farm2.static.flickr.com/1432/627784315_5f23ba5f16.jpg',
    'http://farm2.static.flickr.com/1023/529567127_cf62646bd3.jpg',
    'http://farm1.static.flickr.com/181/484742183_c50397158f.jpg'
  ]
 }
};

<!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 - Image Gallery </title>
  <link href="jQuery/imageGallery/gallery.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/imageGallery/jquery.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/jquery.offset.js" type="text/javascript"></script>
  
  <script src="jQuery/imageGallery/iutil.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/ifx.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/ifxslide.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/ifxblind.js" type="text/javascript"></script>

init_menu($('#gallery-1').gallery());    
    
    });
  </script>

</head>
<body>

<div id="title">
    <h1><a href="#">jQuery Gallery<br/><strong>version 1.0</strong></a></h1>
  </div>

<div id="mainNav" class="clearfix">
    <small>view photo galleries:</small>
    <ul>
      <li class="nav" title="collection 1">
        <span>Collection 1</span>
        <ul>
          <li class="subnav"><a href="#" title="gallery 1">gallery 1</a></li>
          <li class="subnav"><a href="#" title="gallery 2">gallery 2</a></li>
          <li class="subnav last"><a href="#" title="gallery 3">gallery 3</a></li>
        </ul>
      </li>
    </ul>
  </div>

</div>

</body>
</html>

HEAD部BODY部

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

            
  <link href="jQuery/imageGallery/gallery.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/imageGallery/jquery.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/jquery.offset.js" type="text/javascript"></script>
  
  <script src="jQuery/imageGallery/iutil.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/ifx.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/ifxslide.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/ifxblind.js" type="text/javascript"></script>

  <script src="jQuery/imageGallery/jquery.gallery.js" type="text/javascript"></script>

  <script src="jQuery/imageGallery/reflection.js" type="text/javascript"></script>
  <script type="text/javascript" charset="utf-8">
    Reflection.defaultHeight = .25;
    Reflection.defaultOpacity = .35;
  </script>

  <script src="jQuery/imageGallery/images.js" type="text/javascript"></script>
  <script src="jQuery/imageGallery/menu.js" type="text/javascript"></script>
  
  <script type="text/javascript">
    $(function() {

    init_menu($('#gallery-1').gallery());    
    
    });
  </script>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

イメージギャラリー

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

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

イメージギャラリー

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

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