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

実行結果

noobSlide | 設置サンプル

例：画像を2枚ずつスライド（自動再生）

例：画像のスライドショー（再生、停止、前へ、次へリンク付き）

<< Previous Play > Stop Next >>

例3：画像のスライドショー（頭出し、再生、停止リンク付き）

< Playback Stop Play >

例4：要素のスライドショー（リンククリックで該当する要素までスライドしながら表示）

1. モツ鍋@鳥小屋

モツ鍋@鳥小屋

キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ

キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！

2. 赤から鍋20辛＠赤から亭

赤から鍋20辛＠赤から亭

渋谷にある名古屋名物の「赤から鍋」と「セセリ焼き」が食べれる人気店！お値段はけっこうリーズナブルです。いつも込んでるので行くときは予約がおすすめ。

「赤から鍋」は辛さレベルを選べます。写真は「20辛」！友達とふたりで挑戦したけど、どろっどろしてる分、辛さ倍増（；　；）でもおいしかったです♪完食アドバイスとしては、、、まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ

3. 特選牛の内臓地獄鍋@雑草家

雑草家@特選牛の内臓地獄鍋

外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからｗ

ハツとかいろんな種類のホルモンが一度に楽しめます♪焼肉もいいけど、辛めの鍋でグツグツに込んだホルモンはモツ煮みたいにとろっとしてかなり美味しいです。〆は雑炊セットがおすすめ！溶き卵もいれましょう♪これまた絶品おじやですｗ

4. トマト入り塩モツ鍋@汁べえ

トマト入り塩モツ鍋@汁べえ

下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！お鍋は店員さんが作ってくれます。少し煮えてくると、なんとボールにいっぱいはいったコラーゲンを投入するではありませんか！お肌が曲がり角の女子としてはうれしい限り♪

あと、ここのモツ鍋、トマトを入れるんです！はじめは！？って思ったけど、おそるおそる食べてみるとすごいトマトがいい味出してました！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品でした♪

5. 火鍋@蘭苑菜館

火鍋@蘭苑菜館

東銀座にある本場ムード満点の火鍋屋さん。本場ってことで、店員のおねぇさんはかなり愛想なしですｗオーダーすると怒ってるみたいな顔します（汗；

火鍋のスープは、激辛四川風の赤スープ、コラーゲンたっぷりの白スープ、それとめずらしく出汁のきいた鴨スープがあります！！2種類好きなのをチョイス！赤スープは、追加で辛くする薬味をもらえるので、激辛好きの人はそれを入れればどこまでも楽しめます♪紹興酒も美味しくて、辛い鍋といっしょだとついついお酒も進んじゃいます。鴨スープは〆にラーメンを投入すると、ラーメン屋さんもびっくりのとびっきりの鴨ラーメンになりますよ！是非お試しアーレ♪

Show:

1. 鳥小屋 2. 赤から亭 3. 雑草家 4. 汁べえ 5. 蘭苑菜館

例5：画像のスライドショー（画像情報＋リンク付き）

Photo

<< Previous Play > Stop Next >>

例6：左右にサムネイルを配置した画像ギャラリー（画像情報＋リンク付き）

<< Previous <Playback Stop Play > Next >>

例7：サムネイル部分のカレント表示がFlashっぽい画像ギャラリー

例8：要素のスライドショー（パネル切替、ページ送り）

Pane 1 Pane 2 Pane 3 Pane 4 Pane 5

<< Previous Next >>

1. モツ鍋@鳥小屋

モツ鍋@鳥小屋

キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ

キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！

<< Previous Next >>

2. 赤から鍋20辛＠赤から亭

赤から鍋20辛＠赤から亭

渋谷にある名古屋名物の「赤から鍋」と「セセリ焼き」が食べれる人気店！お値段はけっこうリーズナブルです。いつも込んでるので行くときは予約がおすすめ。

