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

実行結果

LightWindow v2.0 | 設置サンプル

Media

Windows Media Player

Windows Media Player埋め込み（asf）

※asx、wmv形式には対応していない模様。絶対パス（URI）を指定。相対パス不可。

※なぜかレイヤーを閉じようとすると、ブラウザが強制終了します。

Flash（シングル）

Flash埋め込み（swf）

※Flash素材は、FLASH SHOWERさんからお借りしました。

Flash（ギャラリー）

SWF Gallery - Header #1

PDF（swf形式）

Flash Paper

※PDFをFlash Paper（swf形式）に変換するには、Print2Flash（無料）を使用しました。

YouTube

You Tube（映画「300」トレイラー）

Webサイト

Webページをポップアップウィンドウ表示

Yahoo! JAPAN

インラインフレームからポップアウト表示

画像

シングル

画像表示

Flickrの画像を表示

ギャラリー

クリスマスパーティ

経企会議

フォーム

送信フォーム

送信フォーム（好きな位置に表示）

設置サンプルのソース

<!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>LightWindow v2.0 | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
       <link rel="stylesheet" type="text/css" href="/content/lib/lightwindow/lightwindow.css" />
       <style type="text/css">
          textarea { width:100%; margin:1em 0; padding:10px; font-size:85%; background-color:#fff; }
          .hidden { display:none; }
       </style>
      <script type="text/javascript" src="/content/lib/prototype/prototype-1.6.0.3.js"></script>
      <script type="text/javascript" src="/content/lib/scriptaculous/scriptaculous.js?load=effects"></script>
      <script type="text/javascript" src="/content/lib/lightwindow/lightwindow.js"></script>
   <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.stickmanlabs.com/lightwindow/">LightWindow v2.0</a> | 設置サンプル</h1>
         <h2>Media</h2>
         <h3>Windows Media Player</h3>
         <p><a href="http://phpjavascriptroom.com/content/media/SampleMovie.asf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=285,lightwindow_loading_animation=false,lightwindow_iframe_embed=true" >Windows Media Player埋め込み（asf）</a></p>
         <textarea><a href="http://phpjavascriptroom.com/content/media/SampleMovie.asf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=285,lightwindow_loading_animation=false,lightwindow_iframe_embed=true" >Windows Media Player埋め込み（asf）</a></textarea>
         <p>※asx、wmv形式には対応していない模様。絶対パス（URI）を指定。相対パス不可。</p>
         <p>※なぜかレイヤーを閉じようとすると、ブラウザが強制終了します。</p>

         <h3>Flash（シングル）</h3>
         <p><a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=110" title="クマさんが踊り続けるwelcomeムービー">Flash埋め込み（swf）</a></p>
         <textarea><a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" params="lightwindow_width=320,lightwindow_height=110" title="クマさんが踊り続けるwelcomeムービー">Flash埋め込み（swf）</a></textarea>
         <p>※Flash素材は、<a href="http://www.f-shower.com/">FLASH SHOWER</a>さんからお借りしました。</p>

         <h3>Flash（ギャラリー）</h3>
         <p>
            <a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" rel="Flash Gallery[Headers]" params="lightwindow_width=320,lightwindow_height=110" title="Gallery: クマさんが踊り続けるwelcomeムービー" author="FLASH SHOWERさん">SWF Gallery - Header #1</a>
            <a href="/content/media/flash/mv003b.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=500,lightwindow_height=400" title="Gallery: 植物が伸びるwelcomeムービー" author="FLASH SHOWERさん">Header #2</a>
            <a href="/content/media/flash/va002a.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=300,lightwindow_height=250" title="Gallery: バレンタイン用ムービー" author="FLASH SHOWERさん">Header #3</a>
         </p>
         <textarea><a href="/content/media/flash/mv016a.swf" class="lightwindow page-options" rel="Flash Gallery[Headers]" params="lightwindow_width=320,lightwindow_height=110" title="Gallery: クマさんが踊り続けるwelcomeムービー" author="FLASH SHOWERさん">SWF Gallery - Header #1</a>
<a href="/content/media/flash/mv003b.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=500,lightwindow_height=400" title="Gallery: 植物が伸びるwelcomeムービー" author="FLASH SHOWERさん">Header #2</a>
<a href="/content/media/flash/va002a.swf" class="lightwindow hidden" rel="Flash Gallery[Headers]" params="lightwindow_width=300,lightwindow_height=250" title="Gallery: バレンタイン用ムービー" author="FLASH SHOWERさん">Header #3</a>                     </textarea>

         <h3>PDF（swf形式）</h3>
         <p><a href="/content/demo/sample.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Flash Paper" >Flash Paper</a></p>
         <textarea><a href="/content/demo/sample.swf" class="lightwindow page-options" params="lightwindow_iframe_embed=true" title="Flash Paper" >Flash Paper</a></textarea>
         <p>※PDFをFlash Paper（swf形式）に変換するには、<a href='http://www.print2flash.com/'>Print2Flash</a>（無料）を使用しました。</p>

         <h3>YouTube</h3>
         <p><a href="http://www.youtube.com/v/uhi5x7V3WXE" class="lightwindow page-options" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" title="YouTube: 映画「300」トレイラー" >You Tube（映画「300」トレイラー）</a></p>
         <textarea><a href="http://www.youtube.com/v/uhi5x7V3WXE" class="lightwindow page-options" params="lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false" title="YouTube: 映画「300」トレイラー" >You Tube（映画「300」トレイラー）</a></textarea>

         <h2>Webサイト</h2>
         <h3>Webページをポップアップウィンドウ表示</h3>
         <p><a href="http://www.yahoo.co.jp/" class="lightwindow page-options" title="Ruby on Rails" caption="Yahoo! JAPAN">Yahoo! JAPAN</a></p>
         <textarea><a href="http://www.yahoo.co.jp/" class="lightwindow page-options" title="Ruby on Rails" caption="Yahoo! JAPAN">Yahoo! JAPAN</a></textarea>

         <h3>インラインフレームからポップアウト表示</h3>
         <p><iframe id="iframe_test" src="/content/lib/lightwindow/iframe.html" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="25" ></iframe></p>
         <textarea><iframe id="iframe_test" src="/content/lib/lightwindow/iframe.html" frameborder="1" allowtransparency="true" scrolling="no" width="100%" height="25" ></iframe></textarea>

         <h2>画像</h2>
         <h3>シングル</h3>
         <p><a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow page-options" title="クリスマスパーティー" author="Unknown" caption="仕事してたって、クリスマス気分♪">画像表示</a></p>
         <textarea><a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow page-options" title="クリスマスパーティー" author="Unknown" caption="仕事してたって、クリスマス気分♪">画像表示</a></textarea>
         <p><a href="http://farm3.static.flickr.com/2178/2334373239_4fdfaaa68b_o.jpg" class="lightwindow page-options" title="スタバの抹茶フローズンクリーム" author="Me" caption="まだ寒いのに、フローズン！しかも照らす席（汗；クリーーミーでおいしかった。抹茶味はそこまでつよくなくていい感じ。">Flickrの画像を表示</a></p>
         <textarea><a href="http://farm3.static.flickr.com/2178/2334373239_4fdfaaa68b_o.jpg" class="lightwindow page-options" title="スタバの抹茶フローズンクリーム" author="Me" caption="まだ寒いのに、フローズン！しかも照らす席（汗；クリーーミーでおいしかった。抹茶味はそこまでつよくなくていい感じ。">Flickrの画像を表示</a></textarea>

         <h3>ギャラリー</h3>
         <p>
            <a href="/content/lib/galleryimages/christmas-party-1.jpg" class="lightwindow page-options" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[1]" caption="なにやらクリスマスパーティーの打ち合わせの模様。" author="Unknown">クリスマスパーティ</a>
            <a href="/content/lib/galleryimages/christmas-party-2.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[2]" caption="おべんとう食べてるｗ" author="Unknown">#2</a>
            <a href="/content/lib/galleryimages/christmas-party-3.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[3]" caption="クリスマスですから、シャンパンだってラッパ飲みしちゃいます！" author="Unknown">#3</a>
            <a href="/content/lib/galleryimages/christmas-party-4.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[4]" caption="千鳥足でも踊れば分かりませんｗ" author="Unknown">#4</a>
            <a href="/content/lib/galleryimages/christmas-party-5.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[5]" caption="どさくさにまぎれてセクハラか！？" author="Unknown">#5</a>
            <a href="/content/lib/galleryimages/christmas-party-6.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[6]" caption="あーぁ。いますねこういうよっぱゲ。。" author="Unknown">#6</a>
            <a href="/content/lib/galleryimages/christmas-party-7.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[7]" caption="マイペースにもほどがあるとは、まさにｗ" author="Unknown">#7</a>
            <a href="/content/lib/galleryimages/christmas-party-8.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[8]" caption="リンボーダンスなんて調子に乗ってやってると怪我するよｗ" author="Unknown">#8</a>
            <a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[9]" caption="忙しくたって、クリスマス気分は味わえます、っていい例。" author="Unknown">#9</a>
         </p>
         <textarea><a href="/content/lib/galleryimages/christmas-party-1.jpg" class="lightwindow page-options" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[1]" caption="なにやらクリスマスパーティーの打ち合わせの模様。" author="Unknown">クリスマスパーティ</a>
<a href="/content/lib/galleryimages/christmas-party-2.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[2]" caption="おべんとう食べてるｗ" author="Unknown">#2</a>
<a href="/content/lib/galleryimages/christmas-party-3.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[3]" caption="クリスマスですから、シャンパンだってラッパ飲みしちゃいます！" author="Unknown">#3</a>
<a href="/content/lib/galleryimages/christmas-party-4.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[4]" caption="千鳥足でも踊れば分かりませんｗ" author="Unknown">#4</a>
<a href="/content/lib/galleryimages/christmas-party-5.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[5]" caption="どさくさにまぎれてセクハラか！？" author="Unknown">#5</a>
<a href="/content/lib/galleryimages/christmas-party-6.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[6]" caption="あーぁ。いますねこういうよっぱゲ。。" author="Unknown">#6</a>
<a href="/content/lib/galleryimages/christmas-party-7.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[7]" caption="マイペースにもほどがあるとは、まさにｗ" author="Unknown">#7</a>
<a href="/content/lib/galleryimages/christmas-party-8.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[8]" caption="リンボーダンスなんて調子に乗ってやってると怪我するよｗ" author="Unknown">#8</a>
<a href="/content/lib/galleryimages/christmas-party-9.jpg" class="lightwindow hidden" rel="Random[Christmas Party]" title="クリスマースパーティーの模様[9]" caption="忙しくたって、クリスマス気分は味わえます、っていい例。" author="Unknown">#9</a></textarea>
         <p>
            <a href="/content/lib/galleryimages/imagination-1.jpg" class="lightwindow page-options" rel="Evolution?[imagination]" title="経企会議" caption="いい大人が寄ってたかって、社名を考え込んでますｗ">経企会議</a>
            <a href="/content/lib/galleryimages/imagination-2.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="遊んでるのかと思いきや、ロゴの組み合わせをしてるようですｗ]">image #2</a>
            <a href="/content/lib/galleryimages/imagination-3.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="おやｗ何かひらめいたみたいですｗ]">image #3</a>
            <a href="/content/lib/galleryimages/imagination-4.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="どうやら決まったみたいですねーｗ]">image #4</a>
         </p>
         <textarea><a href="/content/lib/galleryimages/imagination-1.jpg" class="lightwindow page-options" rel="Evolution?[imagination]" title="経企会議" caption="いい大人が寄ってたかって、社名を考え込んでますｗ">経企会議</a>
<a href="/content/lib/galleryimages/imagination-2.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="遊んでるのかと思いきや、ロゴの組み合わせをしてるようですｗ]">image #2</a>
<a href="/content/lib/galleryimages/imagination-3.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="おやｗ何かひらめいたみたいですｗ]">image #3</a>
<a href="/content/lib/galleryimages/imagination-4.jpg" class="lightwindow hidden" rel="Evolution?[imagination]" title="どうやら決まったみたいですねーｗ]">image #4</a></textarea>

         <h3>フォーム</h3>
         <p><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow page-options">送信フォーム</a></p>
         <textarea><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60" class="lightwindow page-options">送信フォーム</a></textarea>
         <p><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60,lightwindow_top=200,lightwindow_left=300" class="lightwindow page-options">送信フォーム（好きな位置に表示）</a></p>
         <textarea><a href="/content/lib/lightwindow/form.html" params="lightwindow_width=175,lightwindow_height=60,lightwindow_top=200,lightwindow_left=300" class="lightwindow page-options">送信フォーム（好きな位置に表示）</a></textarea>
      </div>
   </body>
</html>