リプタクのもう覚えられません
Google
Web サイト内
topmemo ▶ Shadowbox.jsとは

JavaScript

Shadowbox.jsとは

Shadowbox.jsはwebページ上に画像やFlashなどを重ねて表示する為のjavascriptライブラリ。

【画像クリックで拡大表示サンプル】


【配布元サイト】
Shadowbox.js

【ダウンロード】
配布元ダウンロードページよりオプションを選択しダウンロード




【使用方法】(shadowbox-3.0.3)
ダウンロードしたファイルを解凍したものを任意のディレクトリに格納する。

【htmlのhead部】
実装するhtmlと格納したcssとjsファイルをリンクさせShadowbox.init()を実行。


<link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css" />
<script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">Shadowbox.init();</script>


【htmlのbody部】
サムネイル画像に重ねたい画像をリンクさせrel="shadowbox"を追加。

<a href="sample01.jpg" rel="shadowbox" ><img src="sample01thum.jpg" /></a>




【その他サンプル】
タイトルを付ける場合

<a href="sample01.jpg" rel="shadowbox" title="タイトル">タイトルを付ける場合</a>


複数を順番に表示させる場合
サンプル1
サンプル2
サンプル3

<a href="sample01.jpg" rel="shadowbox[sample]" >サンプル1</a><br />
<a href="sample02.jpg" rel="shadowbox[sample]" >サンプル2</a><br />
<a href="sample03.jpg" rel="shadowbox[sample]" >サンプル3</a>


Flash(swfファイル)

<a href="sample.swf" rel="shadowbox;width=640;height=360" >Flash(swfファイル)</a>


youtube

<a href="http://www.youtube.com/embed/vOqXJ0pFsYg" rel="shadowbox;width=480;height=390" >youtube</a>


html

<a href="http://riptac.net/" rel="shadowbox;width=800;height=600" >html</a>
last update 2011.4.5
参考・出典等
Shadowbox.js

▲page top

topmemogalleryblogtestaboutlinksmail
Copylight(C)2008-2011 Riptac. All Rights Reserved.