貼っていただけたらうれしいです


Yahoo!ブックマークに登録



Googleブログ内検索
Loading
2010-08-01 08:20:14

JavaScript サイドバーにスライドショー

テーマ:JavaScript

記事にスライドショー は試していただけましたか?


こんどはサイドバーにスライドショーを設置します

いぜんはフォトのスライドショーがあってそれをサイドバーになんて記事 も書きましたが・・

アメブロがフォトを廃止したおかげでスライドショーも使えなくなってしまいました



ほとんどやり方は記事にスライドショー と同じような物です

と・・言うより参考先そのままなのでコチラを先に記事にすべきでした


参考: http://snook.ca/archives/javascript/simplest-jquery-slideshow




前の記事 と同じで画像サイズは統一する必要があります



アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


画像サイズがわかりにくくてすみません

この画像の場合は全部横が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!
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

↓こちらはOK!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!



途中に改行が残っていると↓うまく画像が入れ替わりません
このように途中で空白が現れる場合は途中に改行がないか確認します









これでフリースペースの中にスライドショーが表示されます



今回はさらにおまけです・・

サイドバーの中で表示位置を自由に変更してみます・・・

フリープラグインに・・・


<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  こちらで探してみてください

PR

コメント

[コメントをする]

1 ■無題

お疲れ様です

質問なんですが・・・
SCCのスキンあるじゃないですか
あこをちっちゃくしたいっていうかー・…

なんって言ったらいいのか…
http://ameblo.jp/mayuuri1206/
こんなふうに…

2 ■>ゆらさま

それをやるためには広告を消す必要がありますのでコメント出来ません

コメント投稿

[PR]気になるキーワード