【ShadowBoxって何?】

先ずは下のMy Imageと書かれたリンクをクリックして見てください。

My Image

どうですか?このページの上に画像がかぶさるように表示されたでしょうか?

しかも表示の際に徐々にウインドウが大きくなるアニメーション付です。

これが簡単に出来ます。



【設置準備】
ShadowBoxにいきます。

 クリックで拡大

右側のDownloadをクリック


 クリックで拡大

下方のDownloadクリック


ダウンロードした圧縮ファイルを解凍しアップロードします。


【設置1】
設置したいhtmlファイルの<head>~</head>間に

<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>

と加える。

link rel="stylesheet" type="text/css" href="shadowbox.css : shadowbox.cssの相対パス

script type="text/javascript" src="shadowbox.js" : shadowbox.jsの相対パス

language: 'ja' : 言語 日本語(文字エンコードはcharset=utf-8にしないと動作しない。sift-jisの時はlanguage:'en',とする。)

players : 表示するために使用するプレーヤー

【設置2】
【クリックで画像表示】

My Image

<a href="photo/Flower-003.JPG" rel="shadowbox">My Image</a>

画像のリンクの後ろにrel="shadowbox"と付け加えるだけです。簡単でしょ。


【文字の代わりにサムネイル画像】



<a href="photo/Flower-003.JPG" rel="shadowbox"><img src="photo/thumb_Flower-003.jpg"></a>

文字My Imageの変わりに縮小した画像を置くだけです。

【大きな画像】
「大きい画像」をクリックすると画像が表示されます。画面に入りきらない大きさですね

これを使うとマウスのドラッグで画像を移動できます。

大きい画像

<a href="photo/DSC1.JPG" title="白孔雀 ドラッグで移動できます"
rel="shadowbox;options={handleOversize:'drag'}">大きい画像</a>

【手動スライドショー】
Slideをクリックすると1枚目の画像が表示されます。

画像の左上にはタイトルが、左下には3枚中の1枚目の表示があります。

右下の▸▸をクリックすると2枚目3枚目が表示されます。

画像のサイズも自動で調整されます。

Slide

<a href="photo/Flower-003.JPG" rel="shadowbox[flower]" title="花">Slide</a>
<a href="photo/kujaku.jpg" rel="shadowbox[flower]" title="白孔雀"></a>
<a href="photo/nanohana.jpg" rel="shadowbox[flower]" title="菜の花"></a>

rel="shadowbox[任意のグループ名]"とtitle="任意のタイトル名"を付けただけです。

【手動スライドショー loop】
最後の画像から最初の画像に移動するためには最後の画像に以下を付け加えます

;options={continuous:'true'}

Slide

<a href="photo/Flower-003.JPG" rel="shadowbox[flower2]" title="花">Slide</a>
<a href="photo/kujaku.jpg" rel="shadowbox[flower2]" title="白孔雀"></a>
<a href="photo/nanohana.jpg" rel="shadowbox[flower2];options={continuous:'true'}" title="菜の花"></a>

【カウンタータイプ】
スライドショー実行時通常左下のカウンターは1/3の様に表示される。skipを選択すると0 1 2 の様に表示される

Slide

<a href="photo/Flower-003.JPG" rel="shadowbox[flower5];options={counterType:'skip'}" title="花">Slide</a>
<a href="photo/kujaku.jpg" rel="shadowbox[flower5];options={counterType:'skip'}" title="白孔雀"></a>
<a href="photo/nanohana.jpg" rel="shadowbox[flower5];options={counterType:'skip'}" title="菜の花"></a>

;options={counterType:'skip'}を付け加える。

【自動スライドショー】  
自動スライドショーをクリックすると自動で画像が切り替わります。

自動スライドショー

<a href="photo/Flower-003.JPG" rel="shadowbox[flower3];options={slideshowDelay:5}" title="花">自動スライドショー</a>
<a href="photo/kujaku.jpg" rel="shadowbox[flower3];options={slideshowDelay:5}" title="白孔雀"></a>
<a href="photo/nanohana.jpg" rel="shadowbox[flower3];" title="菜の花"></a>

;options={slideshowDelay:5} : 5秒後に切り替わります。1枚目と2枚目に付け加えます。  
【自動スライドショー loop】
自動スライドショーloop

<a href="photo/Flower-003.JPG" rel="shadowbox[flower4];options={slideshowDelay:5}" title="花">自動スライドショーloop</a>
<a href="photo/kujaku.jpg" rel="shadowbox[flower4];options={slideshowDelay:5}" title="白孔雀"></a>
<a href="photo/nanohana.jpg" rel="shadowbox[flower4];options={continuous:'true'};options={slideshowDelay:5} " title="菜の花"></a>

最後の画像に;options={continuous:'true'};options={slideshowDelay:5} を付け加える

【他のページを表示する】  
Google Top

<a href="http://www.google.com/" rel="shadowbox;width=600;height=400" title="Google.com" >GoogleTop</a>

  width=600;height=400のサイズでグーグルTOPページが表示されました。インラインフレーム的に使えます。
【動画】  
YouTube

<a href="http://www.youtube.com/v/l6axhGSTFDs&hl=ja_JP&fs=1&" rel="shadowbox;width=425;height=344" title="ネコびっくり!">YouTube</a>

動画も表示できます。  
【Webページをスライド風に表示】
スライドショーの画像リンクにWebアドレス入れてみた。

WebPage

<a href="http://www.google.com" rel="shadowbox[web];width=600;height=400;options={counterType:'skip'}" title="Google"></a>
<a href="http://yahoo.co.jp" rel="shadowbox[web];width=600;height=400;options={counterType:'skip'}" title="Yahoo!"></a>
<a href="http://jp.msn.com" rel="shadowbox[web];width=600;height=400;options={counterType:'skip'}" title="MSN"></a>





blogram投票ボタン ←ポチッとお願いします     




Ads by Sitemix