Ajax,Javascriptサンプル、画像表示系の設置方法
- Home>
- 画像表示>
- Popup表示(メディア)>
- 画像、web、ムービーをポップアップ表示
Popup表示(メディア)
rokbox,mootools
<!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>RokBox Examples</title>
<script type="text/javascript" src="mootools-release-1.11.js"></script>
<script type="text/javascript" src="rokbox.js"></script>
<link href="dark/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dark/rokbox-config.js"></script>
<style type="text/css">
img{vertical-align:middle;}
#wrapper{height:600px; background:#FFF;}
</style>
</head>
<body style="background:#000;">
<div id="wrapper">
<a href="images/1.jpg" rel="rokbox[530 444](demo)" title="Diamond butterfly :: Sample Image"><img src="images/1.jpg" width="265" height="222" alt="" /></a>
<a href="images/2.jpg" rel="rokbox[530 444](demo)" title="Jewel of grass :: Sample Image"><img src="images/2.jpg" width="265" height="222" alt="" /></a>
<a href="http://www.google.com/" rel="rokbox[fullscreen](demo)" title="Google"><img src="http://images.websnapr.com/?size=S&key=0OsY08xZ7WEL&url=http://www.google.com/" /></a>
</div>
</body>
</html>
画像、web、ムービーをポップアップ表示することが可能なrokbox.js。
画像のみでスライドショーはもちろん、画像、Web、ビデオなどまとめてポップアップしてスライドショーとしてみることもできます。
mootoolsを使用し、非商用ならフリーで使用可能なようです。
サイトへ行き rokbox-standalone_1.3.zip をダウンロードして下さい。
解凍したら、rokboxというフォルダが出てきますので、それを適当な場所へアップしてください。
必要なフォルダをアップしたら、それらを読み込む設定を記述します。
<script type="text/javascript" src="mootools-release-1.11.js"></script>
<script type="text/javascript" src="rokbox.js"></script>
<link href="dark/rokbox-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="dark/rokbox-config.js"></script>
パスは、任意で調節してください。（上記はデフォルトではありません）
このスクリプトには表示形式のテーマが２つ用意されており、dark/rokbox-style.css と dark/rokbox-config.js の箇所を変更すると各テーマを適用できます。
例えば、darkの部分を light と変更すれば、ホワイトベースの明るいポップアップテーマが適用されます。
最後にHTML要素をマークアップして終了です。
<a href="ポップアップ画像のパス"><img src="サムネイル画像のパス" /></a>
まずはこの形式でポップアップしたい画像をマークします。そして次に、
<a href="ポップアップ画像のパス" rel="rokbox[530 444]"><img src="サムネイル画像のパス" /></a>
上記サンプルのようにrelを書き込みます。カッコ内の数値はポップアップ画像のwidth , height です。
これを書き込んだら、次はキャプションを設定します。
<a href="ポップアップ画像のパス" rel="rokbox[530 444]" title="Diamond butterfly :: Sample Image"><img src="サムネイル画像のパス" /></a>
titleに書き込んだ内容がキャプションとして表示されます。
titleないで「 :: 」で区切っていますが、これにより見出しと説明の様な感じで、キャプションを調節できます。
Webサイトをポップアップ表示したい場合は、ポップアップ画像のパスを入れる箇所に、ポップアップしたサイトのURLを入力し、relにfullscreenと記述します。
<a href="http://www.google.com/" rel="rokbox[fullscreen]" title="Google">
製作元サイトにもっとサンプルがあるので、参考にして下さい。
スライドショーで表示するために、画像、Webなどのグループ設定をしてあげます。
<a href="ポップアップ画像のパス" rel="rokbox[530 444](demo)" title="Diamond butterfly :: Sample Image">
<a href="http://www.google.com/" rel="rokbox[fullscreen](demo)" title="Google">
rel内に(グループ名)を記述するだけで、まとめてスライドショーとして表示できるのでお試し下さい。
ちょっとしたモーションがオシャレですね。なにより使いやすいのがうれしいです。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
