このエントリーをはてなブックマークに追加

スペースギャラリー/Photo Gallery #09

このサンプルは、jQueryのSpaceGalleryプラグインを利用してイメージをアニメーション化して切り替えます。
イメージをクリックすると大きくズームしながら次のイメージと入れ替わります。

スポンサーリンク

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
    |
    +-- css / spacegallery.css
    |
    +-- jquery / jquery-1.3.2.min.js
    |    |
    |    +-- spacegallery / eye.js
    |                   utils.js
    |                   spacegallery.js
    |                   layout.js
    |
    +-- images /blank.gif
              ajax_small.gif
              1.jpg
              2.jpg
              3.jpg
              4.jpg
              5.jpg
              6.jpg
              7.jpg
              8.jpg
              9.jpg

【code】

編集・カスタマイズ等はエディタで開き修正をしてください。

【html】

HTMLファイルの<body></body>の間に下記のコードを入力します。

<img src="images/1.jpg(写真画像ファイル名)" alt="タイトル1(写真画像タイトル)" />

  • <div class="wrapper">
  • <div id="myGallery" class="spacegallery">
  • <img src="images/1.jpg" alt="タイトル1" />
  • <img src="images/2.jpg" alt="タイトル2" />
  • <img src="images/3.jpg" alt="タイトル3" />
  • <img src="images/4.jpg" alt="タイトル4" />
  • <img src="images/5.jpg" alt="タイトル5" />
  • <img src="images/6.jpg" alt="タイトル6" />
  • <img src="images/7.jpg" alt="タイトル7" />
  • <img src="images/8.jpg" alt="タイトル8" />
  • <img src="images/9.jpg" alt="タイトル9" />
  • </div>
  • </div>

【spacegallery.css】

  • .spacegallery {
  • position: relative;
  • overflow: hidden;
  • }
  • .spacegallery img {
  • position: absolute;
  • left: 50%;
  • }
  • .spacegallery a {
  • position: absolute;
  • z-index: 1000;
  • display: block;
  • top: 0;
  • left: 0;
  • width: 100%;
  • height: 100%;
  • background: url(../images/blank.gif);
  • }
  • #myGallery {
  • width: 100%;
  • height: 500px;
  • }
  • #myGallery img {
  • border: 2px solid #000;
  • }
  • a.loading {
  • background: #fff url(../images/ajax_small.gif) no-repeat center;
  • }

【images】

【Sample Code】

  • <!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>
  • <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  • <title>フォト ギャラリー サンプル #09</title>
  • <link href="css/spacegallery.css" rel="stylesheet" type="text/css" media="screen" />
  • <script type="text/javascript" src="jQuery/jquery-1.3.2.min.js"></script>
  • <script type="text/javascript" src="jQuery/spacegallery/eye.js"></script>
  • <script type="text/javascript" src="jQuery/spacegallery/utils.js"></script>
  • <script type="text/javascript" src="jQuery/spacegallery/spacegallery.js"></script>
  • <script type="text/javascript" src="jQuery/spacegallery/layout.js"></script>
  • </head>
  • <body>
  • <div class="wrapper">
  • <div id="myGallery" class="spacegallery">
  • <img src="images/1.jpg" alt="タイトル1" />
  • <img src="images/2.jpg" alt="タイトル2" />
  • <img src="images/3.jpg" alt="タイトル3" />
  • <img src="images/4.jpg" alt="タイトル4" />
  • <img src="images/5.jpg" alt="タイトル5" />
  • <img src="images/6.jpg" alt="タイトル6" />
  • <img src="images/7.jpg" alt="タイトル7" />
  • <img src="images/8.jpg" alt="タイトル8" />
  • <img src="images/9.jpg" alt="タイトル9" />
  • </div>
  • </div>
  • </body>
  • </html>