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

実行結果

Animated JavaScript Slideshow | 設置サンプル

【水平型ナビゲーションギャラリー】

　↑ナビゲーションにマウスオーバーすると、選択したメニューの画像ギャラリーがページ上にホバー表示されます。

【垂直型ナビゲーションギャラリー】

　↓ナビゲーションにマウスオーバーすると、選択したメニューの画像ギャラリーがページ上にホバー表示されます。

設置サンプルのソース

<!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>Animated JavaScript Slideshow | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script type="text/javascript" src="/content/lib/suckerfish_hoverlightbox/navigation.js"></script>
      <script type="text/javascript" src="/content/lib/lightbox/lightbox.js"></script>
      <!-- CSS -->
      <style type="text/css">
         /* Lightbox Control */
         #lightbox { background-color:#000; padding:20px 20px 0 20px; color:#fff; }
         #lightboxDetails { padding-top:5px;   }
         #lightboxCaption { float:left; color:#fff; font-size:11px; }
         #keyboardMsg { float:right; }
         #keyboardMsg a { color:#fff; text-decoration:none; letter-spacing:2px; text-transform:uppercase; font-weight:bold; }
         #lightbox img { border:none; } 
         #overlay img { border:none; }
         #closebutton { display:none; }
         /* Horizontal（水平型ナビゲーションギャラリー） */
         #horizontal { height:250px; }
         #horizontal ul#gallery { margin:0; height:60px; list-style:none; position:relative; }
         #horizontal ul#gallery li { border-right:1px solid #000; width:100px; display:block; float:left; text-align:center; }
         #horizontal ul#gallery li#first { border-left:1px solid #000; }
         #horizontal ul#gallery li:hover ul, ul#gallery li.sfhover ul { top:auto; left:0; }
         #horizontal ul#gallery li a { display:block; width:100px; line-height:30px; color:#000; text-decoration:none; }
         #horizontal ul#gallery li a:hover { background-color:#000; color:#fff; }
         #horizontal ul#gallery li ul { list-style:none; margin:0; padding:10px; width:570px; background-color:#000; position:absolute; left:-999em; }
         #horizontal ul#gallery li ul li { display:inline; text-align:left; clear:none; float:none; border:0; }
         #horizontal ul#gallery li ul li a { margin:2px; border:1px solid #ccc; padding:4px; position:relative; float:left; display:block; width:100px; height:75px; background-color:#333; }
         #horizontal ul#gallery li ul li a:hover { z-index:2; }
         #horizontal ul#gallery li ul li a img { position:absolute; width:100px; height:75px; }
         #horizontal ul#gallery li ul li a:hover img, ul#gallery li a:active img, ul#gallery li a:focus img { width:200px; height:150px; left:-50px; top:-37px; z-index:1; border:1px solid #000; }
         /* Vertical（垂直型ナビゲーションギャラリー） */
         #vertical ul#gallery { margin:0; list-style:none; }
         #vertical ul#gallery li#first { border-top:1px solid #000; }
         #vertical ul#gallery li { clear:both; width:100px; position:relative; margin:0; padding:0; }
         #vertical ul#gallery li:hover ul, ul#gallery li.sfhover ul { left:100px; }
         #vertical ul#gallery li a { display:block; width:100px; height:30px; line-height:30px; color:#000; text-decoration:none; border-bottom:1px solid #000; }
         #vertical ul#gallery li a:hover { background-color:#000; color:#fff; }
         #vertical ul#gallery li ul { list-style:none; margin:0; padding:10px; width:570px; background-color:#000; position:absolute; left:-999em; top:-1px; }
         #vertical ul#gallery li ul li { display:inline; text-align:left; clear:none; position:static; z-index:2; } 
         #vertical ul#gallery li ul li a { margin:2px;  border:1px solid #fff; padding:4px; position:relative; float:left; display:block; width:100px; height:75px; background-color:#333; }
         #vertical ul#gallery li ul li a:hover { z-index:2; }
         #vertical ul#gallery li ul li a img { position:absolute; width:100px; height:75px; }
         #vertical ul#gallery li ul li a:hover img, ul#gallery li a:active img, ul#gallery li a:focus img { width:200px; height:150px; left:-50px; top:-37px; border:1px solid #000; z-index:2000; }
      </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><a href='http://www.leigeber.com/2008/12/javascript-slideshow/'>Animated JavaScript Slideshow</a> | 設置サンプル</h1>
