JavaScript サイドバーにスライドショー
記事にスライドショー は試していただけましたか？
こんどはサイドバーにスライドショーを設置します
いぜんはフォトのスライドショーがあってそれをサイドバーになんて記事 も書きましたが・・
アメブロがフォトを廃止したおかげでスライドショーも使えなくなってしまいました
ほとんどやり方は記事にスライドショー と同じような物です
と・・言うより参考先そのままなのでコチラを先に記事にすべきでした
参考： http://snook.ca/archives/javascript/simplest-jquery-slideshow
前の記事 と同じで画像サイズは統一する必要があります
画像サイズがわかりにくくてすみません
この画像の場合は全部横が165px（サイドバーの幅より狭くしてください）縦が190pxです
画像サイズは揃えてあればどのようなサイズでも（サイドバーにはいれば）大丈夫です
画像サイズが決まったら
フリープラグインに・・
<script type="text/javascript">
$(function(){
$('#ss-show img:gt(0)').hide();
setInterval(function(){
$('#ss-show :first-child').fadeOut("slow")
.next('img').fadeIn("slow")
.end().appendTo('#ss-show');},
3000);
});
</script>
3000は約3秒で画像が入れ替わります
4500なら4.5秒 10000なら約10秒
他のブログパーツや見ている方のパソコンによって誤差がありますが目安くらいで・・
CSSに・・・
#ss-show {
position:relative;
margin:10px auto;/*上下10px＆中央*/
width:165px;/*画像の横*/
height:190px;/*画像の縦*/
}
#ss-show img {
position:absolute;
left:0; top:0;
}
先ほど決定した画像の横と縦を入れてください
10pxは上下のスキマです・・自由に調整下さい
CSSの編集が使えないスキンの場合はフリープラグインに・・
<style type="text/css">
#ss-show { position:relative; margin:10px auto; width:165px; height:190px; }
#ss-show img { position:absolute; left:0; top:0; }
</style>
スライドショーに使う画像を用意します
わかりやすく見やすく書くと・・
<div id="ss-show">
<img src="画像のURL">
<img src="画像のURL">
<img src="画像のURL">
<img src="画像のURL">
<img src="画像のURL">
</div>
注意です・・・
フリースペースに貼り付けますが改行をなくしてから貼り付けてください
たとえば上のでしたら↓このようになります・・↓この状態のをフリースペースに貼り付けます
<div id="ss-show"><img src="画像のURL"><img src="画像のURL"><img src="画像のURL"><img src="画像のURL"><img src="画像のURL"></div>
↓改行があるからNG！
↓こちらはOK!
途中に改行が残っていると↓うまく画像が入れ替わりません
このように途中で空白が現れる場合は途中に改行がないか確認します
これでフリースペースの中にスライドショーが表示されます
今回はさらにおまけです・・
サイドバーの中で表示位置を自由に変更してみます・・・
フリープラグインに・・・
<script type="text/javascript">
$(function() {
$("#ss-show").insertAfter("#calendar");
});
</script>
たとえば・・
#calendar はカレンダーの下に表示します
#profile ならプロフィールの下に表示
#recent_entries なら最近の記事一覧の下に表示
#theme_list ならブログテーマ一覧の下に表示
#archives ならアーカイブの下に表示
#search ならブログ内検索の下に表示
#reader ならこのブログの読者の下に表示
#favorite ならお気に入りブログの下に表示
#ranking ならアメブロランキングの下に表示
#bookmark ならブックマークの下に表示
#ameblo ならRSSの上に表示
#rss ならRSSの下に表示
#defaultAd ならPRの下に表示
赤字部分を変更して表示したい位置に設定します
見本に・・このブログの右サイドのRSSの上につけてみました （表示間隔は3000です）
スライドショーを2つ以上付けたい場合は・・ID名を変えて同じことをやってください
＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋
あれからすぐに病院に行ったおかげで顔面まで腫れあがる事は避けられましたが・・
なかなか耳の周りの腫れがひきません
どうやら今週末もコメントは開放できないようです
すみません m(_ _)m
このブログのサイドバー・・オセロの下にある「Googleブログ内検索」に探したいキーワードを入れて検索するか・・
http://ameblo.jp/plan-note こちらで探してみてください