実行結果
設置サンプル
参照:Accessible News Slider
モツ鍋@鳥小屋
中目黒にある人気のモツ鍋屋さん。店内には著名人のサインがいっぱい!モツ鍋はさることながら、レバ刺やハツ刺も絶品♪
特選牛の内臓地獄鍋@雑草家
外苑前にある韓国薬膳料理店。この鍋、何が地獄かっていうと、、、ホルモンがこれでもかってくらいにはいってるから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>設置サンプル</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 & 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>