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

実行結果

Prototype plugin: Carousel | 設置サンプル

水平方向にスライド

レ・クリスタリーヌ@南青山

レ・クリスタリーヌ@南青山

ポルトガル大使館の近くにある一軒やのフレンチレストラン。表参道のB1出口を出てマックスマーラーの角を曲がって、2分くらいのところなんだけど、場所はかなりわかりづらい。まさに隠れ家w

ライトアップされた幻想的なアーチを抜けると、一軒家のフレンチレストランがお目見え。誰かのお屋敷に遊びに行ったような感じでくつろぎながらディナーを楽しめるすごく素敵なお店。

夜は入り口のアーチがライトアップ荒れていてとってもきれい。冬でなければ、お昼はテラスランチもいいかも!

レ・クリスタリーヌ@南青山
   
 

垂直方向にスライド

モツ鍋@鳥小屋
赤から鍋20辛@赤から
雑草家@特選牛の内臓地獄鍋
トマト入り塩モツ鍋@汁べえ
   
 

設置サンプルのソース

<!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>Prototype plugin: carousel | 設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <link rel="stylesheet" type="text/css" href="/content/lib/prototype/carousel.css" />
      <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/prototype/carousel.js"></script>
      <script type="text/javascript" src="/content/js/swfobject.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.victorstanciu.ro/prototype-plugin-carousel/'>Prototype plugin: Carousel</a> | 設置サンプル</h1>
         <div class="main" id="main-1">
            <h2>水平方向にスライド</h2>
            <div class="menu">
               <a href="#" rel="toggle" class="carousel-control right ico ico-toggle">&nbsp;</a>
               <a href="#" rel="slide-1-1" class="tab carousel-jumper selected">HTML</a>
               <a href="#" rel="slide-1-2" class="tab carousel-jumper">画像</a>
               <a href="#" rel="slide-1-3" class="tab carousel-jumper">Flash</a>
            </div>
            <div class="scroller" id="scroller-1">
               <div class="content" id="content-1">
                  <div class="slide" id="slide-1-1">
                     <h3>レ・クリスタリーヌ@南青山</h3>
                     <div class="cf">
                        <div style="width:180px; margin-right:10px; float:left">
                           <a href="http://www.flickr.com/photos/22559849@N06/3022564628/" title="レ・クリスタリーヌ@南青山 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3032/3022564628_7b0a5a6236_m.jpg" width="180" height="240" alt="レ・クリスタリーヌ@南青山" /></a>
                        </div>
                        <p>ポルトガル大使館の近くにある一軒やのフレンチレストラン。表参道のB1出口を出てマックスマーラーの角を曲がって、2分くらいのところなんだけど、場所はかなりわかりづらい。まさに隠れ家w</p>
                        <p>ライトアップされた幻想的なアーチを抜けると、一軒家のフレンチレストランがお目見え。誰かのお屋敷に遊びに行ったような感じでくつろぎながらディナーを楽しめるすごく素敵なお店。</p>
                        <p>夜は入り口のアーチがライトアップ荒れていてとってもきれい。冬でなければ、お昼はテラスランチもいいかも!</p>
                     </div>
                  </div>
                  <div class="slide" id="slide-1-2">
                     <a href="http://www.flickr.com/photos/22559849@N06/3022564482/" title="レ・クリスタリーヌ@南青山 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3149/3022564482_07be72bac7.jpg" width="500" height="375" alt="レ・クリスタリーヌ@南青山" /></a>
                  </div>
                  <div class="slide" id="slide-1-3"></div>
                  <script type="text/javascript">
                     var so = new SWFObject("/content/media/flash/va002a.swf", "va002a", "500", "375", "5", "#336699");
                     so.addParam("wmode", "transparent");
                     so.write("slide-1-3");
                  </script>
               </div>
            </div>
            <a href="#" rel="last" class="carousel-control right ico ico-last">&nbsp;</a>
            <a href="#" rel="next" class="carousel-control right ico ico-next">&nbsp;</a>
            <a href="#" rel="first" class="carousel-control left ico ico-first">&nbsp;</a>
            <a href="#" rel="prev" class="carousel-control left ico ico-prev">&nbsp;</a>
         </div>
<!-- demo1 //-->
         <div class="clear">&nbsp;</div>
<!-- demo2 -->
         <div class="main" id="main-2">
            <h2>垂直方向にスライド</h2>
            <div class="menu">
               <a href="#" rel="toggle" class="carousel-control right ico ico-toggle">&nbsp;</a>
               <a href="#" rel="slide-2-1" class="tab carousel-jumper selected">モツ鍋</a>
               <a href="#" rel="slide-2-2" class="tab carousel-jumper">赤から鍋20辛</a>
               <a href="#" rel="slide-2-3" class="tab carousel-jumper">特選牛の内臓地獄鍋</a>
               <a href="#" rel="slide-2-4" class="tab carousel-jumper">トマト入り塩モツ鍋</a>
            </div>
            <div class="scroller" id="scroller-2">
               <div class="content" id="content-2">
                  <div class="slide" id="slide-2-1">
                     <a href="http://www.flickr.com/photos/22559849@N06/3032375082/" title="モツ鍋@鳥小屋 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941.jpg" width="500" height="375" alt="モツ鍋@鳥小屋" /></a>
                  </div>
                  <div class="slide" id="slide-2-2">
                     <a href="http://www.flickr.com/photos/22559849@N06/2335201198/" title="赤から鍋20辛@赤から by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf.jpg" width="500" height="375" alt="赤から鍋20辛@赤から" /></a>
                  </div>
                  <div class="slide" id="slide-2-3">
                     <a href="http://www.flickr.com/photos/22559849@N06/3053111822/" title="特選牛の内臓地獄鍋@雑草家 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66.jpg" width="500" height="375" alt="雑草家@特選牛の内臓地獄鍋" /></a>
                  </div>
                  <div class="slide" id="slide-2-4">
                     <a href="http://www.flickr.com/photos/22559849@N06/3025639598/" title="トマト入り塩モツ鍋@汁べえ by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97.jpg" width="500" height="375" alt="トマト入り塩モツ鍋@汁べえ" /></a>
                  </div>
               </div>
            </div>
            <a href="#" rel="last" class="carousel-control right ico ico-last">&nbsp;</a>
            <a href="#" rel="next" class="carousel-control right ico ico-next">&nbsp;</a>
            <a href="#" rel="first" class="carousel-control left ico ico-first">&nbsp;</a>
            <a href="#" rel="prev" class="carousel-control left ico ico-prev">&nbsp;</a>
         </div>
<!-- demo2 //-->
         <div class="clear">&nbsp;</div>
         <script type="text/javascript">
            Demo_1 = new Carousel($('scroller-1'), $$('#scroller-1 .slide'), $$('#main-1 a.carousel-jumper', '#main-1 a.carousel-control'), {duration: 0.5, selectedClassName: 'selected'});
            Demo_2 = new Carousel($('scroller-2'), $$('#scroller-2 .slide'), $$('#main-2 a.carousel-jumper', '#main-2 a.carousel-control'), {duration: 0.5, selectedClassName: 'selected'});
         </script>
      </div>
   </body>
</html>