Home > 20080620


20080620

Content Slider：スライドボタンを使った動的なコンテンツを作成
今回は、ブログなどの記事の中に、別枠で記事（テキストや画像を入れるコンテンツ）を付け、更にスライドボタンを付けることで動的（URLを変化させることなく）にページをめくることができるTips紹介をしたいと思います。
Content Sliderのサンプルはこちら １．CSS（contentslider.css）をダウンロード
２．js（contentslider.js）をダウンロード
３．gif（cs-loading.gif）をダウンロード
contentslider.css
contentslider.js
cs-loading.gif ４．すべてブログにアップロード
５．<head> 〜 </head> に以下を記述
<link rel="stylesheet" type="text/css" href="/file/contentslider.css" />
<script type="text/javascript" src="/file/contentslider.js"></script>
※CSSは、お好みでカスタマイズください

６．適用させたい記事で以下のような記述をする
<div id="slider1" class="sliderwrapper">
<div class="contentdiv">
Content 1
</div>
<div class="contentdiv">
Content 2
</div>
<div class="contentdiv">
Content 3
</div>
</div>

<div id="paginate-slider1" class="pagination"></div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.2], //[true/false, fadedegree]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
※青文字は、テキストや画像を入れるスペースです
このスライドコンテンツは、オートでページをめくることもできます。以下のコードを６項のscript内に入れるだけです。
autorotate: [true, 3000], //[true/false, pausetime]

Home > 20080620

Search
Adsense

Calendar
« 2008/06 »
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top