自動切替・サムネイルスライドショー｜フォトギャラリー設置方法 Tips【myisland】

自動切替・サムネイルスライドショー/Photo Gallery #04

このサンプルは、表示する画像を配列で指定する事で、自動的に写真を切り替えて表示してくれます。
特に、iPhoto同様に写真が移動しながら表示される点や、写真が変わる際にフェードアウトしながらと言う演出が良いですね。

【DEMO】

▶ #04 Overlap　　　 ▶ #04 NoOverlap　　　 ▶ #04 Flash　　　 ▶ #04 Fold　　　 ▶ #04 Kenburns　　　 ▶ #04 Push

【ディレクトリ構成例】

index.html (gallery.htmlギャラリートップページ)
　　　 |
　　　 +-- css / slideshow.css
　　　 | 　　　　　 controller.png
　　　 | 　　　　　 controller-first.gif
　　　 | 　　　　　 controller-last.gif
　　　 | 　　　　　 controller-next.gif
　　　 | 　　　　　 controller-pause.gif
　　　 | 　　　　　 controller-prev.gif
　　　 |
　　　 +-- js / mootools.js
　　　 | 　　　　 slideshow.js
　　　 |
　　　 +-- images / controller.png
　　　　　　　　　　　　　 controller-first.gif
　　　　　　　　　　　　　 controller-last.gif
　　　　　　　　　　　　　 controller-next.gif
　　　　　　　　　　　　　 controller-pause.gif
　　　　　　　　　　　　　 controller-prev.gif
　　　　　　　　　　　　　 1t.jpg
　　　　　　　　　　　　　 1.jpg
　　　　　　　　　　　　　 2t.jpg
　　　　　　　　　　　　　 2.jpg
　　　　　　　　　　　　　 3t.jpg
　　　　　　　　　　　　　 3.jpg
　　　　　　　　　　　　　 4t.jpg
　　　　　　　　　　　　　 4.jpg
　　　　　　　　　　　　　 5t.jpg
　　　　　　　　　　　　　 5.jpg
　　　　　　　　　　　　　 6t.jpg
　　　　　　　　　　　　　 6.jpg
　　　　　　　　　　　　　 7t.jpg
　　　　　　　　　　　　　 7.jpg
　　　　　　　　　　　　　 8t.jpg
　　　　　　　　　　　　　 8.jpg
　　　　　　　　　　　　　 9t.jpg
　　　　　　　　　　　　　 9.jpg

【code】

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

html
css
javascript
image
Sample Code

【html】

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

<div id="show" class="slideshow">
<img src="images/1.jpg" alt="写真画像のタイトル" />
</div>

【slideshow.css】

slideshow.css

【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>フォトギャラリーサンプル #04</title>
<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'1.jpg': { caption: 'タイトル1' },
'2.jpg': { caption: 'タイトル2' },
'3.jpg': { caption: 'タイトル3' },
'4.jpg': { caption: 'タイトル4' },
'5.jpg': { caption: 'タイトル5' },
'6.jpg': { caption: 'タイトル6' },
'7.jpg': { caption: 'タイトル7' },
'8.jpg': { caption: 'タイトル8' },
'9.jpg': { caption: 'タイトル9' }
};
var myShow = new Slideshow('show', data, {controller: true, height: 450, hu: 'images/', thumbnails: true, width: 600});
});
//]]>
</script>
</head>
<body>
<div id="show" class="slideshow">
<img src="images/1.jpg" alt="写真画像のタイトル" />
</div>
</body>
</html>

お役立ちツール

Code license
MIT License
素材配布先