JavaScript 記事にスライドショー
先週は体調が悪くて・・
今週は仕事とコレ？で・・
なかなかコメントを受け付けることが出来なくてすみません（携帯からは見えちゃっていますが・・）
こんなの記事のトップに書いておかないと・・
読まれない方が多いのかメッセージで質問が来ちゃっています
「すぐに返事下さい」「速攻で・・」「かわりにやって」って言われても・・・
メッセージではCSSの質問は受け付けられません
コメント開放までお待ち下さい m(_ _)m
（カラム落ちとか表示が崩れちゃっている場合は遠慮なくメッセージ下さい）
たわごとはこのくらいで・・・
で～・・・・ 本題です
やろうとしているのは↓記事中のスライドショー
菅原橋から中川までの全長3,930メートル。全体は五つのゾーンに分かれ、滝に始まり、せせらぎ、水しぶき、飛び石、釣り橋に冒険船など変化に富んでいる。水遊びができない季節でも、ウオーキングをしたりアスレチックで遊んだり四季を通じて楽しめる。また、桜の名所でもある。
まずは・・・スライドショーに使う画像のサイズを決めてください
すべての画像を同じサイズで揃える必要があります・・
将来設置するであろう画像のことも考えてサイズを決定下さい・・
途中でサイズ変更は出来なくなります
横長にしていて・・どうしても縦長の画像が使いたい場合でも・・
サイズが違っているのはNGなので・・
↓このように・・・
加工して他の画像とサイズを合わせておく必要があります
（説明がわかるように灰色にしていますが・・色は背景と同じ方がいいと思います）
画像サイズがそろっていないと・・・・・・↓ ヽ(;´Д｀)ノ
画像のサイズをきめたら・・
フリープラグインに・・
<script type="text/javascript">
$(function(){
$('.fadein a:gt(0)').hide();
setInterval(function(){
$(".fadein").each(function(){
$("a",this).eq(0).fadeOut().next("a").fadeIn().end().appendTo($(this));
});},3000);
});
</script>
3000 は約3秒で次の画像に入れ替わります 5000 なら5秒 10000 なら10秒
このブログは3000で動作しています・・もう少しユックリがよければ数字を大きくしてください
他のブログパーツや見ている方のパソコンによって多少の誤差は出ます・・一応の目安で
動作しない場合・・
フリープラグインの中で書くところを変えて試してください
このブログの場合は一番最後に書くと動作しませんでしたので一番最初に書いています
ＣＳＳに・・・（赤字部分に決めた画像サイズを入れてください）
.fadein {
position:relative;
width:500px;/*画像の横*/
height:375px;/*画像の縦*/
margin:0 auto;/*中央*/
}
.fadein img {
position:absolute; left:0; top:0;
}
ＣＳＳの編集が使えないスキンの場合はフリープラグインに・・
<style type="text/css">
.fadein { position:relative; width:500px; height:375px;margin:0 auto; }
.fadein img { position:absolute; left:0; top:0; }
</style>
ここまで用意が出来たら・・・
いよいよ記事に画像を貼ります（標準エディタで説明します）
スライドショーで表示したい画像を記事に貼り付けます
（せっかくサイズを揃えてあるのでオリジナルで表示を選択します）
2007年の11月から使っていますが・・
コレだけ説明で画像とかいっぱい使って4795枚もアップしているのにまだ7.8%しか使っていません
画像1枚分でいいからフリープラグインの文字数を増やしてください m(_ _)m
貼りつけたらHTMLタグを表示にします
こんなタグがならんでいますが・・
この中から削除しないとダメな物や追加する物があります・・
<div class="fadein">
<p><br />
<a href="http://stat.ameba.jp/user_images/20100725/19/exlink/ec/51/j/o0500037510657998817.jpg"><img width="500" height="375" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！-小松川境川 親水公園" src="http://stat.ameba.jp/user_images/20100725/19/exlink/ec/51/j/o0500037510657998817.jpg" border="0" complete="true" /></a>
<br />
<br />
<a href="http://stat.ameba.jp/user_images/20100725/19/exlink/7e/d2/j/o0500037510657998810.jpg"><img width="500" height="375" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！-小松川境川 親水公園" src="http://stat.ameba.jp/user_images/20100725/19/exlink/7e/d2/j/o0500037510657998810.jpg " border="0" complete="true" /></a>
<br />
<br />
<a href="http://stat.ameba.jp/user_images/20100725/19/exlink/e5/18/j/o0500037510657998809.jpg"><img width="500" height="375" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！-小松川境川 親水公園" src="http://stat.ameba.jp/user_images/20100725/19/exlink/e5/18/j/o0500037510657998809.jpg" border="0" complete="true" /></a>
<br />
<br />
<a href=" http://stat.ameba.jp/user_images/20100725/19/exlink/f6/a5/j/o0500037510657998808.jpg"><img width="500" height="375" alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！-小松川境川 親水公園" src="http://stat.ameba.jp/user_images/20100725/19/exlink/f6/a5/j/o0500037510657998808.jpg" border="0" complete="true" /></a>
<br />
</p>
スライドショーで使用する画像のタグから
ピンク色のタグ <p> </p> <br /> を削除します（残っていると動作しません）
<p>や</p>は最初からない場合もあります
スライドショーに使う画像タグの一番最初に <div class="fadein">
一番最後に </div> を1組加えます
この間の画像がスライドショーとして表示されます
↓こんなんになります・・・
例として4枚の画像で説明していますが・・何枚でも可能です
動作しない場合は・・この中に <br /> が残っていないか確認ください
たとえばこの記事の場合・・タグの非表示ではこんなんになってます・・
これらの画像が自動でスライドショーになるわけです・・
実際は画像がズラズラ～っと貼りついているだけなんですね・・
携帯の方にはスライドショーは動作しませんが画像は見ていただけます
もちろん1つの記事の中にも
<div class="fadein">
<a href="http://stat.ameba.jp・・・・・・ ・・・ /></a>
<a href="http://stat.ameba.jp・・・・・・ ・・・ /></a>
<a href="http://stat.ameba.jp・・・・・・ ・・・ /></a>
</div>
<br />
<div class="fadein">
<a href="http://stat.ameba.jp・・・・・・ ・・・ /></a>
<a href="http://stat.ameba.jp・・・・・・ ・・・ /></a>
</div>
と・・増やしていけば何組でも設置することが出来ます↓
CSS 自動でポラロイド風に・・ との併用も可能です
小菅西公園 / 葛飾区
小菅水再生センター建物の屋上にある、四季折々の花木が植えられた公園です。木製アスレチック遊具があり、幼稚園・保育園・学校等の遠足にも利用されています。ここから眺望する富士山は富士見百景に選定されています。
サイドバーに設置したい場合は・・・ JavaScript サイドバーにスライドショー
参考： http://snook.ca/archives/javascript/simplest-jquery-slideshow
今回の記事では みーとくんさま 刃断さま に手伝っていただきました・・・
って～より・・ほとんど作っていただいちゃったような物です
ありがとうございました
にしても・・あめぶろさま～ 最近・・記事にしてもCSSにしても保存がうまくいきませんよ
いつも赤文字で怒られちゃっていますが・・実際は保存できちゃっていたり・・
記事の下書き保存のダイアログがいつまでたっても真っ白なままだったり・・
最近のコメントも重いとかで表示されないようですが・・
コメントより読者の方が重いんじゃないですか？って思いますが・・・
・新しい読者が1人います って表示されるから見ようとしても重いらしくてなかなか表示されないです