JavaScript-Slideshow を使う。(2)

◆サンプルソース
簡単にサンプルソースを使って表示確認をします。
[英語版マニュアル]
http://www.electricprism.com/aeron/slideshow/#manual
(前提条件として、表示する画像を用意する必要があります。)

今回は下の3つの写真をスライドショーで表示することにします。
1.jpg2.jpg3.jpg

◆画像の配置
<img>タグははHTMLソースに<div>タグで囲む形で記述します。
このとき、<img>タグの外側の<div>タグにidとclassを指定する必要があります。
※<img>はScriptが実行されなかったときのために初期画像のみ指定します。
<div id="my_slideshow" class="slideshow">
<img src="../images/1.jpg" alt="画像説明" width="240" height="180" />
</div>

◆JavaScript記述
<head>タグ内にwindow.onloadのイベントとしてScriptを記述するか、
先ほどのイメージ配置を行った後(イメージ配置より下)に以下のScriptを記述します。
ブログに記述する場合は<pre>タグでScriptを囲み、
自動サニタイジングが行われないようにする必要がある、かもしれません。
(私はそうでした。)

<script type="text/javascript">
myShow = new Slideshow('my_slideshow', {hu: '../images/', images: ['1.jpg','2.jpg','3.jpg']});
</script>

<head>タグ内に記述する場合は以下のようになります。
<script type="text/javascript">
window.onload = function() { myShow = new Slideshow......}(以下同じ)
</script>

<各引数について>
[第一引数(my_slideshow)]
スライドショー表示する<div>タグのid名
[第二引数]
hu:画像のPath
images:画像ファイル名

このように表示が出来ました。わーい。
(スライドショーがはじまらない場合、クリックしてみてください。)

サンプル写真


次回から、プロパティの細かい解析を行っていきたいと思います。
(あと、できればもう少しよい写真を探します。)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください