Tweet
スペースギャラリー/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
|
+-- 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;
- }
【javascript】
【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>