実行結果
設置サンプルのソース
<!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 & 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"> </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"> </a>
<a href="#" rel="next" class="carousel-control right ico ico-next"> </a>
<a href="#" rel="first" class="carousel-control left ico ico-first"> </a>
<a href="#" rel="prev" class="carousel-control left ico ico-prev"> </a>
</div>
<!-- demo1 //-->
<div class="clear"> </div>
<!-- demo2 -->
<div class="main" id="main-2">
<h2>垂直方向にスライド</h2>
<div class="menu">
<a href="#" rel="toggle" class="carousel-control right ico ico-toggle"> </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"> </a>
<a href="#" rel="next" class="carousel-control right ico ico-next"> </a>
<a href="#" rel="first" class="carousel-control left ico ico-first"> </a>
<a href="#" rel="prev" class="carousel-control left ico ico-prev"> </a>
</div>
<!-- demo2 //-->
<div class="clear"> </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>