★ スライドショー②
● 前の記事のスライドショーの記事があまり良くなかったので、新しく記述します。
このスクリプトは、ネット上、多く公開されているものです。
◆ 前の記事は下記
http://ameblo.jp/new-blue-777/entry-11028623093.html
● スライドショーの設置方法
① スライドショーをしたい画像をセットする。記述できる場所は下記です。
尚、ヘッダーにスライドショーを設置したい場合は、フリースペース、
フリープラグインに設置してください。
・フリースペース（改行は入れないようにする）
・フリープラグイン
・記事（ＨＴＭＬモードで記述する）
・メッセージボード（ＨＴＭＬモードで記述する）
◆ 下記の様に設置する。
<div id="slideshow"><img src="画像のＵＲＬ" class="active"><img src="画像のＵＲＬ"><img src="画像のＵＲＬ"><img src="画像のＵＲＬ"><img src="画像のＵＲＬ"><img src="画像のＵＲＬ"></div>
★ フリースペースに入れる場合は、<div id="slideshow">～</div>には、
改行は入れないようにしてください。
◆ 説明
Ａ active は、１つのみ設定する。最初に表示したい画像に記述します。
Ｂ 画像を拡大・縮小したい場合は、横幅(width)を指定します。
横幅を指定して高さ（縦）を指定しなければ、均等に拡大・縮小されます。
逆でも同じですが、横幅を基本にすると記事幅などに合わせるのにわかりやすいです。
尚、画像は、それぞれ、横と縦の比率が均等の画像を設置してください。
画像は、オリジナル画像を使ってください。
（サムネル画像（小さな画像）は画質が悪いので）
下記の様に設置します。
<div id="slideshow">
<img src="画像のＵＲＬ" width="800" class="active">
<img src="画像のＵＲＬ" width="800">
<img src="画像のＵＲＬ" width="800">
<img src="画像のＵＲＬ" width="800">
<img src="画像のＵＲＬ" width="800">
<img src="画像のＵＲＬ" width="800">
</div>
フリースペースに入れる場合は下記の様に、改行を除いてください
<div id="slideshow"><img src="画像のＵＲＬ" width="800" class="active"><img src="画像のＵＲＬ" width="800"><img src="画像のＵＲＬ" width="800"><img src="画像のＵＲＬ" width="800"><img src="画像のＵＲＬ" width="800"><img src="画像のＵＲＬ" width="800"></div>
● 変換用フォーム(現在調整中)
② フリープラグインへ下記のスクリプト（プログラム）を追加します。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');
if ( $active.length == 0 ) $active = $('#slideshow img:last');
var $next = $active.next().length ? $active.next() : $('#slideshow img:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 2000, function() {
$active.removeClass('active last-active');
});}
$(function() {setInterval( "slideSwitch()", 3000 );});
</script>
◆ 説明
Ａ setInterval( "slideSwitch()", 3000 );
→ 3000を調整して速さを変える。
単位：ミリ秒 1000は、1秒
Ｂ .animate({opacity: 1.0}, 2000, function()
→ 2000 を 大きくすると透過が遅くなります。ゆっくり画像が変わるようになります。
上記 setInterval の数値より小さくして、間隔を空けるといいと思います。
単位：ミリ秒 1000は、1秒
Ｃ 下記は、フリープラグインの先頭に１つあればＯＫです。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
③ 下記をCSSの一番下に追加する
/* ----------------------------------------------------- */
/* ■ スライドショー用(1) ＣＳＳ jQery */
/* ----------------------------------------------------- */
#slideshow { position:relative; width:800px; height:300px; }
#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }
◆ ヘッダーにスライドショーを配置したい場合は、更に下記を行います。
① 下記をフリープラグインへ追記。
<script type="text/javascript">
$(document).ready(function(){$("#slideshow").appendTo(".skinHeaderArea");})
</script>
② ヘッダーをクリックしたら、ブログホームに飛ぶようにしたい場合は
下記をフリープラグインへ追記。（アメーバIDは変えてください）
<script type="text/javascript">
$(function (){
$("#slideshow").click(function(){location="http://ameblo.jp/アメーバID"});
})
</script>
③ ヘッダーのスライドショーにカーソルを載せた時に指さしカーソルに
変えたい場合は、下記をCSSへ追記する。
#slideshow:hover{/* スライドショーにカーソルを乗せたとき */
cursor:pointer;/* カーソル ポインター */
}
★ １ページに複数のスライドショーを入れたい場合は、下記のように行います。
上記で記述したスライドショーの数を名前を変えて増やします。
① フリースペースやフリープラグインや記事、メッセージボードなどに
スライドショーしたい画像を指定する。
下記では、slideshow2 slideshow3 slideshow4 の記述例です。
<div id="slideshow2">
<img src="画像のＵＲＬ" class="active">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
</div>
<div id="slideshow3">
<img src="画像のＵＲＬ" class="active">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
</div>
<div id="slideshow4">
<img src="画像のＵＲＬ" class="active">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
<img src="画像のＵＲＬ">
</div>
② フリープラグインへ設置する
下記では、slideshow2 slideshow3 slideshow4 の記述例です。
<script type="text/javascript">
function slideSwitch2() {
var $active2 = $('#slideshow2 img.active2');
if ( $active2.length == 0 ) $active2 = $('#slideshow2 img:last');
var $next2 = $active2.next().length ? $active2.next() : $('#slideshow2 img:first');
$active2.addClass('last-active2');
$next2.css({opacity: 0.0})
.addClass('active2')
.animate({opacity: 1.0}, 2000, function() {
$active2.removeClass('active2 last-active2');
});}
$(function() {setInterval( "slideSwitch2()", 3000 );});
</script>
<script type="text/javascript">
function slideSwitch3() {
var $active3 = $('#slideshow3 img.active3');
if ( $active3.length == 0 ) $active3 = $('#slideshow3 img:last');
var $next3 = $active3.next().length ? $active3.next() : $('#slideshow3 img:first');
$active3.addClass('last-active3');
$next3.css({opacity: 0.0})
.addClass('active3')
.animate({opacity: 1.0}, 2000, function() {
$active3.removeClass('active3 last-active3');
});}
$(function() {setInterval( "slideSwitch3()", 3000 );});
</script>
<script type="text/javascript">
function slideSwitch4() {
var $active4 = $('#slideshow4 img.active4');
if ( $active4.length == 0 ) $active4 = $('#slideshow4 img:last');
var $next4 = $active4.next().length ? $active4.next() : $('#slideshow4 img:first');
$active4.addClass('last-active4');
$next4.css({opacity: 0.0})
.addClass('active4')
.animate({opacity: 1.0}, 2000, function() {
$active4.removeClass('active4 last-active4');
});}
$(function() {setInterval( "slideSwitch4()", 3000 );});
</script>
③ CSSへ追記する
下記では、slideshow2 slideshow3 slideshow4 の記述例です。
/* ----------------------------------------------------- */
/* ■ スライドショー用(2) ＣＳＳ jQery */
/* ----------------------------------------------------- */
#slideshow2 { position:relative; width:800px; height:300px; }
#slideshow2 img { position:absolute; top:0; left:0; z-index:8; }
#slideshow2 img.active2 { z-index:10; }
#slideshow2 img.last-active2 { z-index:9; }
/* ----------------------------------------------------- */
/* ■ スライドショー用(3) ＣＳＳ jQery */
/* ----------------------------------------------------- */
#slideshow3 { position:relative; width:800px; height:300px; }
#slideshow3 img { position:absolute; top:0; left:0; z-index:8; }
#slideshow3 img.active3 { z-index:10; }
#slideshow3 img.last-active3 { z-index:9; }
/* ----------------------------------------------------- */
/* ■ スライドショー用(4) ＣＳＳ jQery */
/* ----------------------------------------------------- */
#slideshow4 { position:relative; width:800px; height:300px; }
#slideshow4 img { position:absolute; top:0; left:0; z-index:8; }
#slideshow4 img.active4 { z-index:10; }
#slideshow4 img.last-active4 { z-index:9; }