<!-- CODE -->
         <h2>【水平型ナビゲーションギャラリー】</h2>
         <div id="horizontal">
            <ul id="gallery">
               <li id="first"><a href="gallery1/">高庵TOKYO</a>
                  <ul>
                     <li><a href="http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg" rel="lightbox" title="白子の昆布焼き"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="白子の昆布焼き" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg" rel="lightbox" title="ササミ焼わさびマヨネーズ"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="ササミ焼わさびマヨネーズ" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4.jpg" rel="lightbox" title="揚げ物"><img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" alt="揚げ物" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg" rel="lightbox" title="白レバー串みそ焼き"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="白レバー串みそ焼き" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg" rel="lightbox" title="屋台風羽根つき焼きラーメン"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="屋台風羽根つき焼きラーメン" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3031/3141100435_24ebb86016.jpg" rel="lightbox" title="芋焼酎とグラス"><img src="http://farm4.static.flickr.com/3031/3141100435_24ebb86016_m.jpg" alt="芋焼酎とグラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3278/3141100261_e0139b971e.jpg" rel="lightbox" title="えいひれ"><img src="http://farm4.static.flickr.com/3278/3141100261_e0139b971e_m.jpg" alt="えいひれ" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3124/3141100183_911b84afd5.jpg" rel="lightbox" title="モツァレラ入り軟骨つくね"><img src="http://farm4.static.flickr.com/3124/3141100183_911b84afd5_m.jpg" alt="モツァレラ入り軟骨つくね" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg" rel="lightbox" title="白子の雲丹のせ炙り"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="白子の雲丹のせ炙り" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg" rel="lightbox" title="自家製さつま揚げ二種"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="自家製さつま揚げ二種" /></a></li>
                   </ul>
               </li>
               <li><a href="gallery2/">サザンテラス</a>
                  <ul>
                     <li><a href="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3130/3142386079_f2335019bd.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3130/3142386079_f2335019bd_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3089/3143248598_018daa38eb_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg" rel="lightbox" title="Starbucks Coffee 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" alt="Starbucks Coffee 新宿サザンテラス店" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg" rel="lightbox" title="クリスピー・クリーム・ドーナツ 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3113/3142386067_fc176636eb_m.jpg" alt="クリスピー・クリーム・ドーナツ 新宿サザンテラス店" /></a></li>
                   </ul>
               </li>
               <li><a href="gallery3/">STARBUCKS</a>
                  <ul>
                     <li><a href="http://farm4.static.flickr.com/3113/3104684709_6911f58648.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3113/3104684709_6911f58648_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3066/3055162549_d846be528d.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3187/3053314468_406d68da67.jpg" rel="lightbox" title="豆乳ラテ@STARBUCKS"><img src="http://farm4.static.flickr.com/3187/3053314468_406d68da67_m.jpg" alt="豆乳ラテ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9.jpg" rel="lightbox" title="抹茶フローズンクリーム@STARBUCKS"><img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_m.jpg" alt="抹茶フローズンクリーム@STARBUCKS" /></a></li>
                   </ul>
               </li>
            </ul>
            <p>　↑ナビゲーションにマウスオーバーすると、選択したメニューの画像ギャラリーがページ上にホバー表示されます。 </p>
         </div>
         <h2>【垂直型ナビゲーションギャラリー】</h2>
         <div id="vertical">
            <p>　↓ナビゲーションにマウスオーバーすると、選択したメニューの画像ギャラリーがページ上にホバー表示されます。 </p>
            <ul id="gallery">
               <li id="first"><a href="gallery1/">高庵TOKYO</a>
                  <ul>
                     <li><a href="http://farm4.static.flickr.com/3197/3141927210_be00d22544.jpg" rel="lightbox" title="白子の昆布焼き"><img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="白子の昆布焼き" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304.jpg" rel="lightbox" title="ササミ焼わさびマヨネーズ"><img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="ササミ焼わさびマヨネーズ" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4.jpg" rel="lightbox" title="揚げ物"><img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" alt="揚げ物" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3215/3141100545_e21269fb11.jpg" rel="lightbox" title="白レバー串みそ焼き"><img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="白レバー串みそ焼き" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3247/3141926720_08ebc48824.jpg" rel="lightbox" title="屋台風羽根つき焼きラーメン"><img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="屋台風羽根つき焼きラーメン" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3031/3141100435_24ebb86016.jpg" rel="lightbox" title="芋焼酎とグラス"><img src="http://farm4.static.flickr.com/3031/3141100435_24ebb86016_m.jpg" alt="芋焼酎とグラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3278/3141100261_e0139b971e.jpg" rel="lightbox" title="えいひれ"><img src="http://farm4.static.flickr.com/3278/3141100261_e0139b971e_m.jpg" alt="えいひれ" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3124/3141100183_911b84afd5.jpg" rel="lightbox" title="モツァレラ入り軟骨つくね"><img src="http://farm4.static.flickr.com/3124/3141100183_911b84afd5_m.jpg" alt="モツァレラ入り軟骨つくね" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3015/3104684027_a215663229.jpg" rel="lightbox" title="白子の雲丹のせ炙り"><img src="http://farm4.static.flickr.com/3015/3104684027_a215663229_m.jpg" alt="白子の雲丹のせ炙り" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235.jpg" rel="lightbox" title="自家製さつま揚げ二種"><img src="http://farm4.static.flickr.com/3033/3104683957_a8b91f3235_m.jpg" alt="自家製さつま揚げ二種" /></a></li>
                   </ul>
               </li>
               <li><a href="gallery2/">サザンテラス</a>
                  <ul>
                     <li><a href="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3294/3142386083_582b0f39ba_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3130/3142386079_f2335019bd.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3130/3142386079_f2335019bd_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3214/3142429603_3b4ddd96a9_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3089/3143248598_018daa38eb.jpg" rel="lightbox" title="イルミネーション@サザンテラス"><img src="http://farm4.static.flickr.com/3089/3143248598_018daa38eb_m.jpg" alt="イルミネーション@サザンテラス" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3244/3142386073_87c62671a5.jpg" rel="lightbox" title="Starbucks Coffee 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3244/3142386073_87c62671a5_m.jpg" alt="Starbucks Coffee 新宿サザンテラス店" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3113/3142386067_fc176636eb.jpg" rel="lightbox" title="クリスピー・クリーム・ドーナツ 新宿サザンテラス店"><img src="http://farm4.static.flickr.com/3113/3142386067_fc176636eb_m.jpg" alt="クリスピー・クリーム・ドーナツ 新宿サザンテラス店" /></a></li>
                   </ul>
               </li>
               <li><a href="gallery3/">STARBUCKS</a>
                  <ul>
                     <li><a href="http://farm4.static.flickr.com/3113/3104684709_6911f58648.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3113/3104684709_6911f58648_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b.jpg" rel="lightbox" title="バニラミルクフラペチーノ@STARBUCKS"><img src="http://farm4.static.flickr.com/3021/3104684497_cfa7d9a05b_m.jpg" alt="バニラミルクフラペチーノ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3066/3055162549_d846be528d.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e.jpg" rel="lightbox" title="ダークチェリーモカ@STARBUCKS"><img src="http://farm4.static.flickr.com/3023/3055162547_cde4e8921e_m.jpg" alt="ダークチェリーモカ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3187/3053314468_406d68da67.jpg" rel="lightbox" title="豆乳ラテ@STARBUCKS"><img src="http://farm4.static.flickr.com/3187/3053314468_406d68da67_m.jpg" alt="豆乳ラテ@STARBUCKS" /></a></li>
                     <li><a href="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9.jpg" rel="lightbox" title="抹茶フローズンクリーム@STARBUCKS"><img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_m.jpg" alt="抹茶フローズンクリーム@STARBUCKS" /></a></li>
                   </ul>
                   </ul>
               </li>
            </ul>
         </div>
<!-- / CODE -->
      </div>
   </body>
</html>