段階切り替えスライドショー｜フォトギャラリー設置方法 Tips【myisland】

段階切り替えスライドショー/Photo Gallery #07

このサンプルは、jQueryのpanelGallery()プラグインを利用してイメージを左側から次のイメージに徐々に表示が段階的に切り替えをいたします。

【DEMO】

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / panel.css
　　　 |
　　　 +-- js / jquery-1.3.2.min.js
　　　 | 　　　　 jquery.panelgallery-1_1.js
　　　 |
　　　 +-- images /1.jpg
　　　　　　　　　　　　 2.jpg
　　　　　　　　　　　　 3.jpg
　　　　　　　　　　　　4.jpg
　　　　　　　　　　　　5.jpg
　　　　　　　　　　　　6.jpg
　　　　　　　　　　　　7.jpg
　　　　　　　　　　　　8.jpg
　　　　　　　　　　　　9.jpg

【code】

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

html
css
javascript
image
Sample Code

【html】

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

<div id="main_image" style="width: 600px; height: 400px">
<img src="images/1.jpg" width="600" height="400" alt="タイトル1" />
<img src="images/2.jpg" width="600" height="400" alt="タイトル2" />
<img src="images/3.jpg" width="600" height="400" alt="タイトル3" />
<img src="images/4.jpg" width="600" height="400" alt="タイトル4" />
<img src="images/5.jpg" width="600" height="400" alt="タイトル5" />
<img src="images/6.jpg" width="600" height="400" alt="タイトル6" />
<img src="images/7.jpg" width="600" height="400" alt="タイトル7" />
<img src="images/8.jpg" width="600" height="400" alt="タイトル8" />
<img src="images/9.jpg" width="600" height="400" alt="タイトル9" />
</div>

【panel.css】

（Gallery #07デモで使用している写真画像全幅600pxを使用しています。

#main_image{
width: 600px;
position: relative;
margin: 0;
}

【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>フォトギャラリーサンプル #07</title>
<link href="css/panel.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.panelgallery-1_1.js"></script>
<script type="text/javascript">
$(function(){
$('#main_image').panelGallery({
sections:5,
imageTransitionDelay : 3000,
sectionTransitionDelay : 700,
startDelay : 2000,
repeat:true
});
});
</script>
</head>
<body>
<div id="main_image" style="width: 600px; height: 400px">
<img src="images/1.jpg" width="600" height="400" alt="タイトル1" />
<img src="images/2.jpg" width="600" height="400" alt="タイトル2" />
<img src="images/3.jpg" width="600" height="400" alt="タイトル3" />
<img src="images/4.jpg" width="600" height="400" alt="タイトル4" />
<img src="images/5.jpg" width="600" height="400" alt="タイトル5" />
<img src="images/6.jpg" width="600" height="400" alt="タイトル6" />
<img src="images/7.jpg" width="600" height="400" alt="タイトル7" />
<img src="images/8.jpg" width="600" height="400" alt="タイトル8" />
<img src="images/9.jpg" width="600" height="400" alt="タイトル9" />
</div>
</body>
</html>

お役立ちツール

*jQuery panelgallery plugin
*version 1.1 *date August 13, 2009
* copyright (c) 2009(catchmyfame.com)