Ultimate Fade-in slideshow

フェードイン、フェードアウトしながら画像が切り替わるクロスブラウザのスライドショーです。
まずは配布元のデモをご覧ください。

このスクリプトを実行するにはjQueryが必要です。

名称
Ultimate Fade-in slideshow (v2.1)
配布元
Dynamic Drive
ブラウザ対応
FF1+ IE6+ Opr9+
仕様許諾
Dynamic Drive DHTML scripts- Terms of Use

配布元では4種類のデモを設置しています。

  1. 画像のみのスライドショー
  2. キャプションを表示したままのスライドショー
  3. マウスカーソルをONするとキャプションを表示するスライドショー
  4. マニュアル操作で切り替えるスライドショー

ここでは2を設置してみました。

こちらを御覧ください。

CAMERA
OLYMPUS E-510
LENSE
LEICA D SUMMILUX 25mm/F1.4 ASPH.

設置方法

  1. Ultimate Fade-in slideshow (v2.1)のページからfadeslideshow.jsをダウンロードします。
  2. HEAD要素内に以下を記述します。
    赤い字の箇所は環境に合わせて書き換えてください。
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    	<script type="text/javascript" src="fadeslideshow.js">
    	/***********************************************
    	* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    	* This notice MUST stay intact for legal use
    	* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    	***********************************************/
    	</script>
    	<script type="text/javascript">
    	var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //スライドショーを表示させる空のDIV要素のIDです。
    	dimensions: [800, 600], //画像の幅/高さ。最も大きい画像のサイズを記述します。
    	imagearray: [
    	["ImageFilePass1.jpg", "", "", "キャプション"],
    	["ImageFilePass2", "URL Link", "_new", "この画像をクリックすると新規ウィンドウにリンク先を表示"],
    	["ImageFilePass3"],
    	["ImageFilePass4", "", "", "キャプション"] //<--最後となる画像の行末には ,(カンマ)を入れないでください。
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    	})
    	// 以下は1ページ内に複数のスライドショーを設置する場合。
    	var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    	["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    	["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    	["http://i30.tinypic.com/531q3n.jpg"],
    	["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "always",
    	togglerid: "fadeshow2toggler" //マニュアル操作で画像を切り替える場合に記述します。
    	})
    
    	</script>
  3. body要素内に以下を記述します。
    idは上記の wrapperid と同じにする必要があります。
    <div id="fadeshow1"></div>

オプション

displaymode

displaymode: {
	type:'auto|manual',
	pause:milliseconds,
	cycles:0|integer,
	wraparound:true|false,
	randomize:true|false
	},
type:
auto(自動モード)またはmanual(手動モード)に設定できます。manualの場合は切り替えのボタンを設置する必要があります。
詳しくは下記をご覧ください。
pause:
type:'auto'の場合に有効です。1画像の表示時間を1/1000秒単位で設定します。例:5秒の場合:pause:5000,
cycles:
0にすると永久に自動再生します。何枚目かで自動再生を停止したい場合は、その数字を設定します。
wraparound:
type:'manual'の場合に有効です。trueにすると最後の画像の次にまた最初から表示できます。falseにすると最後の画像からは戻るのみ可能となります。
randomize:
trueに設定するとランダムに表示します。

persist

同一セッション内で最後に表示した画像を記憶するかどうかを設定します。trueにすると最後の画像を記憶し、再度表示するときは前回の画像から再生されます。falseにすると最後の画像を記憶せず、常に最初の画像から表示します。

fadeduration

画像が切り替わる際のフェード効果の時間を1/1000秒単位で設定します。初期値は500(0.5秒)です。

descreveal

ondemand(初期値)では、画像にマウスオーバーしたしている間だけキャプションを表示します。alwaysに設定すると、常にキャプションを表示します。

togglerid

ナビゲーションパネル([←][→]ボタン)を表示するDIV要素のidを設定します。
手動モードでは必須となりますが、自動モードでも設置できます。詳しくは下記をご覧ください。

ナビゲーションパネルの設置方法

画像を1枚ずつ順送りまたは逆戻りさせるナビゲーションパネルの設置方法です。

<div id="slideshowtoggler">
	<a href="#" class="prev"><img src="left.png" style="border-width:0" /></a>
	<span class="status" style="margin:0 50px; font-weight:bold"></span>
	<a href="#" class="next"><img src="right.png" style="border-width:0" /></a>
	</div>

DIV要素のidはHEAD要素内のtoggleridオプションと同じにします。

CSSクラス名(class="prev"class="next")は変更しないでください。

ページトップに戻る