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

実行結果

Portfolio Layout Idea Using jQuery | 設置サンプル

▼左右のサムネイルをクリックすると、中央に拡大画像と説明文が表示されます。

アボカド シーザーサラダ @アボガドダイニング Platinum Lounge

メニュー: アボカド シーザーサラダ

お店: @アボガドダイニング Platinum Lounge

よくわからないけどちゃんとアボガド入りです!クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。

アボカド刺 @アボガドダイニング Platinum Lounge

メニュー: アボカド刺

お店: @アボガドダイニング Platinum Lounge

アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw

フライドポテト アボカドディップ添え @アボガドダイニング Platinum Lounge

メニュー: フライドポテト アボカドディップ添え

お店: @アボガドダイニング Platinum Lounge

アボカドディップはとってもクリーミー!ポテトじゃなくてもなんにでも合いそう♪

ベーコンとアボカドのピザ(トマトソース) @アボガドダイニング Platinum Lounge

メニュー: ベーコンとアボカドのピザ(トマトソース)

お店: @アボガドダイニング Platinum Lounge

めちゃくちゃおいしかったアボカドのピザ!ピザ生地はクリスピータイプでさくさく!

ハニートースト @アボガドダイニング Platinum Lounge

メニュー: ハニートースト

お店: @アボガドダイニング Platinum Lounge

アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました!

白子の昆布焼き @高庵

メニュー: 白子の昆布焼き

お店: 高庵

昆布の上に白子をのせて、かるーく火を通ったところで、お醤油をちょびっとたらしていただききました。白子って生でポン酢で食べることが多いけど、焼いてもトロットしてて美味しいんですねー!

ササミ焼わさびマヨネーズ @高庵

メニュー: ササミ焼わさびマヨネーズ

お店: 高庵

ジューシーなササミに、ちょっぴりわさびのきいたマヨネーズがたっぷりのってまっす!和とイタリアンの融合って感じw彩りもきれいですよね♪

揚げ物 @高庵

メニュー: 揚げ物

お店: 高庵

メニューの名前をわすれてしまった(汗;鶏肉を骨ごとぶつ切りにしてあげた唐揚げ!衣にしっかり味がついていて、食べた感じはカラッよりもふっくら!肉汁があふれでますw

白レバー串みそ焼き @高庵

メニュー: 揚げ物

お店: 高庵

またまたリピしちゃいました、白レバー!今回は3人で行ったので3本。お刺身でもいけるくらい新鮮で美味しいレバーなので、レアめな感じの焼き加減に、濃厚な味噌ソースがたっぷり!コレは絶品です!

屋台風羽根つき焼きラーメン @高庵

メニュー: 屋台風羽根つき焼きラーメン

お店: 高庵

焼きラーメンってなんだろー??と思って頼んでみました。普通の焼きそばと違って、麺がやわらかめでソースが下にたまるくらいかかっていました!呑んでると、濃い目の味付けがほしくなるんですよね。そんなときにぴったりの〆メニューです!

えいひれ @高庵

メニュー: えいひれ

お店: 高庵

えいひれ大好きなんだけど、これは今まで食べたことがない感じで美味しかった!ジューシーといういかとっても肉厚でやわらかいんですよねー!日本酒の肴にもってこい♪

芋焼酎とグラス @高庵

メニュー: 芋焼酎とグラス

お店: 高庵

中身は芋焼酎ですw高庵は、グラスがとってもお洒落!頼むたびに、お酒に合ったデザインのグラスに入れてくれるので、お酒もグラスも楽しめます。

設置サンプルのソース

<!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>simplyScroll | 設置サンプル</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.easing.1.3.js"></script>
      <script type="text/javascript">
         $(function(){
                var hght = 0;
                $('dt')
                    .addClass('dt')
                    .each(function(i){
                        if(i%2){
                            $(this).addClass('left').css('top',hght);
                            hght+=75;
                        }
                        else{
                            $(this).addClass('right').css('top',hght);
                        }
                    })
                    .click(function(){
                        if( $('#portfolio dd:animated').size()) return false;
                        var that = $(this);
                        $('#portfolio dd.showing')
                        .animate({top:-455}, 750, 'easeOutQuad', function(){
                            $(this).removeClass('showing');
                            that.next().animate({top:0}, 750, 'easeInQuad').addClass('showing');
                        });
                    })
                    .eq(0)
                    .next()
                    .animate({top:0}, 750, 'easeInQuad').addClass('showing');
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         #demo {
            width:850px; height:450px;
            overflow:hidden;
            position:relative;
         }
         #portfolio {
            margin:0; padding:0;
         }
         #portfolio dt {
            width:240px; height:65px;
            background:#333;
            font-weight:normal;
            color:#999;
            margin:0; padding:5px;
            letter-spacing:-1px;
         }
         #portfolio dd {
            position:absolute;
            left:250px; top:-455px;
            width:330px; height:430px;
            margin:0; padding:0; background:#000;
            padding:10px;
         }
         #portfolio dt img {
            border:2px solid #fff;
            width:55px; height:55px;
            float:left;
            margin-right:5px;
         }
         #portfolio dt strong {
            display:block;
            color:#e8e8e8;
            margin:0; padding:0;
            font-size:1.2em;
            font-weight:bold;
            text-decoration:none;
         }
         #portfolio dt.left {
            position:absolute;
            top:0; left:0;
            font-size:.8em;
         }
         #portfolio dt.right {
            position:absolute;
            top:0; right:0;
            font-size:.8em;
         }
         #portfolio dd h3 {
            color:#fff;
            font-size:1.3em;
            margin:0; padding:0;
         }
         #portfolio dd h4 {
            font-size:1.1em;
            color:#fff;
            margin:0; padding:0;
         }
         #portfolio dd p {
            color:#fff;
            font-size:.9em;
            line-height:1.5;
         }
         #portfolio dd img{
            display:block;
            margin:0 auto; border:3px solid #999;
         }
      </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://benjaminsterling.com/portolio-layout-idea-using-jquery/'>Portfolio Layout Idea Using jQuery</a> | 設置サンプル</h1>
         <p>▼左右のサムネイルをクリックすると、中央に拡大画像と説明文が表示されます。</p>
