設置サンプル

PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参考：TopUp beta

画像

例1：基本


※a要素に「top_up」クラス指定。オプションなしのデフォルト（quicklook、ウィンドウリサイズ化）。

例2：単一表示


※toptions指定（shaded=1,overlayClose=1）＝ポップアップ時に背景を暗くし、背景クリックで閉じるを有効に。

例3：複数画像のグループ化


※レイアウト「dashboard」、リサイズ無効（resizable=0）

例4：複数画像のグループ化


※レイアウト「quicklook」、リサイズ有効、ポップアップ時に背景を暗く（shaded=1）、背景クリックで閉じるを有効（overlayClose=1）、エフェクト「clip」指定。

動画

YouTube動画

YouTube動画をみる 　※レイアウト「flatlook」、動画タイプ「flash」

SWF

SWFムービーをみる 　※レイアウト「quicklook」、ポップアップ時に背景を暗く（shaded=1）、エフェクト「clip」

QuickTimeムービー

QuickTimeムービーをみる 　※toptions指定（width=192,height=260,layout=dashboard,shaded=1）

Webページ

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:"&hearts;サンプルムービー&hearts;",
               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 &amp; 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&amp;hl=nl&amp;fs=1&amp;rel=0&amp;hd=1&amp;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>