「赤から鍋」は辛さレベルを選べます。写真は「20辛」！友達とふたりで挑戦したけど、どろっどろしてる分、辛さ倍増（；　；）でもおいしかったです♪完食アドバイスとしては、、、まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ

<< Previous Next >>

3. 特選牛の内臓地獄鍋@雑草家

雑草家@特選牛の内臓地獄鍋

外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからｗ

ハツとかいろんな種類のホルモンが一度に楽しめます♪焼肉もいいけど、辛めの鍋でグツグツに込んだホルモンはモツ煮みたいにとろっとしてかなり美味しいです。〆は雑炊セットがおすすめ！溶き卵もいれましょう♪これまた絶品おじやですｗ

<< Previous Next >>

4. トマト入り塩モツ鍋@汁べえ

トマト入り塩モツ鍋@汁べえ

下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！お鍋は店員さんが作ってくれます。少し煮えてくると、なんとボールにいっぱいはいったコラーゲンを投入するではありませんか！お肌が曲がり角の女子としてはうれしい限り♪

あと、ここのモツ鍋、トマトを入れるんです！はじめは！？って思ったけど、おそるおそる食べてみるとすごいトマトがいい味出してました！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品でした♪

<< Previous Next >>

5. 火鍋@蘭苑菜館

火鍋@蘭苑菜館

東銀座にある本場ムード満点の火鍋屋さん。本場ってことで、店員のおねぇさんはかなり愛想なしですｗオーダーすると怒ってるみたいな顔します（汗；

火鍋のスープは、激辛四川風の赤スープ、コラーゲンたっぷりの白スープ、それとめずらしく出汁のきいた鴨スープがあります！！2種類好きなのをチョイス！赤スープは、追加で辛くする薬味をもらえるので、激辛好きの人はそれを入れればどこまでも楽しめます♪紹興酒も美味しくて、辛い鍋といっしょだとついついお酒も進んじゃいます。鴨スープは〆にラーメンを投入すると、ラーメン屋さんもびっくりのとびっきりの鴨ラーメンになりますよ！是非お試しアーレ♪

<< Previous | Next >>

<Playback Stop Play >

1 2 3 4 5

設置サンプルのソース

