自動スライドショー可能なポップアップ/画像表示/SolidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

SAMPLE
CODE
DownLoad

<!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=utf-8" />
<title>無題ドキュメント</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script> 
<script type="text/javascript"> 
Shadowbox.init({
    language: 'ja',
    players:  ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']
});
</script>
</head>

<body>

<a rel="shadowbox" href="1.jpg" class="option">シンプルに画像ポップアップ</a> 

<a rel="shadowbox[DogAuto];options={slideshowDelay:5}" href="2.jpg" title="title" class="option">自動スライドショー</a> 
<a rel="shadowbox[DogAuto];options={slideshowDelay:5}" href="3.jpg" title="title" class="hidden">image</a> 
<a rel="shadowbox[DogAuto];" href="4.jpg" class="hidden" title="title">image</a> 

<a rel="shadowbox[Dog];" href="2.jpg" title="title" class="option">手動スライドショー</a> 
<a rel="shadowbox[Dog];" href="3.jpg" class="hidden" title="title">image</a> 
<a rel="shadowbox[Dog];" href="4.jpg" class="hidden" title="title">image</a> 

<a rel="shadowbox;options={handleOversize:'none'}" href="re.jpg" title="MIYAJIMA" class="option">オーバーサイズ非表示</a>
<a rel="shadowbox;options={handleOversize:'drag'}" href="re.jpg" title="MIYAJIMA" class="option">ドラッグ＆ドロップ</a>

<a rel="shadowbox" title="Google.com" href="http://www.google.com/" class="option">Webポップアップ</a> 
</body>
</html>

	Shadowbox.js Media Viewer

Web , swf , flv , youtube , 画像等をポップアップして表示するスクリプトです。
画像は単体での表示から自動＆手動スライドショー、大きい画像はドラッグ＆ドロップで表示箇所を変えられたりします。
非商用の場合は無料で使用できるみたいです。

セッティング

１．ダウンロード/セッティング

サイトへ行き shadowbox-build-3.0b.zip をダウンロードしてください。
ラジオボタンで build or souce を選択できますが、容量を考えて build を選びます。
解凍したら適当な場所へアップロードしてください。

２．<head>設定

shadowbox.jsを読み込ませます。

次に設定を書き込みます。

詳細は省きますがこれで大体が使えるようになります。

３．HTMLマークアップ

基本的に以下の形で記述します。

<a rel="shadowbox" href="1.jpg" class="option">シンプルに画像ポップアップ</a>　

relに「 shadowbox 」と書き込むとリンク先の画像をポップアップします。

手動スライドショーにする場合は、

<a rel="shadowbox[Dog];" href="2.jpg" title="title" class="option">手動スライドショー</a>
<a rel="shadowbox[Dog];" href="3.jpg" class="hidden" title="title">image</a>
<a rel="shadowbox[Dog];" href="4.jpg" class="hidden" title="title">image</a>　

relに追加設定を書き込みます。
[Dog]の部分はスライドショーのグループ名でこれが付加されたものがスライドショーの対象になります。サンプルは最初の画像以外をCSSで非表示にしてますがこれを表示したりサムネイルでリンクを作ってもいいでしょう。

自動スライドショーの場合は、

<a rel="shadowbox[DogAuto];options={slideshowDelay:5}" href="2.jpg" title="title" class="option">自動スライドショー</a>
<a rel="shadowbox[DogAuto];options={slideshowDelay:5}" href="3.jpg" title="title" class="hidden">image</a>
<a rel="shadowbox[DogAuto];" href="4.jpg" class="hidden" title="title">image</a>　

relにさらに追加設定を記述します。
slideshowDelayの値は次の画像を表示するまでの秒数なのでお好みで調節してください。
最後の画像にはつけてもつけなくてもOKです。（先頭には戻らないので）

大きい画像を表示する場合は、

<a rel="shadowbox;options={handleOversize:'none'}" href="re.jpg" title="MIYAJIMA" class="option">オーバーサイズ非表示</a>
<a rel="shadowbox;options={handleOversize:'drag'}" href="re.jpg" title="MIYAJIMA" class="option">ドラッグ＆ドロップ</a>　

relのオプションを変更します。

Webの場合は、

<a rel="shadowbox" title="Google.com" href="http://www.google.com/" class="option">Webポップアップ</a>　

画像の時と同じように記述します。