設置サンプル

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

実行結果

設置サンプル

参照：Thickbox 3.1

インナーコンテンツ

　ThickBox内に下記の赤枠で囲まれている要素の内容を表示します。

くまさんケーキ むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写！どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかｗ

モーダルコンテンツを表示.

インラインフレームコンテンツ

シングルイメージ

Image

ギャラリーイメージ

写真素材：NWYH Stock Image Library

設置サンプルのソース

<!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>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script>
      <script type="text/javascript" src="/content/lib/thickbox3/thickbox.js"></script>
      <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
      <link rel="stylesheet" href="/content/lib/thickbox3/thickbox.css" type="text/css" />
      <style type="text/css">
         div.gallery {
            margin:1em 0; padding:0;
         }
         div.gallery ul {
            margin:0; padding:0;
            list-style:none;
            overflow:hidden;
         }
         div.gallery li {
            margin:0 0 1em 10px; padding:0;
            display:block;
            float:left;
            width:160px;
            text-align:center;
            background-color:#eee;
            border:1px solid #ccc;
         }
         div.gallery p {
            margin:0 0 5px 0; padding:0;
         }
         div.gallery div.title {
            margin:0 0 10px 0; padding:2px 5px;
            background-color:#ccc;
            color:#fff;
            font-weight:bold;
         }
         div.gallery div.image {
            margin:10px auto; padding:0;
            width:140px; height:120px;
            overflow:hidden;
         }
         .hide {
            display:none;
         }
      </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://jquery.com/demo/thickbox/">Thickbox 3.1</a></p>
         <div id="content">
            <h2>インナーコンテンツ</h2>
            <p><input alt="#TB_inline?height=100&amp;width=400&amp;inlineId=myOnPageContent" title="タイトル部分" class="thickbox" type="button" value="表示" />　ThickBox内に下記の赤枠で囲まれている要素の内容を表示します。</p>
            <div id="myOnPageContent" style="border:1px solid red; padding:10px;">
               <div><a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_736e2d5b50_s.jpg" width="75" height="75" alt="くまさんケーキ" align="left" style="border:3px solid #000; margin:0 10px 5px 0;" /></a>
                  むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。新宿アルタの地下で見かけて思わず激写！どこから食べようか考えちゃうよね。とりあえず耳からいっておきますかｗ
                  <br clear="all" />
               </div>
            </div>

            <p><a href="#TB_inline?height=200&width=360&inlineId=hiddenModalContent&modal=true" class="thickbox">モーダルコンテンツを表示.</a></p>
            <div id="hiddenModalContent" style="display:none;">
               <div style="text-align:center;margin:0 auto;">
                  <a href="http://www.flickr.com/photos/22559849@N06/2974008614/" title="くまさんケーキ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3222/2974008614_f4b59bf651_o.png" width="320" height="240" alt="くまさんケーキ" /></a>

                  <p>むにゅっとした顔がちょっとムカつく、くまの顔をしたケーキ。<br>新宿アルタの地下で見かけて思わず激写！<br>どこから食べようか考えちゃうよね。<br>とりあえず耳からいっておきますかｗ</p>
                  <input type="submit" id="Login" value="&nbsp;&nbsp;閉じる&nbsp;&nbsp;" onclick="tb_remove()" />
               </div>
            </div>

            <h2>インラインフレームコンテンツ</h2>
            <ul>
               <li><a href="index.php?keepThis=true&TB_iframe=true&height=400&width=600" title="PHP & JavaScript Room" class="thickbox">index.phpを表示</a></li>
               <li><a href="http://www.google.co.jp?keepThis=true&TB_iframe=true&height=400&width=600" title="Google" class="thickbox">Googleを表示</a></li>
               <li><a href="/content/libthickbox3/iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="HTMLコンテンツをインラインフレーム表示" class="thickbox">Open iFrame Modal</a></li>
            </ul>

            <h2>シングルイメージ</h2>
            <p>
               <a href="/content/libgalleryimages/image.jpg" title="クリスマスパーティー" class="thickbox"><img src="/content/libgalleryimages/thumb/image.jpg" alt="Image" /></a>
            </p>
            <h2>ギャラリーイメージ</h2>
            <div class="gallery">
               <ul>