<!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>noobSlide | 設置サンプル</title>
      <link rel="stylesheet" href="/content/lib/global.css" type="text/css" media="all" />
      <!-- CSS -->
      <link rel="stylesheet" href="/content/lib/mootools/noobslide/style.css" type="text/css" />
      <!-- JS -->
      <script type="text/javascript" src="/content/lib/mootools/mootools-1.2-core-yc.js"></script>
      <script type="text/javascript" src="/content/lib/mootools/noobslide/_class.noobSlide.js"></script>
      <script type="text/javascript">
         window.addEvent('domready',function(){
            /* 例1：自動再生、5秒おきにでスライド */
            var nS1 = new noobSlide({
               box: $('box1'),
               items: [0,1,2,3,4,5,6,7,8,9,10],
               autoPlay: true
            });

            /* 例2 (transition: Bounce.easeOut) */
            var nS2 = new noobSlide({
               box: $('box2'),
               items: [0,1,2,3,4,5,6,7,8,9,10],
               interval: 3000,
               fxOptions: {
                  duration: 1000,
                  transition: Fx.Transitions.Bounce.easeOut,
                  wait: false
               },
               addButtons: {
                  previous: $('prev1'),
                  play: $('play1'),
                  stop: $('stop1'),
                  next: $('next1')
               }
            });

            /* 例3 (play, stop, playback) */
            var nS3 = new noobSlide({
               box: $('box3'),
               items: [0,1,2,3,4,5,6,7,8,9,10],
               interval: 1000,
               startItem: 4,
               addButtons: {
                  playback: $('playback3'),
                  stop: $('stop3'),
                  play: $('play3')
               }
            });

            /* 例4 (walk to item) */
            var nS4 = new noobSlide({
               box: $('box4'),
               items: $$('#box4 div'),
               size: 480,
               handles: $$('#handles4 span'),
               onWalk: function(currentItem,currentHandle){
                  $('info4').set('html',currentItem.getFirst().innerHTML);
                  this.handles.removeClass('active');
                  currentHandle.addClass('active');
               }
            });

            /* 例5 (mode: vertical, using "onWalk" ) */
            var info5 = $('info5').set('opacity',0.5);
            var sampleObjectItems =[
               {title:'雑草家@特選牛の内臓地獄鍋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3053111822/'},
               {title:'モツ鍋@鳥小屋', autor:'PJ', date:'6 Dic 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375082/'},
               {title:'トマト入り塩モツ鍋@汁べえ', autor:'PJ', date:'9 Feb 2007', link:'http://www.flickr.com/photos/22559849@N06/3025639598/'},
               {title:'赤から鍋20辛＠赤から亭', autor:'PJ', date:'22 Jul 2007', link:'http://www.flickr.com/photos/22559849@N06/2335201198/'}
            ];
            var nS5 = new noobSlide({
               mode: 'vertical',
               box: $('box5'),
               size: 180,
               items: sampleObjectItems,
               addButtons: {
                  previous: $('prev5'),
                  play: $('play5'),
                  stop: $('stop5'),
                  next: $('next5')
               },
               onWalk: function(currentItem){
                  info5.empty();
                  new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info5);
                  new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info5);
               }
            });

            /* 例6 (on "mouseenter" walk) */
            var info6 = $('box6').getNext().set('opacity',0.5);
            var sampleObjectItems2 =[
               {title:'サインがいっぱい@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375214/'},
               {title:'レバ刺@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3064/3031535599/'},
               {title:'明太子玉子焼き@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3031535573/'},
               {title:'モツ鍋@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375140/'},
               {title:'モツ鍋@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375082/'},
               {title:'モツ鍋@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375106/'},
               {title:'ハツ刺@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375032/'},
               {title:'ハツ刺@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032375032/'},
               {title:'モツ鍋の〆@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032374922/'},
               {title:'モツ鍋の〆@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032374882/'},
               {title:'ごちそうさま@鳥小屋', autor:'PJ', date:'5 Jun 2007', link:'http://www.flickr.com/photos/22559849@N06/3032374798/'}
            ];
            var nS6 = new noobSlide({
               mode: 'vertical',
               box: $('box6'),
               items: sampleObjectItems2,
               size: 180,
               handles: $$('#handles6_1 div').extend($$('#handles6_2 div')),
               handle_event: 'mouseenter',
               addButtons: {
                  previous: $('prev6'),
                  play: $('play6'),
                  stop: $('stop6'),
                  playback: $('playback6'),
                  next: $('next6')
               },
               button_event: 'click',
               fxOptions: {
                  duration: 1000,
                  transition: Fx.Transitions.Back.easeOut,
                  wait: false
               },
               onWalk: function(currentItem,currentHandle){
                  info6.empty();
                  new Element('h4').set('html','<a href="'+currentItem.link+'">link</a>'+currentItem.title).inject(info6);
                  new Element('p').set('html','<b>Autor</b>: '+currentItem.autor+' &nbsp; &nbsp; <b>Date</b>: '+currentItem.date).inject(info6);
                  this.handles.set('opacity',0.3);
                  currentHandle.set('opacity',1);
               }
            });
            //walk to next item
            nS6.next();
            
            /* 例7 */
            var startItem = 3; //or   0   or any
            var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').set('opacity',0.8);
            var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
            var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
            var nS7 = new noobSlide({
               box: $('box7'),
               items: [0,1,2,3,4,5,6,7,8,9],
               handles: $$('#thumbs_handles7 span'),
               fxOptions: fxOptions7,
               onWalk: function(currentItem){
                  thumbsFx.start(currentItem*60-568);
               },
               startItem: startItem
            });
            //walk to first with fx
            nS7.walk(0);

            //SAMPLE 8
            var handles8_more = $$('#handles8_more span');
            var nS8 = new noobSlide({
               box: $('box8'),
               items: $$('#box8 h3'),
               size: 480,
               handles: $$('#handles8 span'),
               addButtons: {previous: $('prev8'), play: $('play8'), stop: $('stop8'), playback: $('playback8'), next: $('next8') },
               onWalk: function(currentItem,currentHandle){
                  //style for handles
                  $$(this.handles,handles8_more).removeClass('active');
                  $$(currentHandle,handles8_more[this.currentIndex]).addClass('active');
                  //text for "previous" and "next" default buttons
                  $('prev8').set('html','&lt;&lt; '+this.items[this.previousIndex].innerHTML);
                  $('next8').set('html',this.items[this.nextIndex].innerHTML+' &gt;&gt;');
               }
            });
            //more "previous" and "next" buttons
            nS8.addActionButtons('previous',$$('#box8 .prev'));
            nS8.addActionButtons('next',$$('#box8 .next'));
            //more handle buttons
            nS8.addHandleButtons(handles8_more);
            //walk to item 3 witouth fx
            nS8.walk(3,false,true);

         });
      </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.efectorelativo.net/laboratory/noobSlide/'>noobSlide</a> | 設置サンプル</h1>
