うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

ヘッダー画像の自動スライドショウーを実現したのですが、一般ユーザー向けコンテンツの写真は、自動で再生させるというわけにはいきません。
あくまでもユーザーが能動的に写真を見るからです。
そこで、ヘッダー画像のスライドショウーとは異なるプラグインを使ってJQueryを利用したスライドショウーを作りました。
以下、その備忘録です。

まず、今回、スライドショウーを導入したサイトは那須岳登山です。
那須岳登山の上位コンテンツにあたるドメインのクライミングトークはわたしの登山関係の情報をアップしているサイトなのですが、個人が趣味で運営しているので、様々な新しいプログラムの試験場として重宝しています。

bxSliderを使って写真をスライドショウーで見て貰う

今回使用をしたプラグインは、bxSliderです。
オフィシャルサイトはbxSliderです。

GitHubからもダウンロードが出来ますが、バグがある様で正常に作動しませんでした。
オフィシャルサイトからのダウンロードをお薦めします。わたしはGitHubからダウンロードをしたおかげで、解消不可能のバグのために1時間ほど時間を無駄にしてしまいました。

bxSliderを利用するためのソース

jQueryとプラグインを読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet" />

JavaScriptのソースを書きます。
オプションでcaptions: trueを入れていますが、これは、titleの文章をcaptionとして写真に表示させるオプションです。


<script>
\$(document).ready(function(){
	\$('.bxslider').bxSlider({
		captions: true
	})
});
</script>

htmlのソースを書きます。
ulタグやolタグで囲むのが一般的です。


<ul class="bxslider">
<li><img class="approaches_right" src="http://climbingtalk.net/nasu/picture/GpsMap/1425958907L.jpg" title="三斗小屋温泉と観音沼を結ぶ峠越えのルートと、三本槍ヶ岳と三倉山の稜線を歩くルートがここで交差します。ベンチなどの休憩施設は不思議とありません。" alt="大峠" /></li><li><img class="approaches_right" src="http://climbingtalk.net/nasu/picture/GpsMap/1425959016L.jpg" title="大峠から三本槍ヶ岳までの稜線の道は、冬の気候が厳しい貯めに丈の高い樹木がありません。このため人乗せた背丈よりも低い矮樹と草しかないので抜群の眺望が得られます。足元には高山植物が色とりどりの花を咲かせています。" alt="稜線の道" /></li><li><img class="approaches_right" src="http://climbingtalk.net/nasu/picture/GpsMap/1425958792L.jpg" title="大峠から登って行くと、それまで樹木に隠れていた鏡沼が甲子旭岳を借景に現れます。" alt="鏡沼と甲子旭岳" /></li><li><img class="approaches_right" src="http://climbingtalk.net/nasu/picture/GpsMap/1425958632L.jpg" title="三本槍ヶ岳の山頂。" alt="三本槍ヶ岳山頂" /></li>
</ul>

サンプルは、那須岳登山の三本槍ヶ岳の登山道です。
三本槍ヶ岳-大峠 | 那須岳登山

全く同じシステムですが、スライドショウとの違いを比べて下さい

高尾山登山は、那須岳登山と全く同じシステム(わたしの作成したCMS)を使っていますが、高尾山-陣馬山-三頭山避難小屋の紹介ページと比べると興味深くあります。

3月 10th, 2015

Posted In: JavaScript