Coda-Slider 1.1.1を作ってみた。
今回は、Coda-Slider 1.1.1を作ってみました。
タブを押すとページ内でコンテンツの内容がスムーズに遷移するやつです。
今まではギャラリー、スライドショー系の嵐でしたが、今日以降は今回と同じような"遷移する系"ばかりになると思います。なぜなら、今日自分の目的に合うのを探すため作りまくったからです。
その第一弾が、Coda-Slider 1.1.1です。jQueryのライブラリを使用します。
こんなのです↓
では、どうぞー。
* Coda-Slider 1.1.1の準備 *
こちらの、Coda-Slider 1.1.1のサイトから一式ファイルをダウンロードできます。
これで準備は終了です。
* Coda-Slider 1.1.1の設置 *
これから、Coda-Slider 1.1.1を設置していきます。
まずは、フォルダの構成は、
index.html
css
- style.css
js
- coda-slider.1.1.1.pack.js
- jquery-1.2.1.pack.js
- jquery-easing.1.2.pack.js
- jquery-easing-compatibility.1.2.pack.js
img
- arw_l.gif
- arw_r.gif
- bg_tab.gif
- bg_tab_c.gif
- bg_tab_o.gif
- frm_box_01.gif
- frm_box_02.gif
- frm_box_03.gif
images
- ajax-loader.gif
- arrow-left.gif
- arrow-right.gif
- body-bg.png
となっています。imgフォルダの中の画像は、後から付け加えたデザイン用の画像で、imagesフォルダの中の画像は、Coda-Slider 1.1.1を読み込む時のバーなど元々入っている画像です。
次に、<head>～</head>タグ内に、
<link href="css/style.css" rel="stylesheet" type="text/css" media="all">
<script src="js/jquery-1.2.1.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing.1.2.pack.js" type="text/javascript"></script>
<script src="js/jquery-easing-compatibility.1.2.pack.js" type="text/javascript"></script>
<script src="js/coda-slider.1.1.1.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).bind("load", function() {
jQuery("div#slider1").codaSlider()
// jQuery("div#slider2").codaSlider()
// jQuery("div#xxxxx")の、"div#xxxxx"の部分を<body>タグ内のidと合わせます。
});
</script>
最後に、<body>タグ内に、
<h2>Coda-Slider 1.1.1の練習。</h2>
<div class="slider-wrap">
<div id="slider1" class="csw">
<div class="panelContainer">
<!-- Panel 1 start -->
<div class="panel" title="Panel 1">
<div class="wrapper">
<h3>Panel 1</h3>
<p>この部分がPanel1です。</p>
<p><a href="#3" class="cross-link" title="Go to Panel 3">« Previous</a> | <a href="#2" class="cross-link" title="Go to Panel 2">Next »</a></p>
</div>
</div>
<!-- Panel 1 end -->
<!-- Panel 2 start -->
<div class="panel" title="Panel 2">
<div class="wrapper">
<h3>Panel 2</h3>
<p>この部分がPanel2です。</p>
<p><a href="#1" class="cross-link" title="Go to Panel 1">« Previous</a> | <a href="#3" class="cross-link" title="Go to Panel 3">Next »</a></p>
</div>
</div>
<!-- Panel 2 end -->
<!-- Panel 3 start -->
<div class="panel" title="Panel 3">
<div class="wrapper">
<h3>Panel 3</h3>
<p>この部分がPanel3です。</p>
<p><a href="#2" class="cross-link" title="Go to Panel 2">« Previous</a> | <a href="#4" class="cross-link" title="Go to Panel 4">Next »</a></p>
</div>
</div>
<!-- Panel 3 end -->
</div><!-- .panelContainer -->
</div><!-- #slider1 -->
</div><!-- .slider-wrap -->
<p id="cross-links">
Same-page cross-link controls:<br />
<a href="#1" class="cross-link">Panel 1</a> | <a href="#2" class="cross-link">Panel 2</a> | <a href="#3" class="cross-link">Panel 3</a>
</p>
と書きます。<!-- Panel x start -->～<!-- Panel x end -->の部分を繰り返すと、表示されるパネルの数も増えます。また、別にもう一つスライドするパネルを表示させる場合には、<head>内の<script>部分の"jQuery("div#xxxxx")"で、idを指定し、<body>タグ内で<div id="slider#" class="csw">と指定します。
これで完成です。
* 参考サイト *
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)