<!-- CODE -->
         <div id="cont">

<!-- 例1 -->
            <h2>例：画像を2枚ずつスライド（自動再生）</h2>
            <div class="sample">
               <div class="mask1">
                  <div id="box1">
                     <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                  </div>
               </div>
            </div>
<!-- / 例1 -->

<!-- 例2 -->
            <h2>例：画像のスライドショー（再生、停止、前へ、次へリンク付き）</h2>
            <div class="sample">
               <div class="mask2">
                  <div id="box2">
                     <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                  </div>
               </div>
               <p class="buttons">
                  <span id="prev1">&lt;&lt; Previous</span>
                  <span id="play1">Play &gt;</span>
                  <span id="stop1">Stop</span>
                  <span id="next1">Next &gt;&gt;</span>
               </p>
            </div>
<!-- / 例2 -->

<!-- 例3 -->
            <h2>例3：画像のスライドショー（頭出し、再生、停止リンク付き）</h2>
            <div class="sample">
               <div class="mask2">
                  <div id="box3">
                     <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                  </div>
               </div>
               <p class="buttons">
                  <span id="playback3">&lt; Playback</span>
                  <span id="stop3">Stop</span>
                  <span id="play3">Play &gt;</span>
               </p>
            </div>
<!-- / 例3 -->

