Home > スポンサー広告 > Content Glider:ボタンクリックで流れるようにコンテンツを切替


スポンサーサイト

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

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/212-13da6d2a
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > Content Glider:ボタンクリックで流れるようにコンテンツを切替

Home > IT Tips > Content Glider:ボタンクリックで流れるようにコンテンツを切替


Content Glider:ボタンクリックで流れるようにコンテンツを切替

今回は、ブログなどの記事の中に、別枠で記事(テキストや画像を入れるコンテンツ)を付け、更にスライドボタンを付けることで動的(URLを変化させることなく)にページをめくることができるTips紹介をしたいと思います。
昨日の記事で紹介した「Content Slider」と仕組みは同じですが、ページをめくる時の挙動に差があります。こちらも格好良かったので紹介したいと思います。違いは以下の通りです。
Content Slider:ページをめくると、切り替わる
Content Glider:ページをめくると、流れるように切り替わる
Content Gliderのサンプルはこちら
1.CSS(contentglider.css)をダウンロード
2.js(contentglider.js)をダウンロード
3.jquery(jquerypack.js)をダウンロード
contentglider.css
contentglider.js
jquerypack.js
4.すべてブログにアップロード
5.<head> ~ </head> に以下を記述
<link rel="stylesheet" type="text/css" href="/file/contentglider.css" />
<script type="text/javascript" src="/file/jquerypack.js"></script>
<script type="text/javascript" src="/file/contentglider.js"></script>
※CSSは、お好みでカスタマイズください

6.適用させたい記事で以下のような記述をする
<script type="text/javascript">
featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: false, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

<div id="canadaprovinces" class="glidecontentwrapper">
<div class="glidecontent">
Content 1
</div>
<div class="glidecontent">
Content 2
</div>
<div class="glidecontent">
Content 3
</div>
</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>
※青文字は、テキストや画像を入れるスペースです
script:ページの切り替え制御などを実装
div id="canadaprovinces":埋め込み記事の枠組み部分
div class="glidecontent":枠組みに入れる記事内容の部分
div id="p-select":ページナビボタンの部分

このスライドコンテンツは、オートでページをめくることもできます。以下コードの赤文字箇所を「true/false」どちらかに切り替えるだけです。
autorotate: false, //Auto rotate contents (true/false)?
更にこのスライドコンテンツは、上下切り替え以外に左右切り替えもできます。 以下コードの赤文字箇所を「updown/downup/leftright/rightleft」いずれかに切り替えるだけです。
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/212-13da6d2a
Listed below are links to weblogs that reference
Content Glider:ボタンクリックで流れるようにコンテンツを切替 from TRASH

Home > IT Tips > Content Glider:ボタンクリックで流れるようにコンテンツを切替

Recent Comments
Recent Trackback
Feeds

↑Page Top

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