<!-- Achievement [start] -->
                  <li>
                     <div class="cf">
                        <div class="title">Achievement</div>
                        <p>
                           <a href="/content/libgalleryimages/achievement-1.jpg" title="Achievement #1" class="thickbox" rel="achievement"><img src="/content/libgalleryimages/thumb/achievement.jpg" width="140" height="120" alt="Achievement" /></a>
                           <a href="/content/libgalleryimages/achievement-2.jpg" title="Achievement #2" class="thickbox hide" rel="achievement">#2</a>
                        </p>
                     </div>
                  </li>
<!-- Achievement [end] // -->

<!-- Imagenation [start] -->
                  <li>
                     <div class="cf">
                        <div class="title">Imagination</div>
                        <p>
                           <a href="/content/libgalleryimages/imagination-1.jpg" title="Imagination #1" class="thickbox" rel="imagination"><img src="/content/libgalleryimages/thumb/imagination.jpg" width="140" height="120" alt="Imagination" /></a>
                           <a href="/content/libgalleryimages/imagination-2.jpg" title="Imagination #2" class="thickbox hide" rel="imagination">#2</a>
                           <a href="/content/libgalleryimages/imagination-3.jpg" title="Imagination #3" class="thickbox hide" rel="imagination">#3</a>
                           <a href="/content/libgalleryimages/imagination-4.jpg" title="Imagination #4" class="thickbox hide" rel="imagination">#4</a>
                        </p>
                     </div>
                  </li>
<!-- Imagination [end] // -->

<!-- Christmas Party [start] -->
                  <li>
                     <div class="cf">
                        <div class="title">Christmas Party</div>
                        <p>
                           <a href="/content/libgalleryimages/christmas-party-1.jpg" title="Christmas Party #1" class="thickbox" rel="christmas-party"><img src="/content/libgalleryimages/thumb/christmas-party.jpg" width="140" height="120" alt="Christmas Party" /></a>
                           <a href="/content/libgalleryimages/christmas-party-2.jpg" title="Christmas Party #2" class="thickbox hide" rel="christmas-party">#2</a>
                           <a href="/content/libgalleryimages/christmas-party-3.jpg" title="Christmas Party #3" class="thickbox hide" rel="christmas-party">#3</a>
                           <a href="/content/libgalleryimages/christmas-party-4.jpg" title="Christmas Party #4" class="thickbox hide" rel="christmas-party">#4</a>
                           <a href="/content/libgalleryimages/christmas-party-5.jpg" title="Christmas Party #5" class="thickbox hide" rel="christmas-party">#5</a>
                           <a href="/content/libgalleryimages/christmas-party-6.jpg" title="Christmas Party #6" class="thickbox hide" rel="christmas-party">#6</a>
                           <a href="/content/libgalleryimages/christmas-party-7.jpg" title="Christmas Party #7" class="thickbox hide" rel="christmas-party">#7</a>
                           <a href="/content/libgalleryimages/christmas-party-8.jpg" title="Christmas Party #8" class="thickbox hide" rel="christmas-party">#8</a>
                           <a href="/content/libgalleryimages/christmas-party-9.jpg" title="Christmas Party #9" class="thickbox hide" rel="christmas-party">#9</a>
                        </p>
                     </div>
                  </li>
<!-- Christmas Party [end] // -->

<!-- Technology [start] -->
                  <li>
                     <div class="cf">
                        <div class="title">Technology</div>
                        <p>
                           <a href="/content/libgalleryimages/technology-1.jpg" title="Technology #1" class="thickbox" rel="technology"><img src="/content/libgalleryimages/thumb/technology.jpg" width="140" height="120" alt="Technology" /></a>
                           <a href="/content/libgalleryimages/technology-2.jpg" title="Technology #2" class="thickbox hide" rel="technology">#2</a>
                           <a href="/content/libgalleryimages/technology-3.jpg" title="Technology #3" class="thickbox hide" rel="technology">#3</a>
                        </p>
                     </div>
                  </li>
<!-- Technology [end] // -->
               </ul>
            </div><!-- div#wrap/div#content/div.gallery -->
            <p>写真素材：<a href="http://www.nwyhstockimages.com/">NWYH Stock Image Library</a></p>
         </div><!-- div#wrap/div#content -->
      </div><!-- div#wrap -->
   </body>
</html>