<!-- 例4 -->
            <h2>例4：要素のスライドショー（リンククリックで該当する要素までスライドしながら表示）</h2>
            <div class="sample">
               <div class="mask3">
                  <div id="box4">
                     <div>
                        <h3>1. モツ鍋@鳥小屋</h3>
                        <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_t.jpg" width="100" height="75" alt="モツ鍋@鳥小屋" /></a>
                        <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ</p>
                        <p>キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！</p>
                     </div>
                     <div>
                        <h3>2. 赤から鍋20辛＠赤から亭</h3>
                        <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_t.jpg" width="100" height="75" alt="赤から鍋20辛＠赤から亭" /></a>
                        <p>渋谷にある名古屋名物の「赤から鍋」と「セセリ焼き」が食べれる人気店！お値段はけっこうリーズナブルです。いつも込んでるので行くときは予約がおすすめ。</p>
                        <p>「赤から鍋」は辛さレベルを選べます。写真は「20辛」！友達とふたりで挑戦したけど、どろっどろしてる分、辛さ倍増（；　；）でもおいしかったです♪完食アドバイスとしては、、、まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ</p>
                     </div>
                     <div>
                        <h3>3. 特選牛の内臓地獄鍋@雑草家</h3>
                        <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_t.jpg" width="100" height="75" alt="雑草家@特選牛の内臓地獄鍋" /></a>
                        <p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからｗ</p>
                        <p>ハツとかいろんな種類のホルモンが一度に楽しめます♪焼肉もいいけど、辛めの鍋でグツグツに込んだホルモンはモツ煮みたいにとろっとしてかなり美味しいです。〆は雑炊セットがおすすめ！溶き卵もいれましょう♪これまた絶品おじやですｗ</p>
                     </div>
                     <div>
                        <h3>4. トマト入り塩モツ鍋@汁べえ</h3>
                        <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_t.jpg" width="100" height="75" alt="トマト入り塩モツ鍋@汁べえ" /></a>
                        <p>下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！お鍋は店員さんが作ってくれます。少し煮えてくると、なんとボールにいっぱいはいったコラーゲンを投入するではありませんか！お肌が曲がり角の女子としてはうれしい限り♪</p>
                        <p>あと、ここのモツ鍋、トマトを入れるんです！はじめは！？って思ったけど、おそるおそる食べてみるとすごいトマトがいい味出してました！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品でした♪</p>
                     </div>
                     <div>
                        <h3>5. 火鍋@蘭苑菜館</h3>
                        <a href="http://www.flickr.com/photos/22559849@N06/3055992490/" title="火鍋@蘭苑菜館 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3184/3055992490_7941aefa75_t.jpg" width="75" height="100" alt="火鍋@蘭苑菜館" /></a>
                        <p>東銀座にある本場ムード満点の火鍋屋さん。本場ってことで、店員のおねぇさんはかなり愛想なしですｗオーダーすると怒ってるみたいな顔します（汗；</p>
                        <p>火鍋のスープは、激辛四川風の赤スープ、コラーゲンたっぷりの白スープ、それとめずらしく出汁のきいた鴨スープがあります！！2種類好きなのをチョイス！赤スープは、追加で辛くする薬味をもらえるので、激辛好きの人はそれを入れればどこまでも楽しめます♪紹興酒も美味しくて、辛い鍋といっしょだとついついお酒も進んじゃいます。鴨スープは〆にラーメンを投入すると、ラーメン屋さんもびっくりのとびっきりの鴨ラーメンになりますよ！是非お試しアーレ♪</p>
                     </div>
                  </div>
               </div>
               <h4>Show: <span id="info4"></span></h4>
               <p class="buttons" id="handles4">
                  <span>1. 鳥小屋</span>
                  <span>2. 赤から亭</span>
                  <span>3. 雑草家</span>
                  <span>4. 汁べえ</span>
                  <span>5. 蘭苑菜館</span>
               </p>
            </div>
<!-- / 例4 -->

<!-- 例5 -->
            <h2>例5：画像のスライドショー（画像情報＋リンク付き）</h2>
            <div class="sample">
               <div class="mask2">
                  <div id="box5">
                     <span><img src="http://farm4.static.flickr.com/3283/3053111822_f5a0d19e66_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3185/3025639598_b11345ee97_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_m.jpg" alt="Photo" /></span>
                  </div>
                  <div id="info5" class="info"></div>
               </div>
               <p class="buttons">
                  <span id="prev5">&lt;&lt; Previous</span>
                  <span id="play5">Play &gt;</span>
                  <span id="stop5">Stop</span>
                  <span id="next5">Next &gt;&gt;</span>
               </p>
            </div>
<!-- / 例5 -->