<!-- CODE -->
           <div id="demo" class="cf">
              <dl id="portfolio">
                  <dt>
                      <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_s.jpg" alt="" />
                      <strong>アボカド シーザーサラダ</strong>
                      @アボガドダイニング Platinum Lounge
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> アボカド シーザーサラダ</h3>
                      <h4><span>お店:</span> @アボガドダイニング Platinum Lounge</h4>
                      <p>よくわからないけどちゃんとアボガド入りです!クリーミーなシーザードレッシングとアボガドの相性がとってもよかったです。</p>
                      <img src="http://farm4.static.flickr.com/3514/3274514408_1800118ded_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_s.jpg" alt="" />
                        <strong>アボカド刺</strong>
                      @アボガドダイニング Platinum Lounge
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> アボカド刺</h3>
                      <h4><span>お店:</span> @アボガドダイニング Platinum Lounge</h4>
                      <p>アボガドにお醤油がかかってるせいか、わさびをちょっとのせて食べると、マグロ入ってないのに、マグロの味がしましたw</p>
                      <img src="http://farm4.static.flickr.com/3509/3273696567_ebf4ed4381_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3324/3273696401_f4ea6c7677_s.jpg" alt="" />
                      <strong>フライドポテト アボカドディップ添え</strong>
                      @アボガドダイニング Platinum Lounge
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> フライドポテト アボカドディップ添え</h3>
                      <h4><span>お店:</span> @アボガドダイニング Platinum Lounge</h4>
                      <p>アボカドディップはとってもクリーミー!ポテトじゃなくてもなんにでも合いそう♪</p>
                      <img src="http://farm4.static.flickr.com/3324/3273696401_f4ea6c7677_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_s.jpg" alt="" />
                      <strong>ベーコンとアボカドのピザ(トマトソース)</strong>
                      @アボガドダイニング Platinum Lounge
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> ベーコンとアボカドのピザ(トマトソース)</h3>
                      <h4><span>お店:</span> @アボガドダイニング Platinum Lounge</h4>
                      <p>めちゃくちゃおいしかったアボカドのピザ!ピザ生地はクリスピータイプでさくさく!</p>
                      <img src="http://farm4.static.flickr.com/3427/3273696469_aa2aaf5e89_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_s.jpg" alt="" />
                      <strong>ハニートースト</strong>
                      @アボガドダイニング Platinum Lounge
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> ハニートースト</h3>
                      <h4><span>お店:</span> @アボガドダイニング Platinum Lounge</h4>
                      <p>アボカドたっぷしのってますが、れっきとしたデザートです。ハニートーストの上にバニラアイスが乗っていて、その上にアボガドがぱらぱらと。アボカドっぽくなくて、どちらかといえば栗のような味がしました!</p>
                      <img src="http://farm4.static.flickr.com/3316/3273696493_570fdd0ee5_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_s.jpg" alt="" />
                      <strong>白子の昆布焼き</strong>
                      @高庵
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> 白子の昆布焼き</h3>
                      <h4><span>お店:</span> 高庵</h4>
                      <p>昆布の上に白子をのせて、かるーく火を通ったところで、お醤油をちょびっとたらしていただききました。白子って生でポン酢で食べることが多いけど、焼いてもトロットしてて美味しいんですねー!</p>
                      <img src="http://farm4.static.flickr.com/3197/3141927210_be00d22544_m.jpg" alt="" />
                  </dd>
                  <dt>
                      <img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_s.jpg" alt="" />
                      <strong>ササミ焼わさびマヨネーズ</strong>
                      @高庵
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> ササミ焼わさびマヨネーズ</h3>
                      <h4><span>お店:</span> 高庵</h4>
                      <p>ジューシーなササミに、ちょっぴりわさびのきいたマヨネーズがたっぷりのってまっす!和とイタリアンの融合って感じw彩りもきれいですよね♪</p>
                      <img src="http://farm4.static.flickr.com/3284/3141927120_d66a9a0304_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_s.jpg" alt="" />
                      <strong>揚げ物</strong>
                      @高庵
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> 揚げ物</h3>
                      <h4><span>お店:</span> 高庵</h4>
                      <p>メニューの名前をわすれてしまった(汗;鶏肉を骨ごとぶつ切りにしてあげた唐揚げ!衣にしっかり味がついていて、食べた感じはカラッよりもふっくら!肉汁があふれでますw</p>
                      <img src="http://farm4.static.flickr.com/3196/3141100631_c244dbe4a4_m.jpg" alt="" />
                  </dd>
                  <dt>
                      <img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_s.jpg" alt="" />
                      <strong>白レバー串みそ焼き</strong>
                      @高庵
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> 揚げ物</h3>
                      <h4><span>お店:</span> 高庵</h4>
                      <p>またまたリピしちゃいました、白レバー!今回は3人で行ったので3本。お刺身でもいけるくらい新鮮で美味しいレバーなので、レアめな感じの焼き加減に、濃厚な味噌ソースがたっぷり!コレは絶品です!</p>
                      <img src="http://farm4.static.flickr.com/3215/3141100545_e21269fb11_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_s.jpg" alt="" />
                      <strong>屋台風羽根つき焼きラーメン</strong>
                      @高庵
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> 屋台風羽根つき焼きラーメン</h3>
                      <h4><span>お店:</span> 高庵</h4>
                      <p>焼きラーメンってなんだろー??と思って頼んでみました。普通の焼きそばと違って、麺がやわらかめでソースが下にたまるくらいかかっていました!呑んでると、濃い目の味付けがほしくなるんですよね。そんなときにぴったりの〆メニューです!</p>
                      <img src="http://farm4.static.flickr.com/3247/3141926720_08ebc48824_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3278/3141100261_e0139b971e_s.jpg" alt="" />
                      <strong>えいひれ</strong>
                      @高庵
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> えいひれ</h3>
                      <h4><span>お店:</span> 高庵</h4>
                      <p>えいひれ大好きなんだけど、これは今まで食べたことがない感じで美味しかった!ジューシーといういかとっても肉厚でやわらかいんですよねー!日本酒の肴にもってこい♪</p>           
                      <img src="http://farm4.static.flickr.com/3278/3141100261_e0139b971e_m.jpg" alt="" />
                  </dd>

                  <dt>
                      <img src="http://farm4.static.flickr.com/3031/3141100435_24ebb86016_s.jpg" alt="" />
                      <strong>芋焼酎とグラス</strong>
                      @高庵
                  </dt>
                  <dd>
                      <h3><span>メニュー:</span> 芋焼酎とグラス</h3>
                      <h4><span>お店:</span> 高庵</h4>
                      <p>中身は芋焼酎ですw高庵は、グラスがとってもお洒落!頼むたびに、お酒に合ったデザインのグラスに入れてくれるので、お酒もグラスも楽しめます。</p>
                      <img src="http://farm4.static.flickr.com/3031/3141100435_24ebb86016_m.jpg" alt="" />
                  </dd>
                  
              </dl>
         </div>
<!-- / CODE -->
      </div>
   </body>
</html>