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

実行結果

multibox v1.3.1 | 設置サンプル

画像ギャラリー

どこから食べようか考えちゃうよねw
1時間20分並んで買いましたw
フォカッチャとアメリカンサイズのカフェオレでまったり~♪

動画ファイルをウィンドウ表示

QuickTime(.mov)
QuickTime

Windows Media Player(.wmv)
Windows Media Player

RealPlayer(.rm)
RealPlayer

外部ファイルを読み込んで表示

指定したHTMLページをiframe内に読み込んでウィンドウ表示
指定したHTMLページをiframe内に読み込んでウィンドウ表示

ページ内の指定したID要素の内容をウィンドウ表示
ページ内の指定したID要素の内容をウィンドウ表示

クリスピー・クリーム・ドーナツ

Krispy Kreme Doughnuts

新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!

指定したURLのページをiframeに読み込んでウィンドウ表示
指定したURLのページをiframeに読み込んでウィンドウ表示

設置サンプルのソース

<!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>multibox | 設置サンプル</title>
      <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
      <script type="text/javascript" src="/content/lib/mootools/mootools.v1.11.js"></script>
      <script type="text/javascript" src="/content/lib/utils/overlay.js"></script>
      <script type="text/javascript" src="/content/lib/multibox/multibox.js"></script>
      <link rel="stylesheet" href="/content/lib/multibox/multibox.css" type="text/css" media="all" />
      <!--[if lte IE 6]><link rel="stylesheet" href="/content/lib/multibox/ie6.css" type="text/css" media="all" /><![endif]-->
   <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><a href='http://www.phatfusion.net/multibox/'>multibox v1.3.1</a> | 設置サンプル</h1>

         <h2>画像ギャラリー</h2>
         <a href="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" id="mb1" class="mb" title="くまさんケーキ"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" alt="" /></a>
         <div class="multiBoxDesc mb1">どこから食べようか考えちゃうよねw</div>

         <a href="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" id="mb2" class="mb" title="クリスピー・クリーム・ドーナツ"><img src="http://farm4.static.flickr.com/3141/2973155055_4cf4370939_s.jpg" alt="" /></a>
         <div class="multiBoxDesc mb2">1時間20分並んで買いましたw</div>

         <a href="http://farm4.static.flickr.com/3029/2970912983_6a7632aa8a_o.jpg" id="mb3" class="mb" title="CAFE EAT@代官山"><img src="http://farm4.static.flickr.com/3029/2970912983_543c9af1d2_s.jpg" alt="" /></a>
         <div class="multiBoxDesc mb3">フォカッチャとアメリカンサイズのカフェオレでまったり~♪</div>

         <h2>動画ファイルをウィンドウ表示</h2>

         <a href="media/SampleMovie.mov" rel="width:190,height:258" id="mb5" class="mb" title="Movie">QuickTime(.mov)</a>
         <div class="multiBoxDesc mb5">QuickTime</div><br>

         <a href="media/SampleMovie_low.wmv" rel="width:320,height:285" id="mb6" class="mb" title="Movie">Windows Media Player(.wmv)</a>
         <div class="multiBoxDesc mb6">Windows Media Player</div><br>

         <a href="media/SampleMovie.rm" rel="width:176,height:316" id="mb7" class="mb" title="Movie">RealPlayer(.rm)</a>
         <div class="multiBoxDesc mb7">RealPlayer</div><br>

         <h2>外部ファイルを読み込んで表示</h2>
         <a href="/content/demo/sample.html" rel="width:400,height:300" id="mb9" class="mb" title="HTMLページ(インラインフレーム)">指定したHTMLページをiframe内に読み込んでウィンドウ表示</a>
         <div class="multiBoxDesc mb9">指定したHTMLページをiframe内に読み込んでウィンドウ表示</div><br>

         <a href="#htmlElement" rel="type:element" id="mb11" class="mb" title="HTMLページ">ページ内の指定したID要素の内容をウィンドウ表示</a>
         <div class="multiBoxDesc mb11">ページ内の指定したID要素の内容をウィンドウ表示</div><br>
         <div id="htmlElement" style="padding:0; width:320px;">
            <p style="padding:0; margin:0;">
               <a href="http://www.flickr.com/photos/22559849@N06/2973155055/" title="クリスピー・クリーム・ドーナツ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3141/2973155055_385036c286_o.png" width="320" height="240" alt="クリスピー・クリーム・ドーナツ" /></a>
            </p>
            <h2>Krispy Kreme Doughnuts</h2>
            <p style="padding:10px;">
               新宿サザンテラスにいつも長蛇の列を作っている人気のドーナツ屋さん「クリスピー・クリーム・ドーナツ」。ドーナツの箱がピザの箱みたいでアメリカン!すごく甘いのかと思ってたら、意外とほどよい甘さ。生地はややわらかくてふんわりしてました!
            </p>
         </div>

         <a href="http://www.google.co.jp/" rel="width:600,height:400" id="mb12" class="mb" title="外部サイト(インラインフレーム)">指定したURLのページをiframeに読み込んでウィンドウ表示</a>
         <div class="multiBoxDesc mb12">指定したURLのページをiframeに読み込んでウィンドウ表示</div><br>


         </div>
      <script type="text/javascript">
         var box = {};
         window.addEvent('domready', function(){
            box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
         });
      </script>
   </body>
</html>