<!-- 例6 -->
            <h2>例6：左右にサムネイルを配置した画像ギャラリー（画像情報＋リンク付き）</h2>
            <div class="sample sample6">
               <!-- 左側のサムネイル画像 -->
               <div class="thumbs" id="handles6_1">
                  <div><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" alt="" /></div>
               </div>
               <!-- 原寸大画像 -->
               <div class="mask6">
                  <div id="box6">
                     <div><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></div>
                  </div>
                  <div class="info"></div>
               </div>
               <!-- 右側のサムネイル画像 -->
               <div class="thumbs" id="handles6_2">
                  <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_s.jpg" alt="" /></div>
                  <div><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_s.jpg" alt="" /></div>
               </div>
               <p class="buttons">
                  <span id="prev6">&lt;&lt; Previous</span>
                  <span id="playback6">&lt;Playback</span>
                  <span id="stop6">Stop</span>
                  <span id="play6">Play &gt;</span>
                  <span id="next6">Next &gt;&gt;</span>
               </p>
            </div>
<!-- / 例6 -->

<!-- 例7 -->
            <h2>例7：サムネイル部分のカレント表示がFlashっぽい画像ギャラリー</h2>
            <div class="sample sample7">
               <div class="mask6">
                  <!-- 原寸大画像 -->
                  <div id="box7">
                     <span><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3151/3032375106_226d2a6d52_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3055/3031535435_6af4618ea1_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_m.jpg" alt="" /></span>
                     <span><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_m.jpg" alt="" /></span>
                  </div>
               </div>
               <div id="thumbs7">
                  <!-- サムネイル画像 -->
                  <div class="thumbs">
                     <div><img src="http://farm4.static.flickr.com/3138/3032375214_5aedffaca0_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3064/3031535599_2f8b454232_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3217/3031535573_6e541be249_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3223/3032375140_5eba53f7e9_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3068/3032375032_aab0a7b581_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3171/3032374922_8fcb4ea43d_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3177/3032374882_7b7553fff5_s.jpg" alt="" /></div>
                     <div><img src="http://farm4.static.flickr.com/3243/3032374798_cec6385d35_s.jpg" alt="" /></div>
                  </div>
                  <div id="thumbs_mask7"></div>
                  <p id="thumbs_handles7">
                     <span></span>
                     <span></span>
                     <span></span>
                     <span></span>
                     <span></span>
                     <span></span>
                     <span></span>
                     <span></span>
                  </p>
               </div>
            </div>
<!-- / 例7 -->

