参考:TopUp beta
※a要素に「top_up」クラス指定。オプションなしのデフォルト(quicklook、ウィンドウリサイズ化)。
※toptions指定(shaded=1,overlayClose=1)=ポップアップ時に背景を暗くし、背景クリックで閉じるを有効に。
※レイアウト「dashboard」、リサイズ無効(resizable=0)
※レイアウト「quicklook」、リサイズ有効、ポップアップ時に背景を暗く(shaded=1)、背景クリックで閉じるを有効(overlayClose=1)、エフェクト「clip」指定。
YouTube動画をみる ※レイアウト「flatlook」、動画タイプ「flash」
SWFムービーをみる ※レイアウト「quicklook」、ポップアップ時に背景を暗く(shaded=1)、エフェクト「clip」
QuickTimeムービーをみる ※toptions指定(width=192,height=260,layout=dashboard,shaded=1)
Google検索 Google画像検索 ※toptions指定(width=800,height=450,type=iframe,overlayClose=1,title=Google検索,shaded=1,layout=quicklook)
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <!-- JS --> <script type="text/javascript" src="/content/lib/jquery/top_up/top_up.js"></script> <script type="text/javascript"> TopUp.addPresets({ /* 例3 */ "#slideshow a": { group:"slideshow", layout:"dashboard", resizable:0 }, /* 例4 */ "#slideshow2 a": { group:"slideshow2", layout:"quicklook", shaded:1, overlayClose:1, effect:"clip" }, "#demo a.youtube": { layout:"flatlook", width:400, height:250, type:"flash", title:"寝てるとこ by cocoism3", resizable:0 }, "#demo a.swf": { layout:"quicklook", width:550, height:400, effect:"clip", shaded:1, title:"♥サンプルムービー♥", resizable:0 }, "#web a": { group:"web" } }); </script> <!-- CSS --> <style type="text/css"> #demo a img { vertical-align:middle; } </style> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h3 class='h'>実行結果</h3> <div id="wrap"> <h1>設置サンプル</h1> <p>参考:<a href='http://gettopup.com/' target='_blank'>TopUp beta</a></p> <!-- CODE --> <div id="demo"> <h2>画像</h2> <h3>例1:基本</h3> <p> <a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg" class="top_up"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a> <br>※a要素に「top_up」クラス指定。オプションなしのデフォルト(quicklook、ウィンドウリサイズ化)。 </p> <h3>例2:単一表示</h3> <p> <a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg" toptions="shaded=1,overlayClose=1"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a> <br>※toptions指定(shaded=1,overlayClose=1)=ポップアップ時に背景を暗くし、背景クリックで閉じるを有効に。 </p> <h3>例3:複数画像のグループ化</h3> <p id="slideshow"> <a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a> <a href="http://farm6.static.flickr.com/5003/5320540118_b8394f7736.jpg"><img src="http://farm6.static.flickr.com/5003/5320540118_b8394f7736_t.jpg" /></a> <a href="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2.jpg"><img src="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2_t.jpg" /></a> <br>※レイアウト「dashboard」、リサイズ無効(resizable=0) </p> <h3>例4:複数画像のグループ化</h3> <p id="slideshow2"> <a href="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99.jpg"><img src="http://farm6.static.flickr.com/5043/5335062455_5d4d79cb99_t.jpg" /></a> <a href="http://farm6.static.flickr.com/5003/5320540118_b8394f7736.jpg"><img src="http://farm6.static.flickr.com/5003/5320540118_b8394f7736_t.jpg" /></a> <a href="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2.jpg"><img src="http://farm6.static.flickr.com/5164/5272840331_4c6ac8b4c2_t.jpg" /></a> <br>※レイアウト「quicklook」、リサイズ有効、ポップアップ時に背景を暗く(shaded=1)、背景クリックで閉じるを有効(overlayClose=1)、エフェクト「clip」指定。 </p> <h2>動画</h2> <h3>YouTube動画</h3> <p> <a class="youtube" href="http://www.youtube.com/v/9YEEl52u8XE&hl=nl&fs=1&rel=0&hd=1&autoplay=1"><img src="/content/img/picon/youtube.png" />YouTube動画をみる</a> ※レイアウト「flatlook」、動画タイプ「flash」 </p> <h3>SWF</h3> <p> <a class="swf" href="/content/media/flash/va002a.swf"><img src="/content/img/picon/flash.png" />SWFムービーをみる</a> ※レイアウト「quicklook」、ポップアップ時に背景を暗く(shaded=1)、エフェクト「clip」 </p> <h3>QuickTimeムービー</h3> <p> <a href="media/SampleMovie.mov" toptions="width=192,height=260,layout=dashboard,shaded=1"><img src="/content/img/picon/mov.png" />QuickTimeムービーをみる</a> ※toptions指定(width=192,height=260,layout=dashboard,shaded=1) </p> <h2>Webページ</h2> <p id="web"> <a href="http://www.google.com" toptions="width=800,height=450,type=iframe,overlayClose=1,title=Google検索,shaded=1,layout=dashboard">Google検索</a> <a href="http://www.google.co.jp/imghp?hl=ja" toptions="width=800,height=450,type=iframe,overlayClose=1,title=Google画像検索,shaded=1,layout=quicklook">Google画像検索</a> ※toptions指定(width=800,height=450,type=iframe,overlayClose=1,title=Google検索,shaded=1,layout=quicklook) </p> </div> <!-- / CODE --> </div> </body> </html>