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

実行結果

設置サンプル

参照:Accessible News Slider

モツ鍋@鳥小屋
中目黒にある人気のモツ鍋屋さん。店内には著名人のサインがいっぱい!モツ鍋はさることながら、レバ刺やハツ刺も絶品♪
赤から鍋20辛@赤から亭
渋谷の赤から亭で「20辛」に友達とふたりで挑戦!どろっどろしてて、辛かった(汗;
特選牛の内臓地獄鍋@雑草家
外苑前にある韓国薬膳料理店。この鍋、何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからw
トマト入り塩モツ鍋@汁べえ
下北沢にある居酒屋さん。塩味で頼みました!トマトとたっぷりのコラーゲンが隠し味。次の日はお肌ぷるぷるのはずなんだけど...そうでもなかったよーな(汗;
火鍋@蘭苑菜館
コラ~ゲンたぷ~りな白いスープと、激辛四川風の赤いスープ。シメにラーメン入れたら、マジウマス★
ダークチェリーモカ@STARBUCKS
ビターなチョコレートとチェリーの甘さがすごくマッチしてます。ホットで飲むとホイップクリームが溶けてとってもまろやか♪寒い日にぴったりですね!
豆乳ラテ@STARBUCKS1
カフェラテより豆乳ラテ派♪コーヒーの苦味と豆乳のまろやかさがいいのよね。暑い日なんて、ぐびぐびいっちゃうw
抹茶フローズンクリーム@STARBUCKS
まだ寒いのに、フローズン!しかも照らす席(汗;クリーーミーでおいしかった。抹茶味はそこまでつよくなくていい感じ。

設置サンプルのソース

<!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.2.6/jquery.min.js" ></script>
      <script type="text/javascript" src="/content/lib/jquery/jquery.accessible-news-slider.js"></script>
      <script type="text/javascript">
         $(function() {
            $(".computers_technology").accessNews({
                newsHeadline: "激辛鍋特集",
                newsSpeed: "normal"
            });
            $(".world_affairs").accessNews({
                newsHeadline: "スタバ特集",
                newsSpeed: "normal"
            });
         });
      </script>
      <!-- CSS -->
      <link rel="stylesheet" href="/content/lib/jquery/jquery.accessible-news-slider.css" type="text/css" />
   <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://www.reindel.com/accessible_news_slider/'>Accessible News Slider</a></p>
<!-- CODE -->
        <!-- example1 -->
           <div class="news_slider computers_technology">
               <a href="#" class="prev"><img src="/content/img/ajax/accessible_news_slider_prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
               <a href="#" class="next"><img src="/content/img/ajax/accessible_news_slider_next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
               <div class="news_items">
                   <a name="skip_to_news_1"></a>
                   <div class="container fl">
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/3032375082/"><img src="http://farm4.static.flickr.com/3239/3032375082_fd66d11941_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://www.flickr.com/photos/22559849@N06/3032375082/">モツ鍋@鳥小屋</a><br>
                               中目黒にある人気のモツ鍋屋さん。店内には著名人のサインがいっぱい!モツ鍋はさることながら、レバ刺やハツ刺も絶品♪
                           </div>
                       </div>
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/2335201198/"><img src="http://farm4.static.flickr.com/3147/2335201198_1ab0f0dcaf_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://www.flickr.com/photos/22559849@N06/2335201198/">赤から鍋20辛@赤から亭</a><br>
                               渋谷の赤から亭で「20辛」に友達とふたりで挑戦!どろっどろしてて、辛かった(汗;
                           </div>
                       </div>
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/3052278365/"><img src="http://farm4.static.flickr.com/3149/3052278365_62844c9eb9_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://www.flickr.com/photos/22559849@N06/3052278365/">特選牛の内臓地獄鍋@雑草家</a><br>
                               外苑前にある韓国薬膳料理店。この鍋、何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるからw
                           </div>
                       </div>
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/3024811547/"><img src="http://farm4.static.flickr.com/3202/3024811547_bd010fb195_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://farm4.static.flickr.com/3202/3024811547_bd010fb195_s.jpg">トマト入り塩モツ鍋@汁べえ</a><br>
                              下北沢にある居酒屋さん。塩味で頼みました!トマトとたっぷりのコラーゲンが隠し味。次の日はお肌ぷるぷるのはずなんだけど...そうでもなかったよーな(汗;
                           </div>
                       </div>
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/3055992490/"><img src="http://farm4.static.flickr.com/3184/3055992490_7941aefa75_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://www.flickr.com/photos/22559849@N06/3055992490/">火鍋@蘭苑菜館</a><br>
                               コラ~ゲンたぷ~りな白いスープと、激辛四川風の赤いスープ。シメにラーメン入れたら、マジウマス★
                           </div>
                       </div>
                   </div>
               </div>
           </div>

           <!-- example2 -->
           <div class="news_slider world_affairs">
               <a href="#" class="prev"><img src="/content/img/ajax/accessible_news_slider_prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
               <a href="#" class="next"><img src="/content/img/ajax/accessible_news_slider_next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
               <div class="news_items">
                   <a name="skip_to_news_1"></a>
                   <div class="container fl">
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/3055162549/"><img src="http://farm4.static.flickr.com/3066/3055162549_d846be528d_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://www.flickr.com/photos/22559849@N06/3055162549/">ダークチェリーモカ@STARBUCKS</a><br>
                               ビターなチョコレートとチェリーの甘さがすごくマッチしてます。ホットで飲むとホイップクリームが溶けてとってもまろやか♪寒い日にぴったりですね!
                           </div>
                       </div>
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/3053314468/"><img src="http://farm4.static.flickr.com/3187/3053314468_406d68da67_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://www.flickr.com/photos/22559849@N06/3053314468/">豆乳ラテ@STARBUCKS1</a><br>
                               カフェラテより豆乳ラテ派♪コーヒーの苦味と豆乳のまろやかさがいいのよね。暑い日なんて、ぐびぐびいっちゃうw
                           </div>
                       </div>
                       <div class="item fl">
                           <a href="http://www.flickr.com/photos/22559849@N06/3052480709/"><img src="http://farm4.static.flickr.com/3022/3052480709_21dc575bb9_s.jpg" width="75" height="75" alt="" class="fl" /></a>
                           <div class="fl">
                               <a href="http://www.flickr.com/photos/22559849@N06/3052480709/">抹茶フローズンクリーム@STARBUCKS</a><br>
                               まだ寒いのに、フローズン!しかも照らす席(汗;クリーーミーでおいしかった。抹茶味はそこまでつよくなくていい感じ。
                           </div>
                       </div>
                   </div>
               </div>
           </div>
<!-- CODE / -->
      </div>
   </body>
</html>