スライドイメージギャラリー｜フォトギャラリー設置方法 Tips【myisland】

スライドイメージギャラリー/Photo Gallery #08

このサンプルは、Webページの中央に現在のイメージを大きく表示します。
イメージを切り替えるには、左右に表示されているサムネイルをクリックします。
イメージを切り替えるときscriptaculous.jsのeffectsを使用して特殊効果を適用しています。

【DEMO】

▶ スライドイメージギャラリー/Photo Gallery #08

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / gallery08.css
　　　 |
　　　 +-- scripts / prototype.js
　　　 | 　　　　　　　 scriptaculous.js
　　　 | 　　　　　　　 frog.js
　　　 | 　　　　　　　 effects.js
　　　 |
　　　 +-- images /1_s.jpg
　　　　　　　　　　　　 1_b.jpg
　　　　　　　　　　　　 2_s.jpg
　　　　　　　　　　　　 2_b.jpg
　　　　　　　　　　　　 3_s.jpg
　　　　　　　　　　　　 3_b.jpg
　　　　　　　　　　　　 4_s.jpg
　　　　　　　　　　　　 4_b.jpg
　　　　　　　　　　　　 5_s.jpg
　　　　　　　　　　　　 5_b.jpg
　　　　　　　　　　　　 6_s.jpg
　　　　　　　　　　　　 6_b.jpg
　　　　　　　　　　　　 7_s.jpg
　　　　　　　　　　　　 7_b.jpg
　　　　　　　　　　　　 8_s.jpg
　　　　　　　　　　　　 8_b.jpg
　　　　　　　　　　　　 9_s.jpg
　　　　　　　　　　　　 9_b.jpg

【code】

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

html
css
javascript
image
Sample Code

【html】

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

<div id="FrogJS">
<a href="images/1_b.jpg" title="タイトル1"><img src="images/1_s.jpg" alt="画像紹介文" /></a>
<a href="images/2_b.jpg" title="タイトル2"><img src="images/2_s.jpg" alt="画像紹介文" /></a>
<a href="images/3_b.jpg" title="タイトル3"><img src="images/3_s.jpg" alt="画像紹介文" /></a>
<a href="images/4_b.jpg" title="タイトル4"><img src="images/4_s.jpg" alt="画像紹介文" /></a>
<a href="images/5_b.jpg" title="タイトル5"><img src="images/5_s.jpg" alt="画像紹介文" /></a>
<a href="images/6_b.jpg" title="タイトル6"><img src="images/6_s.jpg" alt="画像紹介文" /></a>
<a href="images/7_b.jpg" title="タイトル7"><img src="images/7_s.jpg" alt="画像紹介文" /></a>
<a href="images/8_b.jpg" title="タイトル8"><img src="images/8_s.jpg" alt="画像紹介文" /></a>
<a href="images/9_b.jpg" title="タイトル9"><img src="images/9_s.jpg" alt="画像紹介文" /></a>
</div>

【gallery08.css】

#FrogJS{
width: 100%;
margin: 0 auto;
}
#FrogJSCredit{
text-align: right;
font-size: 80%;
color: #999;
padding: 1px;
}
#FrogJSCaption{
text-align: left;
line-height: 140%;
}

【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>フォトギャラリーサンプル #08</title>
<link href="css/gallery08.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/frog.js"></script>
</head>
<body>
<div id="FrogJS">
<a href="images/1_b.jpg" title="タイトル1"><img src="images/1_s.jpg" alt="画像紹介文" /></a>
<a href="images/2_b.jpg" title="タイトル2"><img src="images/2_s.jpg" alt="画像紹介文" /></a>
<a href="images/3_b.jpg" title="タイトル3"><img src="images/3_s.jpg" alt="画像紹介文" /></a>
<a href="images/4_b.jpg" title="タイトル4"><img src="images/4_s.jpg" alt="画像紹介文" /></a>
<a href="images/5_b.jpg" title="タイトル5"><img src="images/5_s.jpg" alt="画像紹介文" /></a>
<a href="images/6_b.jpg" title="タイトル6"><img src="images/6_s.jpg" alt="画像紹介文" /></a>
<a href="images/7_b.jpg" title="タイトル7"><img src="images/7_s.jpg" alt="画像紹介文" /></a>
<a href="images/8_b.jpg" title="タイトル8"><img src="images/8_s.jpg" alt="画像紹介文" /></a>
<a href="images/9_b.jpg" title="タイトル9"><img src="images/9_s.jpg" alt="画像紹介文" /></a>
</div>
</body>
</html>

スライドイメージギャラリー