<!-- 例8 -->
            <h2>例8：要素のスライドショー（パネル切替、ページ送り）</h2>
            <div class="sample sample8">
               <p class="buttons" id="handles8">
                  <span>Pane 1</span>
                  <span>Pane 2</span>
                  <span>Pane 3</span>
                  <span>Pane 4</span>
                  <span>Pane 5</span>
               </p>
               <div class="mask3">
                  <div id="box8">
                     <div>
                        <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                        <h3>1. モツ鍋@鳥小屋</h3>
                        <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_t.jpg" width="100" height="75" alt="モツ鍋@鳥小屋" /></a>
                        <p>キャベツたっぷり。ぷりぷりで大きなモツがたっぷり入ったモツ鍋。スープは醤油ベースのみ。1種類ってのがこだわりを感じるわぁ♪鳥小屋のモツ鍋食べるとほんと他店のモツ鍋がものたりなくなるわｗ</p>
                        <p>キャベツがしんなりしてきてかき混ぜると・・・キャベツの中に隠れていた大量のモツがお目見え！かき混ぜて3分待つと出来上がり！！彩りもきれい。さぁ食べるぞー！！</p>
                     </div>
                     <div>
                        <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                        <h3>2. 赤から鍋20辛＠赤から亭</h3>
                        <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_t.jpg" width="100" height="75" alt="赤から鍋20辛＠赤から亭" /></a>
                        <p>渋谷にある名古屋名物の「赤から鍋」と「セセリ焼き」が食べれる人気店！お値段はけっこうリーズナブルです。いつも込んでるので行くときは予約がおすすめ。</p>
                        <p>「赤から鍋」は辛さレベルを選べます。写真は「20辛」！友達とふたりで挑戦したけど、どろっどろしてる分、辛さ倍増（；　；）でもおいしかったです♪完食アドバイスとしては、、、まず、最初にまっこりを飲んどく。おもちとかネギとかオプションは頼まない。シメは頼まない。これでOKなはずｗ</p>
                     </div>
                     <div>
                        <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                        <h3>3. 特選牛の内臓地獄鍋@雑草家</h3>
                        <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_t.jpg" width="100" height="75" alt="雑草家@特選牛の内臓地獄鍋" /></a>
                        <p>外苑前にある韓国薬膳料理店「雑草家」の特選牛の内臓地獄鍋。何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからｗ</p>
                        <p>ハツとかいろんな種類のホルモンが一度に楽しめます♪焼肉もいいけど、辛めの鍋でグツグツに込んだホルモンはモツ煮みたいにとろっとしてかなり美味しいです。〆は雑炊セットがおすすめ！溶き卵もいれましょう♪これまた絶品おじやですｗ</p>
                     </div>
                     <div>
                        <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                        <h3>4. トマト入り塩モツ鍋@汁べえ</h3>
                        <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_t.jpg" width="100" height="75" alt="トマト入り塩モツ鍋@汁べえ" /></a>
                        <p>下北沢にある居酒屋「汁べえ」のモツ鍋。塩味で頼みました！お鍋は店員さんが作ってくれます。少し煮えてくると、なんとボールにいっぱいはいったコラーゲンを投入するではありませんか！お肌が曲がり角の女子としてはうれしい限り♪</p>
                        <p>あと、ここのモツ鍋、トマトを入れるんです！はじめは！？って思ったけど、おそるおそる食べてみるとすごいトマトがいい味出してました！最後は溶き卵でとじて雑炊にして食べたのですが、これがまた絶品でした♪</p>
                     </div>
                     <div>
                        <p class="buttons"><span class="prev">&lt;&lt; Previous</span> <span class="next">Next &gt;&gt;</span></p>
                        <h3>5. 火鍋@蘭苑菜館</h3>
                        <a href="http://www.flickr.com/photos/22559849@N06/3055992490/" title="火鍋@蘭苑菜館 by php_javascript_room, on Flickr"><img src="http://farm4.static.flickr.com/3184/3055992490_7941aefa75_t.jpg" width="75" height="100" alt="火鍋@蘭苑菜館" /></a>
                        <p>東銀座にある本場ムード満点の火鍋屋さん。本場ってことで、店員のおねぇさんはかなり愛想なしですｗオーダーすると怒ってるみたいな顔します（汗；</p>
                        <p>火鍋のスープは、激辛四川風の赤スープ、コラーゲンたっぷりの白スープ、それとめずらしく出汁のきいた鴨スープがあります！！2種類好きなのをチョイス！赤スープは、追加で辛くする薬味をもらえるので、激辛好きの人はそれを入れればどこまでも楽しめます♪紹興酒も美味しくて、辛い鍋といっしょだとついついお酒も進んじゃいます。鴨スープは〆にラーメンを投入すると、ラーメン屋さんもびっくりのとびっきりの鴨ラーメンになりますよ！是非お試しアーレ♪</p>
                     </div>
                  </div>
               </div>
               <p class="buttons">
                  <span id="prev8">&lt;&lt; Previous</span> | <span id="next8">Next &gt;&gt;</span>
               </p>
               <p class="buttons">
                  <span id="playback8">&lt;Playback</span>
                  <span id="stop8">Stop</span>
                  <span id="play8">Play &gt;</span>
               </p>
               <p class="buttons" id="handles8_more">
                  <span>1</span>
                  <span>2</span>
                  <span>3</span>
                  <span>4</span>
                  <span>5</span>
               </p>
            </div>
<!-- / 例8 -->
         </div>
<!-- / CODE -->
      </div><!-- div#wrap -->
   </body>
</html>