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

実行結果

設置サンプル

【参照】jQuery Tools: Multiple overlays on a same page

同一ページ内に複数のオーバーレイを表示。

Au Temps Jadis #1

サラダ

Au Temps Jadis #2

ノルディック

Au Temps Jadis #3

塩バターキャラメルのクレープ

設置サンプルのソース

<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.tools.min.js"></script>
      <script type="text/javascript">
         $(function(){
            // オーバーレイの表示位置指定
             var positions = [
                 [150,300],
                 [150,550],
                 [150,800]
             ];     
             // setup triggers 
             $("button[rel]").each(function(i) { 
                 $(this).overlay({ 
                     // common configuration for each overlay 
                     oneInstance: false,
                     closeOnClick: false,
                     // setup custom finish position 
                     top: positions[i][0],
                     left: positions[i][1],
                     // use apple effect 
                     effect: 'apple' 
                 });
             }); 
         });
         // すべてのオーバーレイを開く
         function openAll() { 
             $("button[rel]").each(function() { 
                 $(this).overlay().load(); 
             }); 
         } 
          
         // すべてのオーバーレイを閉じる
         function closeAll() { 
             $("button[rel]").each(function() { 
                 $(this).overlay().close(); 
             }); 
         }
      </script>
      <style type="text/css">
         /* overlay */ 
         div.overlay, #overlay {
            padding:40px;
            width:150px;
            display:none;
            background-image:url(/content/img/ajax/jquery/white.png);
         }
         div.overlay div.close,
         #overlay div.close {
            background:url(/content/img/ajax/jquery/close.png) no-repeat;
            position:absolute;
            top:-2px; right:-2px;
            width:35px; height:35px;
            cursor:pointer;
         }
         #overlay_player {
            display:block;
            height:450px;
         }
         /* buttons */
         button {
            outline:1px outset #999;
            border:1px solid #fff;
            background-color:#222;
            color:#fff;
            margin:0 10px; padding:5px 10px;
            -moz-border-radius:5px;
            -moz-outline-radius:5px;
            cursor:pointer;
            font-size:11px;
         }
         .overlay h2 {
             margin:0; padding:0;
         }
         .overlay p.thumb {
            float:left;
            margin:0px 20px 20px 0; padding:0;
            width:75px; height:75px;
         }
      </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://flowplayer.org/tools/demos/overlay/multiple.html'>jQuery Tools: Multiple overlays on a same page</a></p>
         <p>同一ページ内に複数のオーバーレイを表示。</p>
<!-- CODE -->
         <!-- overlay buttons -->
         <p>
             <button rel="div.overlay:eq(0)" type="button">写真1</button>
             <button rel="div.overlay:eq(1)" type="button">写真2</button>
             <button rel="div.overlay:eq(2)" type="button">写真3</button>
         </p>
         <p>
            <button type="button" onclick="openAll()">すべて開く</button>
            <button type="button" onclick="closeAll()">すべて閉じる</button>
         </p>
         <div class="overlay">
            <h2 style="margin:10px 0">Au Temps Jadis <me>#1</me></h2>
            <p class="thumb"><img src="http://farm4.static.flickr.com/3639/3664935712_94ca67b18b_s.jpg" /></p>
            <p>サラダ</p>
         </div>
         <div class="overlay">
            <h2>Au Temps Jadis <me>#2</me></h2>
            <p class="thumb"><img src="http://farm4.static.flickr.com/3220/3664935670_b94968ccbc_s.jpg" /></p>
            <p>ノルディック</p>
         </div>
         <div class="overlay">
            <h2 style="margin:10px 0">Au Temps Jadis <me>#3</me></h2>
            <p class="thumb"><img src="http://farm4.static.flickr.com/3394/3664935528_16fff63afc_s.jpg" /></p>
            <p>塩バターキャラメルのクレープ</p>
         </div>
<!-- / CODE -->
   </body>
</html>