シンプルな Flash スライドショー「Simplest Flash Slideshow」のバージョン 1.1 です。
「Simplest Flash Slideshow」はフリーの Flash 素材です。商用も含め、無料で自由にご利用いただけます。また、リンク・著作権(クレジット)表記、及びご利用に際しての報告はご不要です。(※ 但し、再配布はご遠慮ください。)
下記よりファイルをダウンロードしてご使用ください。
download ( v1.1.zip / 311,421KB )
※ Flash を表示させるために jquery と、 swfobject を使用しています。
ダウンロードした zip ファイルを解凍したフォルダには以下のようなファイルが含まれます。「images」フォルダ内の画像はサンプルです。
v1.1 ┗ index.html ┗ Main.swf ┗ static ┗ expressInstall.swf ┗ flashslideshow.js ┗ jquery.js ┗ swfobject.js ┗ images ┗ photo01.jpg ┗ photo02.jpg ┗ photo03.jpg
以下は、「Simplest Flash Slideshow ver1.1」の設置方法を説明します。
まず、html の head 内に次のコードを記述します。
<script type="text/javascript" src="static/jquery.js"></script> <script type="text/javascript" src="static/swfobject.js"></script> <script type="text/javascript" src="static/flashslideshow.js"></script>
さらに上のコードに続いて、Flash へ渡すためのをパラメータを指定するコードを追加します。
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$("#flash").flashgarelly({
url: 'images/photo01.jpg,images/photo02.jpg,images/photo03.jpg',
w: '720px',
h: '340px',
delay: '5000',
loop: '0'
});
});
/* ]]> */
</script>
スライドショーに表示される画像は url パラメータで指定します。
html からの相対パスあるいは絶対パスで任意の枚数を指定することができます。このとき、画像パスは、「 , 」で区切って記述します。
上記の例では、「images/photo01.jpg」と「images/photo02.jpg」と「images/photo03.jpg」の 3 枚の画像を url パラメータで指定しています。
w パラメータと h パラメータでは、Flash の表示領域を設定します。このサイズはスライドショーで表示したい画像のサイズと等しくしておきます。
delay パラメータで指定している値は、画像の切り替わり時間を設定しています。デフォルトでは 5000 ミリ秒(5秒)となっています。これは、画像は表示されてから次の画像が表示を開始する(フェードインが始まる)までの時間です。
loop パラメータでは、スライドショーがループをするかどうかを指定できます。
デフォルトの 0 ではスライドショーはループをしません。この値を 1 にするとスライドショーが最後の画像まで行くと最初の画像に戻ってループをし続けます
最後に、body 内に次のコードを追加します。このコードを埋め込んだ場所に Flash コンテンツが表示されます。
<div id="flash"></div>
Post your comment