Home > スポンサー広告 > Content Slider:スライドボタンを使った動的なコンテンツを作成


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/211-d654d7c9
Listed below are links to weblogs that reference
スポンサーサイト from TRASH
Trackback from sanabelle kattenvoer 2011-02-04 (金) 08:52

sanabelle kattenvoer

De eetgewoonten in het verleden zijn van grote invloed op voedingskeus van katten. Bovendien reageren katten zeer gevoelig op de struktuur van de voeding verschillende smaakrichtingen nemen ze echter bijna niet waar (more…)

Home > スポンサー広告 > Content Slider:スライドボタンを使った動的なコンテンツを作成

Home > IT Tips > Content Slider:スライドボタンを使った動的なコンテンツを作成


Content Slider:スライドボタンを使った動的なコンテンツを作成

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

6.適用させたい記事で以下のような記述をする
<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>
※青文字は、テキストや画像を入れるスペースです
このスライドコンテンツは、オートでページをめくることもできます。以下のコードを6項のscript内に入れるだけです。
autorotate: [true, 3000], //[true/false, pausetime]
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:1

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/211-d654d7c9
Listed below are links to weblogs that reference
Content Slider:スライドボタンを使った動的なコンテンツを作成 from TRASH
Trackback from sanabelle kattenvoer 2011-02-04 (金) 08:52

sanabelle kattenvoer

De eetgewoonten in het verleden zijn van grote invloed op voedingskeus van katten. Bovendien reageren katten zeer gevoelig op de struktuur van de voeding verschillende smaakrichtingen nemen ze echter bijna niet waar (more…)

Home > IT Tips > Content Slider:スライドボタンを使った動的なコンテンツを作成

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。