以前にここで「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」と題して、
jQueryでの画像切替ビューアーを紹介しましたが、
これを応用して、自動で画像エリアが切り替わる
シンプルな画像スライドショーを作ってみたのでご紹介。

まずは動作のサンプルから。
※全体構成は以前の記事の物と同じにしてあります。

jQuery SIMPLE SLIDESHOW【SAMPLE1】

4枚の画像が自動でクロスフェードしてスライドショーとして切り替わり、
下部に並べてあるサムネイルをクリックすることで
特定のビジュアルに切り替えることも出来ます。

全体構成についてHTMLから。

◆HTML
<div id="slideshow">

<div>
<div><a href="#1"><img src="img/photo01.jpg" width="400" height="300" alt="" /></a></div>
<div><a href="#2"><img src="img/photo02.jpg" width="400" height="300" alt="" /></a></div>
<div><a href="#3"><img src="img/photo03.jpg" width="400" height="300" alt="" /></a></div>
<div><a href="#4"><img src="img/photo04.jpg" width="400" height="300" alt="" /></a></div>
</div>

<ul>
<li><a href="javascript:void(0);"><img src="img/photo01.jpg" width="100" height="75" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="img/photo02.jpg" width="100" height="75" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="img/photo03.jpg" width="100" height="75" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="img/photo04.jpg" width="100" height="75" alt="" /></a></li>
</ul>

</div><!--/#slideshow-->

大枠をID「#slideshow」で覆い(ID名は任意)
画像が切り替わるメインビジュアル部分は
全体を<div>で囲んだ後、
切り替える個々のエリアを同じく<div>で囲います。

サムネイルは<li>リストで形成し、
切り替えるメインビジュアルとサムネイルの並び(順序)は
同じにしておく必要があります。

メインビジュアルで使用する画像も、サムネイル画像に対しても
HTML側ではIDやクラスはつけていません。

そしてこのHTMLソースに対してのCSSは以下の様に。

◆CSS
#slideshow {
	margin: 0 auto;
	width: 400px;
	text-align: left;
}
#slideshow div {
	width: 400px;
	height: 300px;
	overflow: hidden;
	position: relative;
}
#slideshow div div {
	top: 0;
	left: 0;
	position: absolute;
}

#slideshow ul {
	width: 400px;
}

#slideshow ul li {
	width: 100px;
	float: left;
	display: inline;
}

#slideshow .active {
	filter:alpha(opacity=100)!important;
	-moz-opacity: 1!important;
	opacity: 1!important;
}


/* =======================================
	ClearFixElements
======================================= */
#slideshow ul:after {
	content: ".";
	height: 0;
	clear: both;
	display: block;
	visibility: hidden;
}

#slideshow ul {
	display: inline-block;
	overflow: hidden;
}

メインビジュアル部分の「#slideshow div」と「#slideshow div div」と
サムネイルの透過具合を制御する「#slideshow .active」以外に書かれている
各プロパティはサンプル画面のレイアウトを形成するものなので
あまり重要視しなくていいものになります。

そして実際に動作を実行させるスクリプトは以下の様になります。

◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var setId = '#slideshow';
	var fadeTime = 1000;
	var delayTime = 5000;

	$(setId + ' div div').each(function(i){
		$(this).attr('id','view' + (i + 1).toString());
		$(setId + ' div div').css({zIndex:'98',opacity:'0'});
		$(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
	});

	$(setId + ' ul li').click(function(){
		clearInterval(setTimer);

		var connectCont = $(setId + ' ul li').index(this);
		var showCont = connectCont+1;

		$(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})});
		$(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})});

		$(this).addClass('active');
		$(this).siblings().removeClass('active');

		timer();

	});

	$(setId + ' ul li:not(.active)').hover(function(){
		$(this).stop().animate({opacity:'1'},200);
	},function(){
		$(this).stop().animate({opacity:'0.5'},200);
	});

	$(setId + ' ul li').css({opacity:'0.5'});
	$(setId + ' ul li:first').addClass('active');

	timer();

	function timer() {
		setTimer = setInterval(function(){
			$('li.active').each(function(){
				var listLengh = $(setId + ' ul li').length;
				var listIndex = $(setId + ' ul li').index(this);
				var listCount = listIndex+1;

				if(listLengh == listCount){
					$(setId + ' ul li:first').click()
				} else {
					$(this).next('li').click();
				};
			});
		},delayTime);
	};
});
</script>

メインビジュアル部分の<div>数に対して、それぞれ順番にIDを付け、
サムネイルの<li>の順序番号と連動させて
メインビジュアルIDの表示を切り替える構成になっています。
(この辺りの構成は以前の記事と同じ内容になっています。)

スクリプト開始部分にある
——————————————————————–
var setId = ‘#slideshow’;
var fadeTime = 1000;
var delayTime = 5000;
——————————————————————–
は上から
——————————————————————–
・該当するエリアのID名
・フェードで切り替わる際の時間
・エリアが切り替わるまでの待機時間
——————————————————————–
となっているので、
値を変更するだけでカスタマイズが可能です。

こういったスライドショーは、場合によって
マウスオーバーでスライドショー動作(自動切替)を停止させた方が
ユーザーに優しい場合があるので、
それらの動作を追加する場合は以下のスクリプトを追加します。

◆SCRIPT
hoverでスライド動作ストップ
$(setId).mouseover(function(){
	clearInterval(setTimer);
}).mousemove(function(){
	clearInterval(setTimer);
}).mouseout(function(){
	timer();
});

この動作を追加したパターンは
以下の様になります。

jQuery SIMPLE SLIDESHOW【SAMPLE2】

スライドショーエリア(サムネイル含む)にマウスオーバーしている間は
自動で切り替わるスライドショー動作がストップします。

HTMLやスクリプトはそのままでCSSを変更するだけで、
ビジュアルエリアとサムネイルを重ね合わせた
以下の様なレイアウトパターンも簡単に実装できます。

jQuery SIMPLE SLIDESHOW【SAMPLE3】

HTMLとCSSを極力シンプルな形ですむように構成してあるので
さまざまなレイアウトパターンでスライドショーを実装することができると思います。

jQueryでのスライドショーが必要になった際に是非。。。

サンプルファイルをダウンロードしたい方はこちらから

SHARE

Comments (180)

  • Y-M | 2012.01.11 14:06

    とてもシンプルで汎用性の高いスライドショーだと思います。
    早速活用させていただいてます。どうもありがとうございました!

    質問なのですが、スライドショーの画像の切り替わりをフェードイン/アウトではなく
    easingのように右から左へと、シュッと切り替える動作は可能でしょうか??

    初心者な質問で恐縮です…。
    お時間がある時で結構なのでご返答いただければ幸いです。

  • BlackFlag | 2012.01.13 0:23

    >Y-Mさん

    コメントありがとうございます。
    このスクリプトをご活用いただいているようで嬉しく思っております。

    ここで紹介しているスライドショースクリプトの場合は
    コメントいただいた様な、右から左へ移動するエフェクトで
    切り替え動作させることは、ちょっと厳しいかと思っております。

    ちょうど今、同じ様な右から左へスライドする動作の
    スライドショーを作る予定でいるので
    完成次第またここでスクリプトを紹介してみようかと思っています。

    もうしばらくお待ちください。。

    よろしくお願いします。

  • BlackFlag | 2012.01.13 1:33

    >Y-Mさん

    右から左へスライド動作についてですが
    ここで紹介しているスクリプトを少し改変する形で実現できました。

    スクリプト中盤にある、

    ————————————————————
    $(setId + ‘ div div#view’ + (showCont)).siblings().stop().animate({opacity:’0′},fadeTime,function(){$(this).css({zIndex:’98’})});
    $(setId + ‘ div div#view’ + (showCont)).stop().animate({opacity:’1′},fadeTime,function(){$(this).css({zIndex:’99’})});
    ————————————————————

    の2行の指定を以下の様に書き換えます。

    ————————————————————
    var moveLengh = parseInt($(setId + ‘ div div’).css(‘width’));
    $(setId + ‘ div div#view’ + (showCont)).css({opacity:’1′}).siblings().stop().animate({left:’-‘+(moveLengh)},fadeTime,function(){$(this).css({zIndex:’98’})});
    $(setId + ‘ div div#view’ + (showCont)).css({left:(moveLengh),opacity:’1′}).stop().animate({left:’0′},fadeTime,function(){$(this).css({zIndex:’99’})});
    ————————————————————

    こうすることでフェードではなく右から左へ
    画像がスライドして切り替わる動作になります。
    ※どこのサムネイルをクリックしても切り替わり動作は右から左へのスライドのみです。

    サンプルファイルも用意したので
    動作をご確認いただく場合は
    下記のURLからダウンロードしてみてください。
    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowSideMove.zip

    よろしくお願いします。

  • Y-M | 2012.01.14 11:56

    どうもありがとうございました!
    難しい注文をお願いしてしまい恐縮でしたが、
    無事、思い通りの動きを再現することが出来ました。

    コードも非常にシンプルでとても分かりやすかったです。
    本当に感謝してます!!
    今後もこちらのサイトを参考にしつつ、Web制作を行っていきたいと思います。

  • BlackFlag | 2012.01.15 0:37

    >Y-Mさん

    サンプルスクリプトのご確認
    ありがとうございました!

    無事にご希望の動作になっていたようで
    安心いたしました。

    いつもシンプルで分かりやすいスクリプトを心掛けているので
    そう言っていただけると嬉しく思います!

    また何かありましたら
    よろしくお願いします。

  • ST | 2012.01.25 6:52

    気の利いたスクリプトありがとうございます。

    質問です。
    画像エリアに(別ページへの移動のための)ハイパーリンクをかける事はできますでしょうか?
    ご教示頂ければ幸甚です。

    宜しくおねがいします。

  • BlackFlag | 2012.01.25 23:54

    >STさん

    コメントありがとうございます。

    サンプルファイルでは画像全体にリンクを張っていますが
    そのリンク先を外部ページへのURLにして「target=”_blank”」を付ける形ではいかがでしょうか?

    もしくは、切り替える一つ一つの<div>~</div>の間は
    通常のHTMLタグを追加することが可能になっているので
    その中でリンクタグを追加してみてください。

    ご確認よろしくお願いします。

  • ST | 2012.01.26 23:08

    すみません。リンクのかけどころを誤っていました。
    外部もページ内リンクも全て問題なく掛かりました!
    ありがとうございます!

  • BlackFlag | 2012.01.27 10:28

    >STさん

    リンクの件、無事に解決した様でよかったです。
    ご報告ありがとうございました!

    また何かあればお知らせください。
    よろしくお願いします。

  • nk | 2012.03.09 14:40

    素敵なスライドショーですね!
    素晴らしいと思います!

    質問なのですが、
    IE8(IETester6,7)で読み込み時に、一瞬最後の画像が初めに表示される事があります。
    最後の画像を一瞬表示されないように制御する事はできるのでしょうか?

    ご教示頂きたく思います。
    宜しくお願いします!

  • 花豆 | 2012.03.09 18:22

    素敵ギャラリーですね!目からウロコです!

  • BlackFlag | 2012.03.09 20:30

    >nkさん

    コメントありがとうございます!
    このスライドショーをお使い頂いているようで
    嬉しく思っております。

    ご質問頂きました事象についてですが
    こちらで同じ現象を確認できていないので憶測になるのですが
    恐らく、CSSの

    ◆修正前——————————
    #slideshow div div {
    top: 0;
    left: 0;
    position: absolute;
    }
    ————————————–

    に「display:none」を追加して

    ◆修正後——————————
    #slideshow div div {
    top: 0;
    left: 0;
    position: absolute;
    display: none
    }
    ————————————–

    として、
    記事内のスクリプトの11行目辺りにある

    ◆修正前——————————
    $(setId + ‘ div div’).css({zIndex:’98’,opacity:’0′});
    ————————————–

    に「display:block」を追加して

    ◆修正後——————————
    $(setId + ‘ div div’).css({zIndex:’98’,display:’block’,opacity:’0′});
    ————————————–

    とすることで
    回避できるのではないかと思っています。

    ページロード時の画像表示箇所の要素を
    スクリプトで非表示制御するのではなくて
    CSSで非表示制御する形になります。

    サンプルファイルも用意したので
    必要であれば下記のURLからダウンロードしてみてください。
    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowDN.zip

    一度こちらで試してみていただけますでしょうか?

    よろしくお願いします。

  • BlackFlag | 2012.03.09 20:31

    >花豆さん

    コメントありがとうございます!
    その様に言って頂けるとほんと嬉しく思います。

    ぜひともサイト制作にこのスクリプトをご活用いただけると幸いです。
    よろしくお願いします。

  • nk | 2012.03.10 21:09

    早速のご連絡ありがとうございます!

    下記の修正ですが、

    #slideshow div div {
    top: 0;
    left: 0;
    position: absolute;
    display: none
    }

    上記箇所のdisplay: noneを
    display: none;

    と「;」を付けましたが問題ないでしょうか?
    また、「$(setId + ‘ div div’).css({zIndex:’98′,display:’block’,opacity:’0′});」は、このまま使用いたしました。

    しかし、読み込み時にIE8(IETester6,7)で読み込み時に、一瞬最後の画像が初めに表示されてしまいます。
    こちらでも分かる範囲で修正を加えてみたのですが、なかなか上手く行かない様です。
    こちらで不備があるんですかね。。
    もう少し試してみます!
    他に何か処理方法がありましたらご教示頂ければ幸いです!
    宜しくお願いします!

  • BlackFlag | 2012.03.11 1:17

    >nkさん

    ご連絡ありがとうございます。

    最初の画像以外は初めから表示状態にならないはずだったのですが
    ダメでしたか。。

    他の方法としては、
    一枚目の画像を囲う<div>にIDを付け
    ◆例————————————–
    <div id=”item_first”><a href=”#1″><img src=”img/photo01.jpg” width=”400″ height=”300″ alt=”” /></a></div>
    ——————————————

    CSS側でレイヤーの調整をしてみてはいかがでしょうか?

    ◆例————————————–
    #slideshow div div {
    top: 0;
    left: 0;
    position: absolute;
    display: none;
    z-index: 98;
    }
    #slideshow div div#item_first {
    z-index: 99;
    }
    ——————————————

    「;」の件は失礼致しました。
    セレクタ内の最後のプロパティには無くても大丈夫ですが
    記述しておいた方がいいと思います。

    以上になりますが、
    今回も憶測での調整になってしまいますが
    再度、試してみてください。。

    よろしくお願いします。

  • jQueryでサムネイル付きスライドショーをシンプルに作成する方法 | tigertech.jp | 2012.03.28 0:58

    […] jQueryでサムネイル付きスライドショーをシンプルに作成する方法 This entry was posted in jQuery. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL. « Milford Wingsとは […]

  • Annasui | 2012.04.03 17:27

    シンプルなスライドショーを探していて、このサイトのものがぴったりでした。
    本当にありがとうございます、助かりました。
    高度な技術を惜しげもなく公開されていることに感動致しました。

    このスライドショーを背景に見立てて、その背景の下部と微妙に重なり合うようにコンテンツのページを作りたいのですが、
    コンテンツページにネガティブマージンを設定したあと、
    最前面にもってこようと z-index を高めに設定しても前面にでてきてくれません。

    何か良い方法はないでしょうか?

  • BlackFlag | 2012.04.04 0:51

    >Annasuiさん

    コメントありがとうございます!
    このスライドショースクリプトをご活用頂いている様で
    大変嬉しく思っております。

    ご質問いただきました内容についてですが
    実際のHTMLやCSSを見てみないとなんとも言えないのですが、
    当記事のスクリプトでは画像に対してz-indexの値を「99」にしているので
    コンテンツエリアのz-indexを「100」以上にしてもダメでしょうか?

    もしくは、当記事の【SAMPLE3】は画像切り替えの上に
    サムネイル要素を重ねている構成にしているので
    こちらの構成を参考にしてみていただけますでしょうか。

    ただ背景の画像の切り替えならばもしかしたら当ブログ別記事の
    ——————————————————————————————-
    ・jQueryで画像がクロスフェードするシンプルな画像ビューアー(自動再生)を作成する方法
    https://black-flag.net/jquery/20110525-3120.html
    ——————————————————————————————-
    でも可能なのではないかとも思っています。

    以上になりますが、
    ご確認よろしくお願いします。

  • 匿名 | 2012.04.04 16:51

    初めまして。
    こちらのスライドショー非常に汎用性があると拝見しました。
    質問なのですが、サムネールをクリックではなく、マウスオーバーでスライド画像を切り替えて、更にそのサムネールをクリックすると別のページへ移るようなリンクを設定することはできますか?

    ほとんどのスライドショーはサムネールをクリックすると、スライド画像が切り替わるのがほとんどなので、サムネールをクリックすることで別のページへ移動できるようなリンクを設定できるならば、是非お教え頂けたら幸いです。

    何卒よろしくお願いいたします。

  • BlackFlag | 2012.04.05 0:47

    >匿名さん

    コメントありがとうございます!

    このスライドショースクリプトをご活用いただいているようで
    こちらとしても嬉しく思っております。

    ご質問いただきましたマウスオーバーでの動作についてですが
    このスクリプトを使用するとなると改修が必要なのですが
    同じ様な動作を別記事で紹介させていただいております。

    ・jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法
    https://black-flag.net/jquery/20120215-3671.html

    クロスフェードで切り替わるタイプではないのですが
    ロールオーバーでの動作やサムネイルにリンクを張ることは可能になっております。

    こちらのHTMLやスクリプトを確認してみてください。

    よろしくお願いします。

  • 匿名 | 2012.04.05 10:54

    ご回答ありがとうございます。
    ご紹介頂きました同じ様な動作をする別記事を参考に、是非活用させて頂きたいと思います。
    ありがとうございました!

  • UK | 2012.04.05 16:28

    初めまして、大変興味がありいつも参考にさせていただいております。
    ひとつ教えて下さい。
    SMPLE1のような場合、サムネイルを4枚より増やすと下に増えていきますが
    横並びにしてスライドショーと共に自動でスクロールし、ていくようなHPをよく見かけますが
    方法がどうしても分かりません。
    可能であればお教えください。

    よろしくお願いいたします。

  • BlackFlag | 2012.04.05 20:52

    >匿名さん

    ご確認ありがとうございます!
    他にもいろいろ簡単なスクリプトを紹介しているので
    あれこれ試してみてください。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • BlackFlag | 2012.04.05 20:59

    >UKさん

    コメントありがとうございます!
    ご活用いただいているようでとても嬉しく思っております。

    ご質問頂いた内容についてですが
    当ブログ別記事の
    ———————————————–
    ・jQueryでシンプルなカルーセルパネルスライドUIを作成する方法
    https://black-flag.net/jquery/20110614-3200.html
    ———————————————–
    と組み合わせることで可能なのではないかと思っています。

    自動でスクロールさせるには
    さらにスクリプトを追加する必要も出てくるかと思いますが
    一度こちらの方、ご確認下さい。

    よろしくお願いします。

  • UK | 2012.04.06 16:48

    ご回答ありがとうございます。
    カルーセルスライドとの合体やってみます。

    私のスキルでは無理と思いますが・・・

    ありがとうございました。

  • ぽんた | 2012.05.15 22:48

    サンプルを使わせていただいています。
    とても分かりやすく重宝させていただいています。

    1点ぜひ解決していただきたいことがありまして。。
    現在、直にhtmlにソースを記述していますが、該当の画像の部分のソースを外部化したいと思っています。
    画像はファイル名を変えなければhtmlの修正は必要ありませんが、リンク先等を変えたい場合などで外部化したファイルで完結できればと思っています。

    自分は知識などはまだまだなのですが色々調べてみてAjaxをと使えないかと思い、
    head内に
    $(function(){
    $(“.mainVisual”).load(“index3.html .mainVisual #slideshow”);
    })
    body内に

    <!–/#slideshow–>

    を。
    そして外部化したファイルに

    <a href=”http://yahoo.co.jp” rel=”nofollow”></a>
    <a href=”http://sports.yahoo.co.jp/” rel=”nofollow”></a>
    <a href=”http://codingmania.net/contents/399.html” rel=”nofollow”></a>
    <a href=”http://semooh.jp/jquery/” rel=”nofollow”></a>

    <a href=”void(0);” rel=”nofollow”></a>
    <a href=”void(0);” rel=”nofollow”></a>
    <a href=”void(0);” rel=”nofollow”></a>
    <a href=”void(0);” rel=”nofollow”></a>

    <!–/#slideshow–>

    を記述しました。
    表示じたいは外部化したファイルを読み込んでくれて画像の表示はできたのですが、jsが動いてくれません(jsはサンプルのままです)。
    どのように修正すればよいのかご教授願いますでしょうか。
    結構急ぎであり困っている状況です。
    何卒、よろしくお願いいたします。。

  • BlackFlag | 2012.05.16 0:35

    >ぽんたさん

    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいているようで
    こちらとしても嬉しく思っております。

    ご質問いただきましたHTMLの外部ファイル化についてですが
    コメント欄のHTMLソース部分の表示がおかしくなってしまっており
    きちんと構成が確認できていないのですが
    おそらくスライドショーのスクリプトを
    ページロード後に実行させればいけるのではないかと思っております。

    当記事で紹介しているスライドショースクリプトを
    —————————————-
    $(function(){
    $(window).load(function(){
    ~ ここにスライドショースクリプト ~
    });
    });
    —————————————-
    という具合に囲ってみてください。

    それでもダメだった場合は、
    外部ファイル部分をjson化して
    —————————————-
    $.ajax({
    url: ‘xxx.json’,
    dataType: ‘json’,
    success : function(data){
    ~ ここにHTMLソース生成スクリプト ~
    },
    complete : function(){
    ~ ここにスライドショースクリプト ~
    }
    });
    —————————————-
    といった処理で、
    「complete:」にスライドショー用のスクリプトが実行されるように
    調整してみてください。

    ご確認よろしくお願いします!

  • hello-mt.net » サムネイル付きクロスフェードスライドショー | 2012.05.22 18:52

    […] シンプルなクロスフェードスライドショーです。 […]

  • KF | 2012.05.31 17:07

    こんにちは。
    シンプルなスライドショーで活用させていただいています。

    初心者にもわかりやすく解説いただいていて助かっています。

    今回、
    jQuery SIMPLE SLIDESHOW【SAMPLE3】
    のスライドを同じページで2箇所使っています。
    どちらも3枚の画像をまわしています。
    →1つ目は「id=”slideshow02″」
     2つ目は「id=”slideshow03″」としています。

    headタグの中は
    ソースが多くなってしまいますが、
    つぎのソースを2つ分、記述しています(#slideshow02の部分を#slideshow03としたものも記述)
    ———————————————————————

    $(function(){
    var setId = ‘#slideshow02’;
    var fadeTime = 500;
    var delayTime = 5000;

    $(setId + ‘ div div’).each(function(i){
    $(this).attr(‘id’,’view’ + (i + 1).toString());
    $(setId + ‘ div div’).css({zIndex:’98’,opacity:’0′});
    $(setId + ‘ div div:first’).css({zIndex:’99’}).stop().animate({opacity:’1′},fadeTime);
    });

    $(setId + ‘ ul li’).click(function(){
    clearInterval(setTimer);

    var connectCont = $(setId + ‘ ul li’).index(this);
    var showCont = connectCont+1;

    $(setId + ‘ div div#view’ + (showCont)).siblings().stop().animate({opacity:’0′},fadeTime,function(){$(this).css({zIndex:’98’})});
    $(setId + ‘ div div#view’ + (showCont)).stop().animate({opacity:’1′},fadeTime,function(){$(this).css({zIndex:’99’})});

    $(this).addClass(‘active’);
    $(this).siblings().removeClass(‘active’);

    timer();

    });

    $(setId + ‘ ul li:not(.active)’).hover(function(){
    $(this).stop().animate({opacity:’1′},200);
    },function(){
    $(this).stop().animate({opacity:’0.5′},200);
    });

    $(setId + ‘ ul li’).css({opacity:’0.5′});
    $(setId + ‘ ul li:first’).addClass(‘active’);

    timer();

    function timer() {
    setTimer = setInterval(function(){
    $(‘li.active’).each(function(){
    var listLengh = $(setId + ‘ ul li’).length;
    var listIndex = $(setId + ‘ ul li’).index(this);
    var listCount = listIndex+1;

    if(listLengh == listCount){
    $(setId + ‘ ul li:first’).click()
    } else {
    $(this).next(‘li’).click();
    };
    });
    },delayTime);
    };

    // hoverでスライド動作ストップ
    $(setId).mouseover(function(){
    clearInterval(setTimer);
    }).mousemove(function(){
    clearInterval(setTimer);
    }).mouseout(function(){
    timer();
    });

    });

    ———————————————————————

    次のような挙動となり困っています。
    ◎どちらかのスライド(とくに2つ目のスライド)が最後(3枚目)のスライドでストップしたままに
     なってしまいます。
    ◎たまに、2つ目のスライドが前から順に表示されず、後ろから表示されるような挙動の時がありました。

    マウスオーバーでスライドショー動作(自動切替)を停止させる以下の記述を
    削除しても同様です。
    ———————————————————————
    // hoverでスライド動作ストップ
    $(setId).mouseover(function(){
    clearInterval(setTimer);
    }).mousemove(function(){
    clearInterval(setTimer);
    }).mouseout(function(){
    timer();
    });
    ———————————————————————

    ご教授いただけますと幸いです。

  • BlackFlag | 2012.06.03 18:16

    >KFさん

    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいているようで
    とても嬉しく思っております。

    ご質問いただきました1ページにこのスライドショーを複数入れ込む場合ですが
    もともとページ内の複数設置を想定していなかったので
    強引なやり方になってしますが、スクリプト内の変数などすべてに「01」や「02」といった
    切り分け様のナンバリングをすることで実現可能かと思っています。
    (スクリプトはスライドショー2つ分記述するので長くなってしまいますが・・・)

    参考までにサンプルファイルを用意しましたので
    必要あれば下記URLよりダウンロードして中身をご確認ください。

    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShow3DUAL.zip

    よろしくお願い致します。

  • oskn0912 | 2012.06.26 23:13

    black flagさん、こんばんわ。いつも参考にさせていただいております。
    非常にわかりやすい解説とシンプルなコードで、初心者の私にはとてもためになるサイトです。
    今回、コメントさせていただきましたのは、このクロスフェードのスライドショーに、
    「次へ」「前へ」の矢印ボタンを設置しようと思い、
    https://black-flag.net/jquery/20120215-3671.html
    の記事とコメントを参考にさせていただき、挑戦してみました。

    しかし、素人の浅知恵でうまくいかず、お知恵を拝借できれば、という厚かましい気持ちででコメントさせていただいております。

    http://cosakana.com/test/jquery/1205/99_22/
    これが修正させていただいたコードです。
    実際に試していただくと分かるかと思いますが、矢印右方向をクリックすると、うまく次のシーンに送られ、最後まで来たら最初にループします。しかし、左方向をクリックした時には最初のシーンまで来たところで、ループせずに止まってしまいます。

    何とかこれを解消できる方法はないかと思い、お知恵を拝借したいと存じます。
    お時間のある時で結構ですので、ヒントをいただけないでしょうか。

    よろしくお願いいたします。

  • BlackFlag | 2012.06.27 1:13

    >oskn0912さん

    コメントありがとうございます!

    当ブログで紹介しているスクリプトを
    いろいろとご活用いただいているようで
    とても嬉しく思っております。

    「次へ」「前へ」のボタン動作もいい具合に動いていると思います。

    ご質問いただきました「前へ」ボタンのループ部分に関してですが
    ソースを確認させていただいたところ、

    —————————————-
    $(‘#moveprev’).click(function(){
    —————————————-

    に設定している

    —————————————-
    var listIndex = $(setId + ‘ ulli’).index(this);
    —————————————-

    の部分が、ulとliがくっついてしまっている影響かと思われます。
    ここをulとliの間に半角スペースを入れて

    —————————————-
    var listIndex = $(setId + ‘ ul li’).index(this);
    —————————————-

    とすることでリストの数を正常に取得することが出来るようになるので
    正しく動作すると思われるので
    一度試してみていただけますでしょうか。

    ご確認よろしくお願いします。

  • oskn0912 | 2012.06.27 7:45

    black flagさん、おはようございます。

    なんと!単純な記述ミスだったのですね。
    ご指摘の場所を修正しましたら、うまく動作いたしました。
    お手数をおかけいたしました。
    これからも参考にさせていただきます。

    早くて親切なご対応、ありがとうございました。
    重ねてお礼申し上げます。

  • wpwbs585 | 2012.07.02 13:22

    サムネイル付きのスライドショー、とても気に入っています。
    そこで、一つ質問ですが、このJavascriptは商用可能ですか?
    ご回答の程をよろしくお願いします。

  • BlackFlag | 2012.07.02 23:30

    >wpwbs585さん

    コメントありがとうございます!

    このスライドショースクリプトをご活用いただいているようで
    とても嬉しく思っております。

    こちらのスクリプトの使用に関しては
    個人・商用問わず、ご自由に使用していただいてかまいません。

    この記事に関わらず、当ブログで紹介しているスクリプトは
    特にライセンスなども設けていないので、
    ご自由に使用および改変して
    サイトに組み込んでいただいて問題ありませんので
    ご活用いただけると幸いです!

    よろしくお願いします!

  • wpwbs585 | 2012.07.03 13:38

    お返事ありがとうございます。
    早速、使用させていただきます。

  • なお | 2012.07.14 20:20

    こんにちは。
    大変参考になるサイトで、勉強させてもらっています。
    ありがとうございます。
    こちらのスライドショー、早速使わせていただきました。
    ひとつ質問させてください。
    大きい画像が幅649px 高さ250px、サムネイル画像が幅162px、高さ65px
    のサイズで変更してみたのですが、
    なぜかサムネイルのサイズが横幅のみ169pxに伸びてしまうという現象が起きてしまいます。(IE)

    理由がわからず大変頭を悩ませております。
    長くて大変申し訳ございませんが、cssとhtmlを貼らせていただいてもよろしいでしょうか。

    #slideshow {
    margin: 0 auto;
    width: 649px;
    height: 314px;
    text-align: left;
    }

    #slideshow .sld {
    width: 649px;
    height: 250px;
    position: relative;
    margin: 0;
    }

    #slideshow .sld .shw {
    top: 0;
    left: 0;
    position: absolute;
    margin: 0;
    }

    #slideSwitch ul {
    width: 649px;
    margin:0;
    height: 64px;
    display: block;
    text-align: left;
    }

    #slideshow ul li {
    width: 162px;
    height: 64px;
    margin:0;
    list-style: none;
    padding:0;
    line-height:0;
    float:left;
    }

    #slideshow ul li .sum1{
    width: 163px;
    height: 64px;
    margin:0;
    list-style: none;
    padding:0;
    line-height:0;
    float:left;
    }

    #slideshow ul li a{
    line-height:normal;
    display:block;}

    #slideshow .active {
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
    }

    ■html■
    <div id=”slideshow”>
    <div class=”sld”>
    <div class=”shw”><img src=”#” width=”649″ height=”250″ ></div>
    <div class=”shw”><img src=”#” width=”649″ height=”250″ ></div>
    <div class=”shw”><img src=”#” width=”649″ height=”250″ ></div>
    <div class=”shw”><img src=”#” width=”649″ height=”250″ ></div>
    </div>
    <ul id=”slideSwitch”>
    <li><a href=”javascript:void(0);”><img src=”#” width=”162px” height=”64″></a></li><li><a href=”javascript:void(0);”><img src=”#” width=”162px” height=”64″ ></a></li><li><a href=”javascript:void(0);”><img src=”#” width=”162px” height=”64″ ></a></li><li><a href=”javascript:void(0);”><img src=”#” width=”162px” height=”64″ ></a></li>
    </ul>
    <div class=”clear”></div>
    <style type=”text/css”>
    ul#slideSwitch, ul#slideSwitch li, #slideSwitch li a { margin:0; padding:0; }
    ul#slideSwitch li, #slideSwitch li a {display:inline; }
    </style>
    </div>

    大変恐縮ですがご教授いただけましたら幸いですm(_ _)m

  • BlackFlag | 2012.07.15 0:27

    >なおさん

    コメントありがとうございます。

    このスライドショースクリプトを
    サイト制作にご使用いただいているようで
    とても嬉しく思っております。

    ご質問いただきました画像サイズについてですが、
    サイトを確認させていただきましたところ
    「m_sys_common.css」のCSSファイル下部の方で
    「#slideshow ul li img,#slideshow ul li a img」に対して
    「width:169px」が設定されてしまっているので、
    その影響かと思われます。

    このプロパティを削除もしくは構成を変更するか
    「#slideshow ul li」に対して「overflow:hidden」を入れて
    162pxからはみ出したものは非表示にしてしまうなどの方法で解消されるかと思っております。

    ご確認よろしくお願いします。

  • なお | 2012.07.15 2:12

    早速お返事をいただき、本当にありがとうございました!!!
    ただの記述ミスでお恥ずかしいです。。。
    何日も悩んでいたので本当に助かりました。
    お忙しいところサイトまで確認いただき、本当にありがとうございます。
    これからも勉強させて頂きます。

  • BlackFlag | 2012.07.16 15:24

    >なおさん

    ご返信ありがとうございます。
    無事に理想の動作が実装できたようで安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • sh | 2012.07.19 15:34

    こんにちは
    jQueryを触り始めてあまり日数が無いshと申します。
    大変参考になるサイトで勉強させていただいております。ありがとうございます。

    スライドショーを使用したいと考え早速ダウンロードし編集しましたが、
    画像を追加しただけで、追加画像だけが表示されないという現象が起こっています。
    この現象はIEのみで、他Firefox・Google Chrome・Safariでは起こっていません。
    HTMLタグの編集だけやりましたので、他はサンプルのままです。
    どこか他に、追加などで記述しなければならない箇所があるのでしょうか?
    長くなってしまって大変恐縮ですが、念のためHTMLタグを記述しておきますので、ご指導いただけると幸いです。

    ■html■
    <div id=”container”>
    <div id=”slideshow02″>
    <div>
    <div><a href=”#1″><img src=”img/photo01.jpg” width=”400″ height=”300″ alt=”” /></a></div>
    <div><a href=”#2″><img src=”img/photo02.jpg” width=”400″ height=”300″ alt=”” /></a></div>
    <div><a href=”#3″><img src=”img/photo03.jpg” width=”400″ height=”300″ alt=”” /></a></div>
    <div><a href=”#4″><img src=”img/photo04.jpg” width=”400″ height=”300″ alt=”” /></a></div>
    <div><a href=”#5″><img src=”img/photo05.jpg” width=”400″ height=”300″ alt=”” /></a></div>
    <div><a href=”#6″><img src=”img/photo06.jpg” width=”400″ height=”300″ alt=”” /></a></div>
    </div>

    <ul>
    <li><a href=”javascript:void(0);”><img src=”img/photo01.jpg” width=”50″ height=”50″ alt=”” /></a></li>
    <li><a href=”javascript:void(0);”><img src=”img/photo02.jpg” width=”50″ height=”50″ alt=”” /></a></li>
    <li><a href=”javascript:void(0);”><img src=”img/photo03.jpg” width=”50″ height=”50″ alt=”” /></a></li>
    <li><a href=”javascript:void(0);”><img src=”img/photo04.jpg” width=”50″ height=”50″ alt=”” /></a></li>
    <li><a href=”javascript:void(0);”><img src=”img/photo05.jpg” width=”50″ height=”50″ alt=”” /></a></li>
    <li><a href=”javascript:void(0);”><img src=”img/photo06.jpg” width=”50″ height=”50″ alt=”” /></a></li>
    </ul>

    </div><!–/#slideshow–>
    </div><!–/#container–>

    使用させていただいたサンプルは「SAMPLE3」です。
    よろしくお願いします。

  • BlackFlag | 2012.07.20 1:03

    >shさん

    コメントありがとうございます。

    ご質問いただいた追加画像が表示されない点ですが
    記述いただいたソースを見る限り、特に問題はないのではないかと思います。

    「表示されない」という現象がどのようなことなのか
    実際の不具合が起こっているページを見てみないと判断しにくいのですが
    試しにここで紹介しているスクリプトで画像6枚のパターンを用意しましたので
    こちらが正常に表示されるかどうか確認してみてください。

    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowIMG6.zip

    変更箇所はHTMLソース内に5、6枚目の画像のソースを追加したのと
    CSSでサムネイル表示部分のリスト「#slideshow02 ul」の幅を「width: 360px」に変更しただけで
    IEでも動作確認済みです。

    よろしくお願いします。

  • sh | 2012.07.20 13:47

    >BlackFlagさん

    早速の返答ありがとうございます。
    更に、校正までしていただいて感謝しております。
    ありがとうございます。

    無事に実装に向けて精進してまいります。
    本当にありがとうございました!
    また何かありましたら問い合わせてもよろしいでしょうか?
    よろしくお願いします。

  • BlackFlag | 2012.07.21 0:53

    >shさん

    ご返答ありがとうございます。

    サンプルデータがお役に立って
    無事に実装までこぎつけたようで安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • yk | 2012.08.22 16:59

    BlackFlag様いつも拝見させて頂いております。

    hpの作成は初心者のykと申します。
    jsなどの知識はなく、こちらのサンプルをお借りさせて頂いております。

    今回こちらのページの「SAMPLE3」をサンプルにページを作成させて頂いているのですが、
    画像を10枚アップするものを作成しています。
    ul側は問題なく画像が反映しているのですが、
    div側の1枚目のみが画像表示されません。
    どのように対処すればよいかをご教授頂けますと幸いで御座います。
    何卒宜しくお願い致します。

  • BlackFlag | 2012.08.23 0:47

    >ykさん

    コメントありがとうございます。
    このスライドショースクリプトをご使用いただいているようで
    嬉しく思っております。

    ご質問いただいた件についてですが、
    このページ上でダウンロードできるサンプルスクリプトでも
    同じ現象が起こるのでしょうか?

    ykさんの方で実装したデータで起こる場合は
    スクリプト部分とは別のところの原因も考えられるので
    可能であれば現状のデータを確認できるテストURLなど
    お知らせいただければ調査もできるかと思います。

    ご確認の程、よろしくお願いします。

  • yk | 2012.08.23 16:42

    早速のご返答有難う御座います。

    色々と試行錯誤していく中、SAMMPLE3からSAMMPLE2に切り替える事で実装する事が出来ました。
    動作確認も行い、適正な動作を行ってくれました。
    有難うございます。

    もう一つ質問なのですが、メイン画像をイージングの様にスライドさせて行く方法はあったりするのでしょうか。

    お手数をお掛け致しますが、ご教授頂けますと幸いで御座います。

  • BlackFlag | 2012.08.25 1:33

    >ykさん

    理想の動作に近づいてきたようでなによりです。

    ご質問いただきましたスライド表示についてですが
    この記事で紹介しているスクリプトで実装するとなると
    コメントの一番最初にご質問いただいているもののような調整で実現することは可能です。

    右から左へスライドするパターンサンプルデータは
    下記のURLからダウンロードすることができます。
    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowSideMove.zip

    もしくは、少し構成は変わってしまいますが
    下記の記事で近い動作のスクリプトも紹介しています。

    ・jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法
    https://black-flag.net/jquery/20120215-3671.html

    こちらも参考にしてみてください。
    よろしくお願いします。

  • yk | 2012.08.28 11:10

    ご返信頂き、誠に有難う御座います。
    何とか完成させることが出来ました。
    これもひとえにBlackFlag様のお蔭で御座います。
    これからも拝見させて頂き、利用させて頂きます。
    何卒宜しくお願い致します。

  • BlackFlag | 2012.08.30 1:54

    >ykさん

    お返事ありがとうございました。

    無事に理想の動作が実装できたようで安心致しました。
    また何かありましたらご連絡くださいませ。

    よろしくお願いします。

  • RiO | 2012.09.05 19:39

    はじめまして!いつも参考にさせていただいております。
    こちらのスライダーもとても素敵なので、ぜひ利用させていただきたいと思っているのですが、ランダム表示というのは可能なのでしょうか。
    ページを開いたときに最初に表示される画像と、移り変わる順番がランダムにできると嬉しいなと思っており…
    そのような機能は付加できるものなのでしょうか。
    素人質問で恐縮ですが、ご教授いただけると幸いです。
    よろしくお願い致します。

  • BlackFlag | 2012.09.06 2:12

    >RiOさん

    コメントありがとうございます!
    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問頂きましたランダム表示に関しては
    「setInterval」で処理を繰り返す部分で
    下部のサムネイルをランダムでクリックさせるように
    スクリプトを変更すればいけると思います。

    ためしにサンプルを作ってみたので
    下記よりダウンロードしてみてください。

    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowRandom.zip

    スクリプト全体も細々調整してあるので
    変更箇所に関しては、記事内で紹介している内容と
    照らし合わせて参照してみてください。

    よろしくお願いします。

  • RiO | 2012.09.08 9:28

    >BlackFlagさま

    お返事ありがとうございます。
    サンプルまでご提供いただいてありがとうございます!!
    とってもありがたいです!><

    これからも色々と参考にさせてくださいませ。
    本当にありがとうございます。

  • greenfish | 2012.09.09 10:17

    初めてのjavascriptだったので、
    とてもわかりやすく参考になりました。

    タグの使い方がシンプルなのに
    応用しやすいことに感謝しております。

    本当にありがとうございます。

  • BlackFlag | 2012.09.09 17:15

    >greenfishさん

    コメントありがとうございます!

    この記事がお役に立ったようで
    こちらとしても嬉しく思っております。

    他にもいろいろと紹介していますので
    あれこれ試して使ってみていただけると幸いです。

    よろしくお願いします。

  • greenfish | 2012.09.09 21:53

    さっそく質問してもいいでしょうか?
    SAMPLE3を参考に作ってみたんですが…

    サムネイル画像にカーソルを合わせただけで、
    メイン画像が止まるようにするタグはありますか?

    javascript初心者な質問でスイマセン!!
    教えて頂けたらありがたいです。

    宜しくお願いします。

  • BlackFlag | 2012.09.10 20:23

    >greenfishさん

    このスライドショーをご活用いただいているようで
    ありがとうございます。

    ご質問頂きました、
    サムネイル画像にマウスオーバーで動作をストップさせるには
    スクリプトの下部に書かれている

    ————————————-
    // hoverでスライド動作ストップ
    $(setId).mouseover(function(){
    ————————————-

    の一部分を

    ————————————-
    // hoverでスライド動作ストップ
    $(setId + ‘ ul li’).mouseover(function(){
    ————————————-

    という感じに変えることで実現可能かと思います。

    試してみてください。
    よろしくお願いします。

  • greenfish | 2012.09.11 10:16

    >BlackFlagさま

    お返事ありがとうございます。
    こんなに丁寧に教えて頂けて感謝してます。
    何日も悩んでいたのに…BlackFlagさまのお蔭です!!

    サムネイル画像にマウスオーバーで動作をストップできましたが…
    できたら、サムネイル画像のメイン画像に切り替わるといいのですが…

    どうしたらできるんでしょうか?
    このタイプでは無理なんですか??

    質問ばかりでスイマセン(><;)

  • BlackFlag | 2012.09.12 1:35

    >greenfishさん

    理想の動作に近づけたようでよかったです。

    再度ご質問頂いたマウスオーバーでの動作については
    このスクリプトを使用するとなると改修が必要なのですが
    同じ様な動作を別記事で紹介させていただいております。

    ・jQueryで画像などを自動でスライドするサムネイル付きコンテンツスライダーをシンプルに作成する方法
    https://black-flag.net/jquery/20120215-3671.html

    クロスフェードで切り替わるタイプではないのですが
    ロールオーバーでの動作で切り替わる仕様になっております。

    こちらのHTMLやスクリプトを確認してみてください。

    よろしくお願いします。

  • awano | 2012.09.13 13:50

    シンプルですごく使いやすいですね!使わせていただきました。ありがとうございます!

    初歩的な質問で恐縮ですが、
    下のサムネイルを半透明でなく通常の色にするにはスクリプトのどこをいじればいいのでしょうか?
    また、選択されているサムネイルに白枠をつけたい場合はどこに記述すればいいのでしょうか。

    たくさん質問してしまってすみません…!教えて頂ければありがたいです。

    よろしくお願い致します。

  • greenfish | 2012.09.14 20:55

    >BlackFlagさま

    回答ありがとうございます。

    クロスフェードで切り替わるタイプにしたいので…
    改修しないといけないのですね(><;)

    オススメの本とかありますか?

    お時間ある時に教えて下さい。
    毎度感謝しております。

  • BlackFlag | 2012.09.15 1:48

    >awanoさん

    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    サムネイルの透明度の設定部分は
    スクリプトの31行目から37行目までが該当箇所になるので
    マウスオーバーの際の設定値などを調整することで
    変更させることが可能になっています。

    サムネイルに線をつける場合は
    アクティブ状態のサムネイルには「active」のクラスが付与されるようになっているので
    「active」のクラスに対して指定を加えることで可能かと思います。

    参考までにサンプルも用意してみましたので
    必要であれば下記URLよりダウンロードしてみてください。

    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowTnumbBorder.zip

    ご確認よろしくお願いします。

  • BlackFlag | 2012.09.15 2:29

    >greenfishさん

    その様なクロスフェードビューアーを作る機会がありましたら
    またこちらで紹介させていただきますね。

    jQueryの本については、、、

    Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL) [大型本]

    こちらが基礎部分から解説されていて
    とても分かりやすいかと思います。

    ご参考程度までに。。。

    よろしくお願いします。

  • noshikawa | 2012.09.18 11:36

    記述はシンプルなのに、自動で次のイメージに切り替わること、サムネイルが薄くなったりと細かい気配りがあるとても有用なスクリプトですね!使わせてもらってます。ありがとうございます!

  • awano | 2012.09.18 18:23

    ありがとうございます!
    思い通りの動きになって本当に助かりました!!

    徐々に自分でも書けるようになっていきたいです…!

    本当に助かりました!またブログのぞかせていただきます。
    ありがとうございました!

  • BlackFlag | 2012.09.18 20:55

    >noshikawaさん

    コメントありがとうございます。

    このスライドショースクリプトがお役に立ったようで
    嬉しく思っております。

    他にも色々と紹介しておりますので
    あれこれ試してみてください。

    よろしくお願いします。

  • BlackFlag | 2012.09.18 20:56

    >awanoさん

    ご連絡ありがとうございます。

    無事に思い通りの動作が実装できたようで
    安心致しました。

    また何かありましたらご連絡くださいませ。

    よろしくお願いします。

  • yashima | 2012.09.23 23:46

    はじめまして。
    すばらしいスクリプトの公開ありがとうございます。
    とてもシンプルで実装が手軽なので利用させて頂いています。
    質問なのですが、下記URLのスライドショーのようなキャプションを組み合わせることは可能でしょうか?
    お手数ですがご教授願えると助かります!
    http://jsjs.solid-peat.com/galleryview/galleryview.html

  • BlackFlag | 2012.09.24 0:38

    >yashimaさん

    コメントありがとうございます。

    このスライドショースクリプトを
    ご活用いただいているようで嬉しく思っております。

    ご質問いただいたキャプションについてですが
    このスライドショー動作は<div>のブロック要素を
    一つの括りとして切り替えて動作させているので
    <div>の中に画像タグだけでなく<span>タグなどで
    キャプション用の要素を追加すれば実装できるかと思います。

    スクリプトの構成上、
    <div>の中にさらに<div>を使って要素を追加しようとすると
    動作がおかしくなってしまうので<span>タグなど
    別のタグで形成されるようにしてください。

    よろしくお願いします。

  • yashima | 2012.09.24 2:52

    ご回答ありがとうございます!
    タグとCSSで望み通りのキャプションの追加ができました!
    素早いご対応、重ねてお礼申し上げます!

  • BlackFlag | 2012.09.24 8:58

    >yashimaさん

    ご返信ありがとうございます。
    無事に理想の動作が実装できたようで安心しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • mocako | 2012.10.15 0:00

    はじめまして。
    とても素敵なものを無償で使用できるよう公開してくださってありがとうございます。
    現在、サンプルとしてダウンロードできるものを少し触らせていただいているのですが質問があります。
    現状、サムネイルは下部に表示されていますが、サムネイルを左横に移動することは可能でしょうか?
    実際にCSSで幅の調節やfloatをしてみると、見た目上は理想通りサムネイルが左横に移動しますが
    自動で行われる画像の切り替えがストップしてしまいます。
    お忙しい中申し訳ありませんが、何か対処法がありましたらお教えいただけませんでしょうか。
    よろしくお願い致します。

  • BlackFlag | 2012.10.15 0:20

    >mocakoさん

    コメントありがとうございます。

    スライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきましたサムネイルを左側に配置する件ですが
    レイアウトの変更の場合はHTMLとSCRIPTはそのままで
    CSSのみの変更で実現可能かと思います。

    試しにサンプルファイルのレイアウトを
    サムネイルを左側に配置した形でのデータを用意させていただきましたので
    必要であれば下記URLよりダウンロードしてみてください。

    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowThumbLeft.zip

    HTMLとSCRIPTはまったく変更せずに
    CSSのみレイアウト変更としてもろもろ変更してあります。

    お試しください。
    よろしくお願いします。

  • mocako | 2012.10.15 16:23

    BlackFlag様

    こんにちは。
    この度はご回答してくださいってありがとうございました。
    そしてサンプルまでご用意いただき、本当にありがとうございます。

    ご用意いただいたサンプルファイルでやりたかったことが実現できそうです。
    とても助かりました。

    お忙しい中ご対応いただき、本当にありがとうございました。

  • BlackFlag | 2012.10.16 0:10

    >mocakoさん

    ご返信ありがとうございます。
    無事に理想の動作が実装できそうでよかったです。

    他にもいろいろサンプルスクリプトを紹介しておりますので
    あれこれ試していただけると幸いです。

    よろしくお願いします。

  • ebi | 2012.11.04 8:54

    条件を全部クリアしているスライドショーにやっと巡り会えました。有り難うございます!
    さっそくファイルをダウンロードしました。

    index[hover].html内のjsのコメントアウト部分
    「hoverで切替処理」と「hoverでスライド動作ストップ」の両方をコメントアウト解除にした状態で、
    サムネイルが自動切り替えするよりも早いスピードで、サムネイル上をマウスで1往復くらい左右になぞると、
    以後、サムネイルが早回しのようにクルクル切り替わる状態になってしまいます。
    「hoverで切替処理」「hoverでスライド動作ストップ」どちらか1つだけがonの状態では、この現象は起こりませんでした。
    サムネイルのhoverの動作両方をonにした状態で、この現象を回避することは可能でしょうか。

  • BlackFlag | 2012.11.04 18:45

    >ebiさん

    コメントありがとうございます。

    このサムネイルスライドショースクリプトをご活用いただき
    嬉しく思っております。

    ご質問いただきましたhover動作での事象についてですが
    もともとクリック動作での想定で構築していたので
    hoverでの切り替えについてはきちんとした確認を怠っていました。。。

    hoverでのスライド動作ストップ及び
    切り替え動作を実装するには
    —————————————
    $(setId).hover(function(){
    clearInterval(setTimer);
    $(setId + ‘ ul li’).hover(function(){
    $(this).click();
    clearInterval(setTimer);
    });
    },function(){
    timer();
    });
    —————————————
    この様な記述に書き換えることで
    正常に動作させることができるかと思います。

    念の為、サンプルファイルも用意しましたので
    必要であれば下記よりダウンロードしてみてください。

    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowHoverStopSwitch.zip

    よろしくお願いします。

  • ebi | 2012.11.04 20:35

    BlackFlag様

    サンプルファイルいただきました。
    オールクリアーです、有り難うございます!!
    がっつり活用させていただきます。
    本当に有り難うございました。

  • BlackFlag | 2012.11.04 23:37

    >ebiさん

    ご返信ありがとうございました。

    無事に問題も解消され
    理想の動作が実装できそうで安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • ume224jp | 2012.11.14 3:14

    サムネイル付きスライドショーを作成していて、たどり着きました。
    いつもjavascriptの勉強の参考にさせて頂いております。

    凄くシンプルかつ分かり易い説明と大変感銘を受けております。
    Web制作する者として、感謝致します。

  • BlackFlag | 2012.11.15 1:17

    >ume224jpさん

    コメントありがとうございます。
    このサムネイルスライドショーをご活用いただいているようで
    嬉しく思っております。

    なかなか有意義な情報を発信できている自信もないのですが
    その様に仰って頂けると本当に励みになります。
    ありがとうございます。

    これからもよろしくお願い致します。

  • tos | 2012.11.17 13:06

    とても有り難く拝見させて頂いております。

    一つ、質問させて下さいませ。
    少し意地悪な使い方をして、サムネイルを素早く何回も押すと、スライドショーのスピードがおかしくなってしまいます。
    解決策は、ありますでしょうか?
    setInterval と clearInterval の問題なのかな、と思っているのですが・・。

  • BlackFlag | 2012.11.18 22:11

    >tosさん

    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました事象についてですが
    こちらでも同じようにサムネイルをすばやく何度もクリックしているのですが
    その様な動作を実現できずにいます。

    その様な現象が起こるご使用のOSやブラウザなど
    お知らせいただいてもよろしいでしょうか。

    よろしくお願いします。

  • kanon | 2012.11.25 18:04

    サムネイルの生成・配置をスクリプト側で行わない方法を探していて、こちらに辿りつきました。
    シンプルで、実装しやすく大変重宝しそうです。

    そこで質問なのですが、同じスクリプトを読み込んで、
    読み込みするhtmlの方で、
    fadeTimeやdelayTimeを設定(調整)することは可能でしょうか?
    同じく、オートプレイを停止する方法はありますでしょうか?

    よろしくお願いします。

  • BlackFlag | 2012.11.26 2:04

    >kanonさん

    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問頂きました件についてですが
    fadeTimeやdelayTimeをHTML側から操作させる件につていは
    どの様な構成での実装を想定されているのか
    ちょっと判断できないので何とも言えないのですが
    スクリプトのスライドショー動作部分は外部JSファイルにして
    fadeTimeやdelayTime部分のみ
    HTML側の<head>タグ内に直書きするような場合は
    プラグイン化すれば可能になるかと思いますが
    ここで紹介しているスクリプトは
    プラグイン化していないものになるので
    少々厳しいかと思っております・・・

    オートプレイを停止する方法については
    スクリプト内の「timer();」となっている部分と
    「clearInterval(setTimer);」となっている部分をすべて削除していただければ
    停止させることが出来るかと思います。

    また、その様な動作は当ブログ別記事の
    —————————————————————————————–
    ・jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法
    https://black-flag.net/jquery/20110512-3039.html
    —————————————————————————————–
    こちらの内容と同様の仕様になるかと思われますので
    併せてご確認いただければと思います。

    よろしくお願いします。

  • kanro | 2012.12.13 17:08

    ホームページのトップページにあるバナーをスライドショーにして動かし、そこから各ページにジャンプするようにしたいと思い、Webを検索しておりましたところ、こちらのサイトを知りました。
    早速、ご紹介していただいているスクリプト、CSS、タグを使わせて頂いたところ、思っていたようなトップページを作る事が出来ました。感謝申し上げます。
    そこで、教えて頂きたい事が、二点あります。
    一つ目は、ご紹介のタグを「Table」タグの中に入れているのですが、ブラウザで表示させたところ、IEだけが何故か左右に余分なスペースが出来てしまい、トップページ全体から余分なスペース分だけはみ出して表示されます。ファイアフォックスやクロム、サファリなどでは正常に表示されますが、何故IEだけがそうなるのか分りません。
    二つ目は、メインのバナー写真が横1000PXあるので、その下に付ける8枚のサムネイル写真をそれぞれ横125PXにしたいのですが、何故かサムネイル写真の左側に余分なスペースが出来るため、そのスペース分だけ、サムネイル写真が右側にはみ出してしまいます。
    見本では、メイン写真の左下にサムネイル写真がぴったりくっついていますが、私が試した限りでは、何故かサムネイル写真の上下にスペースが出来てしまい、メイン写真とぴったりくっついてくれません。つまり、上下と左側にスペースが出来るため、見本のようにはなってくれません。
    そこで、現在は仕方なくサムネイル写真を横115PXにして、何とかメイン写真の横幅と整合性がとれるようにしているのですが、どうすれば、サムネイル写真を、メイン写真の左下にぴったりくっつけるように出来るのでしょうか。
    こちらの方は、IEだけでなく、他のブラウザでも同じように表示されます。
    以上の二点を私なりに試行錯誤してみたのですが、どうしてもうまくいきません。どこかが間違っているのだろうとは思うのですが、恥ずかしながら、どこが間違っているのか、全く分らない状況です。
    素人質問で申し訳ありませんが、ご確認頂き、間違いをお教えいただければ幸いです。
    よろしくお願いいたします。

  • BlackFlag | 2012.12.14 0:53

    >kanroさん

    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    サイトデータを書き換えながら確認できる環境ではないので確証はもてないのですが
    想定できることとすれば、CSSのブラウザリセットがされていないのではないかと感じております。

    試しにサンプルファイル内にある「base.css」を
    同ページ内に読み込んでみていただけますでしょうか。

    恐らくブラウザリセットがされていない影響で
    要所要所に意図しない余白が生まれていることが
    原因なのではないかと思われるので「base.css」を参考にしていただき
    ユニバーサルセレクタを使って
    *{margin:0;padding:0;}
    としたり、
    もしくは必要な箇所に対して
    table,th,td{margin:0;padding:0;}
    としてみることで解消される可能性があるのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • kanro | 2012.12.14 17:40

    ご丁寧にお教え頂き、ありがとうございました。

    早速「bacc.css」をtopページに読み込んだ所、IEでも余分なスペースがなくなり、サムネイル写真がメイン写真にピッタリ寄り添うようになり、横125PXで表示できるようになりました。

    ところが、今度は、いままでブラウザの画面中央に表示されていたトップページが、IE以外のブラウザでは、画面の左側に寄ってしまうようになりました。

    読みこませた「bacc.css」の何を変えれば、画面中央に表示されるようになるのでしょうか。

    それともう一つは、トップページの一番下にある著作権表示とその上のメニュがTableの上部に来てしまったのですが、これをテーブルの中央に戻すには、どうすれよろしいのでしょうか。

    何度もお手数をかけ申し訳ありませんが、よろしくお願い致します。

  • kanro | 2012.12.15 11:28

    BlackFlag様

    あれこれと試行錯誤しておりましたら、トップページがIE以外のブラウザでも中央に表示できるようになりました。

    大変お世話をかけました。

    また今後とも色々参考にさせて頂きたいと思いますので、よろしくお願い致します。

    ありがとうございました。

  • BlackFlag | 2012.12.17 1:37

    >kanroさん

    ご返信ありがとうございます。

    無事に問題も解消されて
    理想の動作が実装できたようで
    安心致しました。

    また何かありましたらご連絡くださいませ。
    よろしくお願いします。

  • とも | 2012.12.18 16:51

    サンプルファイルを参考に設置を試みています。
    とても簡単に設置できて大変重宝しそうです!ありがとうございます。

    ひとつ質問があるのですが・・・

    HTMLファイルないにJSの記述を行うと長くなってしまうため、別ファイルに記述をし読み込みをしようと思っています。
    JS初心者かつ不勉強で申し訳ないのですが、いろいろ触ってみても動作してくれない状態です。
    別ファイルに記述後、読み込みする際、気をつけることなどありますでしょうか?
    function 前の$を消したりはしているんもですが、解決できない状態です。

    よろしくお願いします。

  • BlackFlag | 2012.12.19 1:22

    >ともさん

    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきましたJS部分の別ファイル化ですが
    スクリプト部分の<script> ~ </script>の間を
    まるっと別ファイルに書き出せば大丈夫です。

    参考までにサンプルファイルを用意しましたので
    必要であれば下記よりダウンロードしてみてください。
    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowSeparateJS.zip

    よろしくお願いします。

  • とも | 2012.12.19 22:12

    BlackFlag 様

    すばやいお返事ありがとうございます。
    そして、サンプルファイルまで頂き本当にありがとうございます!!

    さっそくダウンロードして設置しましたら。。。問題なく動きました。

    JSもよくわからないのに、あれこれ余計なことをしてしまっていたんですね。
    そのまままるっとファイルに移せばいいとは考えもしませんでした・・・。

    本当にありがとうございます。
    またいろいろ参考にさせていただくと思いますので、よろしくお願いいたします。

  • BlackFlag | 2012.12.20 1:15

    >ともさん

    ご返信ありがとうございます。

    無事に動作が実装できた様で
    安心致しました。

    ここで紹介しているスクリプトに関しては
    本来はそのように別JSファイルで構成するのが適切なので
    この形に慣れておくことをオススメします。

    また何かありましたらご連絡くださいませ。

    よろしくお願いします。

  • yosin1979 | 2013.01.06 16:20

    サンプルファイルを利用させて頂いております。
    とても重宝させて頂いております。ありがとうございます。

    一つ質問をさせて頂きたいのですが、
    左から右にスライドをするサンプルを利用させて頂いておりますが、
    現在スライドをする際に前の画像も左から右に移動しますが、
    前の画像の上に新しい画像がスライドしてくるようにするにはどうすれば宜しいでしょうか?

    WEBページ作成初心者であまりコードの意味を理解しておりませんが、
    ご教授宜しくお願い致します。

  • BlackFlag | 2013.01.14 0:20

    >yosin1979さん

    コメントありがとうございます。
    返答が遅くなってしまい申し訳ありません…

    ご質問いただいた件ですが
    この記事で紹介しているスクリプトをカスタマイズして
    その様な動作をいろいろ試してみたのですが
    100%正常に動作させるにはなかなかうまくいかず
    スクリプト全体を別の構成で作る必要がありそうです。。

    またその様なサンプルが出来上がりましたら
    ここで紹介させていただきます。

    よろしくお願いします。

  • y0626 | 2013.01.19 18:15

    貴重なサンプル大変ありがとうございます。
    希望していた動きに近いことと凄くシンプルなことで、
    ぜひ利用させていただきたいと思っております。

    1点だけお聞かせください。
    スライドをさせる上でメイン画像の横幅がサムネイルの最大横幅値かと思います。

    メイン横幅:400px
    サムネイル横幅:100px

    上記の場合、サムネイルの枚数は4枚(4×100px=400px)まで。
    5枚以上の場合、サムネイルが折り返してしまう。

    このスクリプトで、例えば5枚以上の場合、自動でサムネイル自体もスライドさせることは可能でしょうか。
    スライド枚数に上限を持たせず自動で追加など行えれば・・・と思っているところです。

    お時間のご都合がございましたらどうぞよろしくお願いします。

  • BlackFlag | 2013.01.19 23:10

    >y0626さん

    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    サムネイル部分を指定の幅以上になった際にスライドさせるには
    別記事で紹介している
    ——————————————
    jQueryでシンプルなカルーセルパネルスライドUIを作成する方法
    https://black-flag.net/jquery/20110614-3200.html
    ——————————————
    の動作をサムネイル部分に実装させて組み合わせることで
    可能になるかと思っております。
    (実際にこの2つを組み合わせてその様な動作をサイト内に実装させたこともありますので)

    お試しください。
    よろしくお願いします。

  • yusuke sasaki | 2013.02.02 18:43

    いつも利用させていただいています。
    以前質問させていただいた時も、丁寧にお答えいただきましてありがとうございました。

    今回もまたお聞きしたいことがありましてm(__)m
    他の方の質問(2012.05.31 17:07)の回答に「1ページに複数のスライドショーを設置する方法」のサンプルがありましたので使用させていただきたいと思うのですが、「hoverでスライド動作ストップ」が正常に動いていないようです。

    解決方法がありましたらご教授いただけないでしょうか。
    よろしくお願いいたします。

  • BlackFlag | 2013.02.02 22:35

    >yusuke sasakiさん

    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただいた件についてですが
    こちらで確認する限り正常に動作していたのですが
    ご確認いただいた環境(OS/ブラウザ)は何でしょうか?

    ご確認よろしくお願いします。

  • kenken | 2013.02.15 17:25

    Black Flagさま
    いつもとても素晴らしいスクリプトを公開してくださりありがとうございます。
    このスライドショーの動作、いま作ろうとしているHPのイメージにぴったりで、ぜひ利用させていただきたいと思って試行錯誤しております。
    現在、スライドショーを設置した当該のページ単体で動作確認した場合は全く問題なく動いています。ただトップページから別のjQueryスクリプト(pagifyを使って背景にオーバーレイして読み込んできています)で、このページを読み込んできた場合、一番最初に表示した際はスライドショーは完璧に動作していますが、別ページに移動した後このページにもどってくると、スライドショーの動作が速くなり、スライド切り替え時間もバラバラになってしまいます。(たとえば1枚目から2枚目は長く、2枚目から3枚目はパパっと切り替わってしまい、以降も同じようにバラバラになっています。)
    プログラミング初心者で何が起こっているのかよくわからないのですが、一番最初に表示した際の動作に問題がないため、スライドショー設置したページに戻ってくる際に、いつもプログラム(スライドショーのタイマー?)を初期化することができればいいのではないか?と勝手に想像しております。お忙しいところ大変恐縮なのですが、そのようなことが可能かどうか、あるいは別の解決法がありそうか、ご教授いただけないでしょうか。

  • BlackFlag | 2013.02.17 0:43

    >kenkenさん

    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    実際の事象を再現できる構成を確認できていないので何とも言えませんが
    このスライドショースクリプト全体を
    ——————————————-
    $(window).load(function(){
      ~ここにスクリプトを記述~
    });
    ——————————————-
    この様な形にしてロードごとに実行させてみてはいかがでしょうか。。

    憶測での返答になり申し訳ありませんが
    よろしくお願いします。

  • kenken | 2013.02.21 19:05

    Black Flag さま

    お忙しいところアイデアいただきありがとうございます。
    ドタバタしていてまだ試せていないのですが、時間が取れしだいトライしてみます!

  • jQueryでサムネイル付きスライドショーをシンプルに作成する方法 | webサイト作成に関する自分メモ | 2013.02.22 22:58

    […] jQueryでサムネイル付きスライドショーをシンプルに作成する方法 https://black-flag.net/jquery/20111122-3597.html […]

  • konan | 2013.03.01 22:58

    こんばんわ。
    サンプルファイルを使用させて頂いています。
    質問なんですが、【SAMPLE3】でスライドショーは自動で切り替わるのではなく、小窓の写真を触ったときのみに、クリックした写真に切り替わるようなこともできるんでしょうか?

    初心者なので解決方法がわからなくご教授いただけないでしょうか。
    よろしくお願いいたします。

  • BlackFlag | 2013.03.03 13:34

    >konanさん

    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で嬉しく思っております。

    ご質問いただいた件についてですが
    おそらく、当ブログ別記事の
    ——————————————–
    ・jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法
    https://black-flag.net/jquery/20110512-3039.html
    ——————————————–
    こちらを使用していただければ
    実装できるのではないかと思っております。

    スクリプト内の「.click」の部分を「.hover」に変えることで
    マウスオーバーで切り替え動作に変更できると思います。

    お試しください。
    よろしくお願いします。

  • konan | 2013.03.06 0:06

    Black Flag さま

    お返事ありがとうございます。
    細かく丁寧に解説して頂き感謝です。これから検証したいと思います。
    またいろいろ参考にさせていただくと思いますので、よろしくお願いいたします。

  • Mii | 2013.03.06 2:16

    こんばんわ。いつも大変参考にさせていただいております。
    1点質問させていただきたいのですが、
    activeの時にサムネイルの画像を差し替えることは可能でしょうか?

    よろしくおねがいいたします。

  • BlackFlag | 2013.03.07 0:46

    >Miiさん

    コメントありがとうございます。

    ご質問いただいた件についてですが
    スクリプト制御しなくてもやり方は様々あると思います。

    例えば簡単な方法でやるとなると
    サムネイル用の<li>に個別のクラスもしくはIDをつけて
    それらにアクティブ時に変更する画像を背景画像として敷き、
    アクティブ時はimgタグを非表示「visibility:hidden;」にすれば
    実現することができるのではないかと思います。

    ——————————-
    #slideshow .active img {
    visibility:hidden;
    }
    ——————————-

    お試しください。
    よろしくお願いします。

  • Mii | 2013.03.11 16:39

    BlackFlag 様

    お返事遅くなりまして大変申し訳ございません。

    教えていただいた方法で試してみたいと思います!

    お忙しいところ本当にありがとうございました。

  • jQuery サムネイル付きスライドショー紹介【シンプル・サンプルあり・商用可・作成者が超いい人】 | つばめのおつかい | 2013.03.12 14:37

    […] jQueryでサムネイル付きスライドショーをシンプルに作成する方法 […]

  • ukyou | 2013.04.08 11:25

    探していた物にぴったりで、活用させていただいてます。
    ありがとうございます。

    1点ご質問なのですが、「マウスオーバーで自動切替停止」の
    スクリプトを実装してみたところ、下記の現象が出てしまいました。

    ■何度かサムネイルをクリックして遷移させると、自動遷移の順番がおかしくなってしまう。
      ※飛び飛びで表示されてしまいます。
     
    上記現象の良い対処法はございますでしょうか。
    お忙しいところ申し訳ありませんが、ご回答よろしくお願い致します。

  • kaly | 2013.04.09 1:05

    はじめまして。とても優しいサイトですね☆
    さっそく使わせていただくことにします。あまり詳しくはないのですが。。
    スクリプトとかでどこかのサイトで使用してるとか
    わかるのでしょうか。
    URLをお知らせしたほうがよいのでしょうか?

  • BlackFlag | 2013.04.09 23:32

    >ukyouさん
    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件ですが
    こちらで確認する限り、その様な現象が再現できないのですが
    ご確認いただいているOSとブラウザ環境(バージョンも)を
    教えていただいてもよろしいでしょうか。

    お手数お掛けしますが
    よろしくお願いします。

  • BlackFlag | 2013.04.09 23:45

    >kalyさん
    コメントありがとうございます。
    その様なお言葉をいただけると
    とても嬉しく励みになります。

    当ブログで紹介しているスクリプトは
    ご自由にサイト制作に使用していただいて構いません。

    どこかのサイトで使用されているかどうかは
    こちらでは把握することはできないですが
    ご使用いただく際にも、特にURLもお知らせしていただかなくて大丈夫です。
    (ご一報いただけると嬉しく思いますが全然強制ではありません)

    よろしくお願いします。

  • J.T | 2013.04.11 2:02

    Black Flag さま

    はじめまして。
    今回自分のサイトを作るにあたってスライドショーを組み込みたいと思い
    いろいろ検索した結果こちらに辿り着きました。

    作りたいもののイメージにぴったりだったのでさっそく利用させていただき
    おかげさまで満足のいくものが出来上がりました。
    本当にありがとうございます。

    サイト制作は全然初心者で、JSもほとんど理解できていないのですが
    今後もっと勉強して自分なりにアレンジを加えたりして活用させていただきたいと思っております。

    どのサンプルもとても素敵なのでこれからも参考にさせていただきます。
    どうぞよろしくお願いします。

  • BlackFlag | 2013.04.11 3:18

    >J.Tさん
    コメントありがとうございます。

    その様なお言葉を戴けるととても嬉しく思います。
    このスライドショースクリプトがサイト制作のお役にたった様でよかったです。

    当記事以外のスクリプトも
    できる限りシンプルな構成で、
    アレンジもしやすいように作っているので
    あれこれ試しながらご活用いただければ幸いです。

    また何かありましたら、よろしくお願いします。

  • ukyou | 2013.04.11 14:43

    BlackFlag 様

    ご返信ありがとうございます。
    OSとブラウザは下記の通りです。

    OS:Windows XP SP2
    ブラウザ: IE8

    すみませんが、ご確認お願い致します。

  • BlackFlag | 2013.04.12 1:40

    >ukyouさん
    ご連絡ありがとうございました。

    こちらで同環境で確認したところ
    同じ様な現象を再現することができませんでした。。。

    当記事で紹介しているサンプル動作で
    その様なことが起きるということでしょうか?
    もしくはご自身のサイトに実装後に起こったということでしょうか?

    ご確認の程よろしくお願いします。

  • ゆき | 2013.04.14 22:00

    スライダーのプログラムを探していてたどり着きました。

    スライダーのサムネイルがプログラムに埋め込まれてしまっているものが多く、なかなか思うような表示ができませんでしたが、こちらのプログラムはとても使い勝手がいいです!

    自分でプログラムを組み込めればベストなのですが、ソースをいじっていてもなかなかうまく動かないものですね・・・また勉強したいと思います。

    とてもいいスライダーをありがとうございます!
    またお世話になるかもしれません。

  • BlackFlag | 2013.04.14 23:10

    >ゆきさん
    コメントありがとうございます!

    このスライダースクリプトがお役に立ったようで
    その様なお言葉をいただけると励みになり嬉しく思います。

    出来る限りシンプルで使い勝手のよいスクリプト構成を心掛けて
    他にも色々とサンプルを紹介させていただいておりますので
    あれこれ試していただけると幸いです。

    また何かありましたら
    よろしくお願いします。

  • ttk | 2013.04.17 15:37

    初めまして。
    独学でHTMLを勉強しています。
    スライドショーの組み込みをしたいと思い、こちらにお邪魔しました。

    1ページ内に2つのスライドの設定を行おうと思い、KFさんに返信されていたソースを活用してみたのですが、片一方のスライドが最後まで動き、1枚目に切り替わる際に、もう一方のスライドが1枚飛ばして表示されてしまいます。
    修正の方法をご教示くださいませ。

  • BlackFlag | 2013.04.20 0:32

    >ttkさん
    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご指摘いただきました件についてですが
    「.active」の判別部分でおかしい部分がありましたので
    同ファイルを再調整してみました。

    再度ダウンロードしていただき
    動作の方、確認してみてください。
    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShow3DUAL.zip

    よろしくお願いします。

  • ピッピ | 2013.05.20 15:08

    左から右へのスライド動作を調べてこちらのサイトに来ました。
    とても丁寧な対応に驚いています。

    「右から左へスライド動作について」の解説を読んで「これだ!」と思ったのですが、どこを変えたら「左から右へスライド」になるのかが分かりませんでした。
    leftをrightに…なんて簡単な事ではないんですね。

    修正の方法をご教示いただけると助かります。

  • ころ | 2013.05.20 18:45

    こんにちは。ネットショップのサイトでこちらを利用させて頂こうと思い使ってみました。
    もともとテンプレートにjquery/1.7.2が組み込まれており、head内は触れない仕組みになってます。
    (追加できるスペースはありますが、元々あるものを変更・削除できない)

    スライドショーは上手く行ったのですが、在庫が足りないものを買おうとした人に「購入数2に対して在庫1です」というエラー表示が出なくなりました。
    で、<script type=省略/jquery/1.5.0/jquery.min.js”></script>の一文を削除するとちゃんと表示されたのでホッとしていたら
    IE7、8、IE10の互換モード(IEのそれ以下、IE以外は未検証)で、サムネイルをクリックしてもメイン画像が切り替わらなくなってしまいます・・・
    (IE9、10は上記の文を削除しても、スライドショー効果は維持されてます。)

    IE6、7、8でこの効果を使いたい時は、1.5.0もしくはそれ以下のバージョンではないとダメなんでしょうか。

    せっかく画像表示がおしゃれになったのにスライドショーを諦めるのも
    「在庫1です(2つは買えません)」の表示も諦めきれません(ショップとしては致命的だと思うので)・・・
    何か良いアドバイスを頂けないでしょうか。
    サイトの掲示板ではなかなか回答ももらえず、こちらに書き込みしましたが
    場違いな質問で申し訳ないです。

    ※表示されなきゃいけない文はhtmlで以下のようになってます。
    <p class=”stock_error” style=”font-weight:bold;color:red;padding:10px 0;display:none;”></p>
    このsotock_errorが読み込まれる仕組みは、カスタマイズ不可の領域のようでわかりません。
    最初に書いた通り、head内の触れない部分に「product_stock.js」というものがあるのでこれかな??

    もしサイトを見て頂けるようでしたら、「ワイヤーバスケット」の「ブラウン」を「2個」カートに入れてみてください。
    (まだレイアウト確認段階なので、商品も金額もめちゃくちゃですが・・・)
    エラー表示が出ずに、そのまま会計画面に進んでしまいます。(会計画面上部にはエラー表示がありますが)
    本来なら、会計画面に進まずに、カートに入れようとした時点でエラー表示がでます。

  • BlackFlag | 2013.05.23 1:47

    >ピッピさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました「左から右へスライド」についてですが
    サンプルファイルの該当箇所を
    ————————————————————-
    var moveLengh = parseInt($(setId + ‘ div div’).css(‘width’));
    $(setId + ‘ div div#view’ + (showCont)).css({opacity:’1′}).siblings().stop().animate({left:(moveLengh)},fadeTime,function(){$(this).css({zIndex:’98’})});
    $(setId + ‘ div div#view’ + (showCont)).css({left:’-‘+(moveLengh)+’px’,opacity:’1′}).stop().animate({left:’0′},fadeTime,function(){$(this).css({zIndex:’99’})});
    ————————————————————-
    といった感じに直すことで動作するかと思っています。

    サンプルファイルも用意したので
    動作をご確認いただく場合は
    下記のURLからダウンロードしてみてください。
    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowSideMove2.zip

    よろしくお願いします。

  • BlackFlag | 2013.05.23 2:05

    >ころさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    基本的には当記事で紹介しているスクリプトは
    jQueryのバージョンは1.5系でなくても1.7系でも動作すると思います。

    実装することで他のスクリプトにも影響を及ぼすことはない想定で構成しておりますが
    動作に問題が発生しているようでしたら
    スクリプトを記述する箇所を<head>タグ内に移動したり</body>の手前にしたり
    記述位置を変えてみてください。

    ソースを確認すると
    —————————————
    <script src=”js/jquery-1.X.X.min.js”></script>
    —————————————
    この様な実在しないファイルにリンクが張られていたり
    エラーを発生させてしまう可能性がある記述がありますので
    ページ全体のスクリプト実行途中でエラーが起き
    その後の動作に影響を及ぼしている可能性も考えられます。

    ページ全体で使用しているスクリプトの
    実行順序など調整してみてください。

    よろしくお願いします。

  • カズヒロ | 2013.06.06 13:19

    初めまして、カズヒロと申します。
    今更ながらこのスライドショーに助けられてます^^;

    一つお伺いしたいのですが、
    デフォルトでサムネイルが半透明になっておりますが
    その透明度の値はどの部分でカスタマイズ可能でしょうか?

    何卒よろしくお願い致します。

  • BlackFlag | 2013.06.07 1:10

    >カズヒロさん
    コメントありがとうございます。
    このスライドショーがお役に立ったようで
    嬉しく思っております。

    ご質問いただきました件についてですが
    透明度についてはスクリプト内の
    「opacity」の値で設定しているところになりますので
    34、37行目の「0.5」と設定している数値を
    変えることでカスタマイズすることができます。

    お試しください。
    よろしくお願いします。

  • かずこ | 2013.06.10 20:04

    はじめまして、こんばんわ。
    こちらのサイトでご紹介されてる技術はとても素晴らしいと思います!
    素人でまだ勉強中ですが私的なHPを作って見ようと思い質問させて頂きます。

    CSSソース欄の
    —————————————
    filter:alpha(opacity=100)!important;
    -moz-opacity: 1!important;
    opacity: 1!important;
    —————————————
    この3行がCSSエディターの文法チェックでエラーになってしまいます。
        エラー・プロパティ名が正しくありません
           ・プロパティ名が有効な値ではありません
    という内容です。

    修正するところがあれば教えていただけないでしょうか。
    どうかよろしくお願いいたします。

     

  • BlackFlag | 2013.06.13 0:17

    >かずこさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    CSSで透過度を指定するにopacityについては
    当ブログ別記事の
    ————————————————-
    ・CSSで透明度/透過度(opacity)の指定をする方法
    https://black-flag.net/css/20110513-3045.html
    ————————————————-
    にて詳細をご説明させていただいておりますが
    IE独自のプロパティ等を使用することから
    文法チェックではエラーとなってしまいますが
    古いブラウザ(IE旧バージョンなど)でも
    効果を利かすためには必要な記述になっています。

    古いブラウザを対象外をする場合は
    必要ない記述は削除してしまっても大丈夫かと思います。

    ご確認ください。
    よろしくお願いします。

  • かずこ | 2013.06.13 15:50

    言われた通りに削除するとエラーが消えました。
    ありがとうございました!

    リンクして頂いた
    ・CSSで透明度/透過度(opacity)の指定をする方法
    参考にしたいと思います!

  • EY | 2013.06.13 16:19

    はじめまして、EYと申します。
    webデザイン会社で営業をしている者です。

    私自身は全く無知で編集はできないので、
    トンチンカンな問合せかもしれないのですが…

    こちらのページのSAMPLE1 or SAMPLE2の動きで、
    サムネイル画像をメインビジュアルの下ではなく、
    右横に配置することはできるのでしょうか?

  • RYO | 2013.06.16 23:57

    はじめまして。RYOと申します。私もこちらのスライドショーに大変助けられています。
    わかりやすく丁寧に解説していただき、本当にありがとうございます。
    もし可能であれば、サムネイルを半透明で切り替えるのではなくて、画像自体を変える方法を教えていただけないでしょうか?
    大変不躾で申し訳ありませんが、なにとぞよろしくお願いいたします。

  • BlackFlag | 2013.06.17 1:30

    >EYさん
    コメントありがとうございます。

    このスライドショースクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただきましたサムネイルを右側に配置する件ですが
    レイアウトの変更に関しては
    HTMLとスクリプトはそのままで
    CSSのみの変更で実現可能になっております。

    当記事のコメント内で
    「2012.10.15」にmocakoさん宛てに返答させていただいた内容で
    サムネイルを左側に配置した形でのデータを用意させていただいておりますので
    そちらを参考にしていただきレイアウトの調整を行ってみてください。

    サンプルファイルについては下記よりダウンロードすることが出来ます。
    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowThumbLeft.zip

    HTMLとスクリプトはまったく変更せずに
    CSSのみレイアウト変更として
    各箇所、変更してあります。

    お試しください。
    よろしくお願いします。

  • EY | 2013.06.18 13:08

    BlackFlag様

    ご回答ありがとうございます!!

    過去に同じ質問があがっていたにも関らず、
    ご丁寧にご回答いただき、大変助かりました。

    無事、右サムネイルに変更する事が出来ました。
    これからも色々と参考にさせていただきます。

    本当にありがとうございました!!

    EY

  • ころ | 2013.06.19 15:10

    BlackFlagさま
    5月20日に厚かましい質問をさせていただいた、ころと申します。
    お返事いただいていたことに気付かず長い間放置してしまい申し訳ありません。
    やっと落ち着いてアクセス解析で、見て頂いた事に気付きました。

    実は、厚かましすぎたかも?と思って、自力で悪戦苦闘しておりました。
    その結果、意外なところを削除したら上手く行った記憶が残ってますが
    それが何だったのか記憶喪失です。いろいろやりすぎて・・・
    もしかしたらBlackFlagさまにも有益な情報になったかもしれないのに、すみません。

    回答頂いた「jquery-1.X.X.min.js」の件、あるページからそのままコピペしたのですが
    Xは恐らく、自分に合わせた数字に入れ変えて下さいね、という意味だったんですよね・・・
    お恥ずかしい。

    お世話かけました。ありがとうございました!

  • BlackFlag | 2013.06.23 12:03

    >RYOさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    サムネイル画像を切り替えるのも可能だと思いますが
    スクリプトとCSSをだいぶ改修する必要があるので
    「smartRollover.js」の様な動作と組み合わせて
    実装するのが理想的なのではないかと思っております。

    その際は当スクリプトで組み込んでいる
    透過ロールオーバー動作(31行目~37行目)
    ———————————————
    $(setId + ‘ ul li:not(.active)’).hover(function(){
    $(this).stop().animate({opacity:’1′},200);
    },function(){
    $(this).stop().animate({opacity:’0.5′},200);
    });

    $(setId + ‘ ul li’).css({opacity:’0.5′});
    ———————————————
    を削除する必要もあるかと考えております。

    お試しください。
    よろしくお願いします。

  • 373 | 2013.07.03 15:54

    「次へ」「前へ」の矢印ボタンを設置しようと思い、
    https://black-flag.net/jquery/20120215-3671.html
    の記事とコメントを参考にさせていただき、挑戦してみました。

    設置出来たのですが、矢印ボタンを連打するとスライドショーが止まらなくなってしまいます。

    何か原因があるのでしょうか?
    お願い致します。

  • BlackFlag | 2013.07.04 0:40

    >373さん
    コメントありがとうございます。
    このスライドショースクリプトをお試しいただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    当記事のスクリプトで同じようにする場合は
    「moveprev」「movenext」の各ボタンクリック時には
    「timer();」を実行させないようにすれば大丈夫だと思います。

    参考までにサンプルファイルも用意しましたので
    必要であれば下記URLよりダウンロードしてみてください。

    https://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShowNextBack.zip

    ご確認ください。
    よろしくお願いします。

  • とっき | 2013.07.04 16:44

    いつも拝見させて頂いております。
    設置の際に使わせて頂いたりと大変お世話になっております。
    高い技術に感服し、とても感謝しております。
    ここでご質問なのですが、
    左側の画像に若干のbottomに開きができてしまいます。
    画像サイズを80*80の5枚でメインを400*400に指定しているのですが、
    それでも反応しないです。
    ご教授頂けないでしょうか、何卒宜しくお願い致します。

  • BlackFlag | 2013.07.04 23:48

    >とっきさん
    コメントありがとうございます。
    このスライドショースクリプトもろもろ
    ご活用いただいている様で嬉しく思っております。

    ご質問いただいた件についてですが
    実装されているページを確認させていただいたところ
    スクリプト自体は関係なく、
    インライン要素となっている<li>要素部分が
    HTML上で改行しているところで半角スペースとみなされて
    余白があいてしまう現象が起こっているものと思われます。

    ですので、CSS側で<li>に対して以下の様に指定すれば
    大丈夫なのではないかと思います。

    ———————————-
    #slideshow ul li {
    width: 80px;
    height: 80px;
    display: block;
    overflow: hidden;
    }
    ———————————-

    もしくはHTML上で<li>の改行を
    コメントアウトで無効化するやり方でもよいのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • とっき | 2013.07.05 10:07

    早速のご解答有難う御座います。
    確認させて頂きました所、改修が出来ました、本当に有難う御座います。
    これからもこちらのサイトを利用させて頂きますので、何卒宜しくお願い致します。

  • 373 | 2013.07.05 12:30

    BlackFlag様

    ご対応ありがとうございました。
    無事設置出来ました。

    とても迅速なご対応で驚いております。
    ありがとうございました。

  • hayative | 2013.07.17 15:29

    BlackFlag様

    はじめまして、hayativeと申します。
    シンプルで使いやすいこちらのスライドショーのスクリプトを
    利用させていただこうと考えております。

    組み込むことはできたのですが、サムネイルの切り替わりも
    フェード処理にすることはできるのでしょうか?

    現状のままでも問題はないのですが、
    メイン画像がクロスフェードなので、サムネイルも
    フェードになれば、より良いと思ったのですが…。

    恐れ入りますが、ご教授いただければ幸いです。
    よろしくお願いいたします。

  • BlackFlag | 2013.07.19 0:17

    >hayativeさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    現状の構成ですと少々厳しいかと思っております。

    その様な動作でのスライドショーを作成できたら
    またここで紹介させていただきたいと思います。

    よろしくお願いします。

  • hayative | 2013.07.22 13:29

    BlackFlag様

    ご返信ありがとうございました。
    了解いたしました。
    取り急ぎ、現状のスクリプトで利用させていただきます。

    今後も折を見て拝見・利用させていただきますので、
    よろしくお願いいたします。

  • funahashi | 2013.08.07 14:16

    初めまして、funahashiと申します。
    初心者ではありますが、今回こちらの素敵なスライドショーを利用させて頂こうと
    DLさせて頂いた次第です。

    頂いたDLデータをクロスブラウザ対応のHPで使用したいと思い動作確認をしたのですが、
    firefox・Chomeでは問題なく稼働したのですが、
    IE9とIE10ではcssが効いていないような現象が起きてしまいます。
    ※IEの開発者ツールにてIE10互換表示・IE8若しくはIE7に強制的に設定にするとcssが復帰します。

    当方側のパソコン(IE10を使用しています)の設定の問題でしたら大変申し訳ないのですが、
    もし原因がお分かりになりましたら御回答頂けましたら幸いでございます。

  • BlackFlag | 2013.08.10 23:12

    >funahashiさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    当方のIE10ではその様な現象は確認できず
    今までもその様な事象のご連絡をいただいたことも無いので
    原因等は何とも言えないのですが
    CSSがきちんと読み込まれていない現象でしたら
    importでの読み込みを止めて、各CSSファイルを個別に読み込むなど
    変更してみてはいかがでしょうか。

    お試しください。
    よろしくお願いします。

  • yuro | 2013.09.26 15:01

    いつもありがとうございます。
    今回もスライダーscriptを活用させてもらいました。
    私がやりたいことが満載でいつも大変感謝しております。

    質問なのですが、サンプルをdlし、index03.htmlを参考に当方のhpを
    変更しました。
    最初はうまく稼動しますが、スライダーを選択すると、スライドの早さが早くなり
    ホバーも効かない状態となります。
    なにか、PGの記述に間違いがあるのでしょうか?
    基本はサンプルindex03.htmlを参考にさせてもらっています。
    忙しい中申し訳ありませんが、よろしくお願いします。

  • yuro | 2013.09.26 15:48

    すいません、追記です。
    原因がわかってきました。
    HTMLで<a href=”#1″ rel=”nofollow”>この部分を<a href=”#top-content” rel=”nofollow”>にしていました。
    これは画像を押したときに、アンカー処理をさす為ですが、ここが悪さをしているようです。
    <a href=”#1″ rel=”nofollow”>この部分で 画像を押したとき、top-content へ飛ぶように
    するにはどうしたらいいでしょうか?

    よろしくご指導いただけると幸いです。
    私の環境は IE8で実施しています。IE6でも検証済です。

  • BlackFlag | 2013.09.29 1:28

    >yuroさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    仰られている現象をこちらでは確認できずにいるのですが
    サンプルでもリンク先はアンカーリンクと同様の
    「#」を使った記述になっておりますが
    その様な現象が起こるということでしょうか。

    何か他に併用しているスクリプトがある場合は
    それらとの動作の兼ね合いもある可能性もありますので
    一度見直してみてください。

    よろしくお願いします。

  • mama | 2013.10.01 15:53

    スクリプトを構築できない私にとっては、とてもありがたいサイトで大変お世話になっております。

    上に書かれておりますyuroさんの現象についてですが、サムネイルのliタグに個々にIDを振り、activeを
    ——————————-
    #slideshow .active img {
    visibility:hidden;
    }
    ——————————-
    による背景画像切り替えにすると発生するようです。

    私もサムネイルのactive画像を個々に用意する必要がありまして
    (透過ではなく、ナビゲーションのロールオーバー画像のようなものです)
    設定したところ、上記の現象が発生します。

    スクリプトをいじれば何とかなるのでしょうが、試行錯誤中です。

  • yuro | 2013.10.03 8:38

    ご丁寧にありがとうございます。
    私もよくわからないのですが
    <a href=”#top-content” rel=”nofollow”> この記述で今は安定しています。
    なんども、CSSを変更してためしたり、しているのでどこで
    安定したか、自分でも把握できてません。
    iphoneで確認すると画像を2個飛ばししたりしてますが、iphoneなので
    いいかと 自分で納得させています。
    本当は解決したいところではありますが。。。

    アンカーをsetする場合は上記記述が通常ですか?よくわかっていないもので。

    今後とも参考にさせてもらいます。
    どうぞ、よろしくお願いします。

  • Ree | 2013.10.03 12:22

    black flagさん、始めまして。
    いつも参考にさせていただいております。
    非常にわかりやすい解説とシンプルなコードで、初心者の私にはとてもためになるサイトで、素敵なスライドショーでサイト作成時に使用させていただいております。

    今回、このスライドショーを各タブの中に1つづ設置したいと思い教えていただけたらと思いコメントをさせていただきました。

    (困っている内容)
    タブはこれから増やしていく仕様になっており、現在タブは3つ設置

    1つ目のタブはメインビュー、サムネイルどちらも表示されるのですが、ループが最後になると停止してしまう。

    2.3番目のタブは、メインビューが表示されず、ループも最後で停止。
    (サムネイルは表示されています。サムネイルをクリックするとメインビューは表示されます。)

    まったくの初心者でどこのコードを書き換えたらいいかわかりません。
    申し訳ありませんがご教示頂ければ幸いです!
    宜しくお願いします!

  • BlackFlag | 2013.10.05 1:11

    >mamaさん
    >yuroさん
    コメントありがとうございます。

    改めて「index03.html」を確認させていただきましたが
    マウスオーバーでのアニメーションストップ動作の制御部分において、
    構成上おかしなところがありました。
    失礼しました。

    「index03.html」ではリストをクリックした際には
    アニメーション動作制御を入れる必要はないので
    「$(setId + ‘ ul li’).click()」に入っている
    「clearInterval(setTimer)」と「timer()」は
    削除しておく必要がありました。

    この部分を削除することで
    ご指摘いただいている現象は解消されると思います。

    当記事最後にダウンロードできるサンプルファイルを修正して
    更新しておきましたので必要であればダウンロードしてみてください。

    よろしくお願いします。

  • BlackFlag | 2013.10.06 14:03

    >Reeさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    当記事で紹介しているスクリプトは基本的に複数設置には
    対応していないスクリプトになっております。
    (複数設置するパターンはコメント内で紹介させていただいております)

    タブ切り替えで複数実装する場合は
    スクリプトの構成にもよりますが
    HTMLにスライドショー用のタグを記述すのではなく
    タブ切り替えでタグをそれぞれ書き換える構成のスクリプトを使用することで
    実装可能になるのではないかと思っております。

    少々あいまいな返答になってしまい申し訳ありませんが
    よろしくお願いします。

  • jirou | 2013.11.14 13:31

    black flagさん
    はじめまして、jirouと申します。

    まったくの初心者ですが、スライドショウを作成したいと考えている時にこちらのサイトに出会いました。
    大変シンプルで解り易く、さっそくスクリプト、CSS等を使わせていただきました。ありがとうございます。
    ですが、サンプル1を作ってみたのですが下部のサムネイルが右にズレてしまいサムネイル4枚目が半分しか
    表示されません。
    また、SIMPLE CAROUSEL with PAGINATIONも同様に5枚目の画像の半分と矢印が表示されませんでした。
    改善方法がわからず、ご教授お願い出来ませんでしょうか。

    よろしく、お願いいたします。

  • BlackFlag | 2013.11.17 11:54

    >jirouさん

    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    おそらくCSSのブラウザリセットがされていないのではないかと感じております。

    試しにサンプルファイル内にある「base.css」を
    同ページ内に読み込んでみていただけますでしょうか。

    恐らくブラウザリセットがされていない影響で
    要所要所に意図しない余白が生まれていることが
    原因なのではないかと思われるので「base.css」を参考にしていただき
    ユニバーサルセレクタを使って
    *{margin:0;padding:0;}
    としたり、
    もしくは必要な箇所に対して
    #slideshow,#slideshow *{margin:0;padding:0;}
    としてみることで解消される可能性があるのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • jirou | 2013.11.20 10:03

    お忙しい中、ご返事を頂きありがとうございました。

    ユニバーサルセレクターで*{margin:0;padding:0;}を書き込んだところ、余白がなくなり
    スッキリとしたスライドショウが出来ました。
    2週間悩んでいたことがblack flagさんのご返答で一瞬のうちに解消され、感謝しております。

    black flagさんのサイトは解り易く、非常に参考になります。
    初心者ですが、これからもこのサイトを拝見させて頂き、自分なりに勉強していきたいと思っております。

    これからも、よろしくお願いいたします。

  • えびす | 2013.11.22 17:01

    Black Flag様
    こんにちわ。いつも拝見して勉強させて頂いております。
    ありがとうございます。

    初コメントで恐縮なのですが、
    一点質問させて頂きたいことがありコメントさせて頂きます。

    このサムネイル付きスライダーは
    サムネイル部分とイメージ画像部分の画像を同じデータをお使いですが、
    2つの画像を違うデータで作成することは可能なのでしょうか?

    jQuery を勉強中の初心者なので、初歩的な質問で申し訳ないのですが
    ご容赦くだされば幸いです。

    お忙しいと思いますが宜しくお願い致します。

  • BlackFlag | 2013.11.22 20:35

    >えびすさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    イメージ画像部分とサムネイル部分の画像を
    違うものにすることは可能です。

    各画像の設置はスクリプトには関連しない部分になりますので
    HTML側にて、イメージ画像に関しては
    記事内のHTMLソースで言うと5~8行目にあたる
    <div>内の画像ファイルにて指定し
    サムネイル部分で使用する画像は
    12行目~15行目の<ul><li>の中での
    画像ファイルを指定することで
    別々の画像を指定することが可能となっております。

    お試しください。

    よろしくお願いします。

  • えびす | 2013.11.25 14:49

    Black Flag様

    早速ご回答を頂き、ありがとうございました。
    試してみたところ、実装が出来ました!

    私の様な初心者でも分かりやすくご説明頂いて
    とても有り難く思っております。

    本当にありがとうございました!

  • yuro | 2013.12.03 15:25

    いつも、ご丁寧に解答していただき、ありがとうございます。

    ご指摘の下記のとおり、
    >「$(setId + ‘ ul li’).click()」に入っている
    >「clearInterval(setTimer)」と「timer()」は
    >削除しておく。

    削除しますとバッチリ、スライド処理が安定しました。(test稼動)
    本当に助かりました、ありがとうございます。
    12/5に当方のサイトも変更する予定です。

    今後ともよろしく、お願いします。

  • ひなの | 2013.12.08 21:53

    はじめまして。いつもこちらのサイトで勉強させていただいています。
    他のスクリプトでも質問させていただいていて恐縮なのですが、こちらのスクリプトの表示をクロスフェードではなく普通の切り替えにするにはどうしたらよいのでしょうか?

    サムネイルとの連動はそのままでメインの画像はGIF画像のような切り替えイメージにしたいのですが。

    お忙しい所申し訳ありませんがよろしくお願いいたします。

  • BlackFlag | 2013.12.14 10:48

    >ひなのさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた切り替え動作についてですが
    スクリプト開始にある「var fadeTime = 1000;」の値が
    フェードアニメーション時間になるので
    ここの値を「var fadeTime = 0;」とすることで
    実現できるのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • Sagat | 2013.12.19 15:46

    はじめまして。
    ともて使いやすいスライドショーを作って頂きありがとうございます。
    説明も非常にわかりやすく、今後も重宝しそうです。

    現在あるサイトに使用しようとしており、
    ぜひカスタマイズしたい部分があるのですが、
    このスクリプトに画像のalt属性を取得して
    画像上にテキストで表示させることは可能でしょうか?
    (例えば、画像の下部15pxくらいを半透明な黒にし、白のテキストとして表示させるなど)

    お時間のあるときにでもご教授頂けるとありがたいです。
    宜しくお願いします。

  • BlackFlag | 2013.12.21 13:20

    >Sagatさん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    色々とやり方はあるかとは思いますが
    想定できる簡単なやり方としては
    「.attr()」を使ってimgのaltを取得して、
    取得した値をspanなどで囲った状態で
    親要素のaタグに対して「.append()」などを使って追記して
    CSS側でそのspanに対して装飾すればいけるのではないかと思っています。

    憶測での方法になりますが
    お試しください。

    よろしくお願いします。

  • 天城スタジオ | 2014.01.24 18:42

    とてもシンプルで使い勝手の良いスライドショーで多様性に優れていると思います。
    とても良いのコメント残させていただきました。
    これからもがんばってください!!

  • BlackFlag | 2014.01.26 11:22

    >天城スタジオさん
    コメントありがとうございます。
    このスライドショースクリプトがお役に立った様でよかったです。
    いろいろとお試しいただけると幸いです。

  • ループスラダーギャラリーの導入 | 天城スタジオ | 2014.01.31 5:34

    […] jQueryでサムネイル付きスライドショーをシンプルに作成する方法 […]

  • 夢夢 | 2014.07.08 15:18

    BlackFlag様

    HTMLもjQueryも初心者で、知識のある方からすると恥ずかしい質問かもしれませんが、
    BlackFlag様のサンプルスライドショーをダウンロードして、そのままFFFTPにアップして
    確認した所、画像が重ならず、縦に並んでしまいます。
    動きはあるのですが、そのまま画像を入れ替えるだけでは使用できないのでしょうか?
    初歩的な質問で申し訳ありません。
    仕事で使用させて頂きたいのですが、パソコンに知識のある者がおらず、困っております。
    お忙しい事とは思いますが、お返事頂ければ幸いです。

  • BlackFlag | 2014.07.10 0:17

    >夢夢さん
    コメントありがとうございます。
    このスライドショースクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問いただいた件についてですが
    サンプルデータをそのままFTPにアップすれば
    正常に動作するはずなのですが。。

    実際のその画面を確認できれば原因も探れるかもしれませんが
    画像が縦に並ぶという部分については
    CSSがうまく効いていない原因なのではないかと想定されます。

    ご確認ください。
    よろしくお願いします。

  • 夢夢 | 2014.07.30 10:50

    BlackFlag様

    色々とご指導下さり、ありがとうございました!
    初めて聞く言葉も多く、今回の事は、とても勉強になりました。
    無事にスライドショーを作ることが出来て、本当に感謝の気持ちでいっぱいです。
    これからも、応援しております!

  • @ya | 2014.10.04 5:51

    こんにちは。とあるスライドショーのスクリプトを探していたらこちらに辿りつきました。
    勝手の良いシンプルなものが見当たらず困っていたところだったのですが、おかげさまで助かりました。
    どうもありがとうございました!!

  • BlackFlag | 2014.10.05 0:34

    >@yaさん
    コメントありがとうございます。

    当記事のサムネイル付きスライドショーがお役に立ったようで
    その様なお言葉をいただけると励みになり嬉しく思います。

    出来る限りシンプルで使い勝手のよいスクリプト構成を心掛けて
    他にも色々とサンプルを紹介させていただいておりますので
    あれこれ試していただけると幸いです。

    よろしくお願いします。

  • roastbeeco | 2016.02.16 18:39

    はじめまして。
    こちらのサムネイル付きスライドショーを使わせていただいております。
    公開してくださっているBlackFlag様には心から感謝しております。
    本当にありがとうございます。

    現在、5枚の画像をスライドショーを掲載していますが、
    もう少し画像を増やしたいと考えています。
    その歳、サムネイルも横にスライドするようにしたいのですが
    現状、画像を増やすと2段になって表示され、大きい画像も動かなくなってしまいました。

    こちらのコメント内にも過去に同じような質問があり、BlackFlag様より
    「jQueryでシンプルなカルーセルパネルスライドUIを作成する方法と組み合わせることで
    可能ではないか」と返信がありましたが…
    具体的にどこをどうすればそれが可能になるのかまったくわからず…><
    勉強不足で恥ずかしいのですが、教えていただけませんでしょうか…><

    お忙しいところ申し訳ございませんが、宜しくお願いいたします。

  • BlackFlag | 2016.02.22 1:15

    >roastbeecoさん
    コメントありがとうございます。
    当記事のサムネイル付きスライドショーをご検討いただいているようで
    ありがとうございます。

    サムネイル部分のスライドについては
    当記事のスライドショースクリプトとは別に
    サムネイルの<ul>に対して
    カルーセルスライドスクリプトを実行させる構成になります。

    現状サンプルファイルなどを用意する余裕がないのですが
    お試しいただけると幸いです。

    よろしくお願いします。

  • みく | 2018.02.04 16:27

    はじめまして。
    こちらのスライドショーを使わせていただきました。
    シンプルな動作を求めていたので、とても助かりました。
    ありがとうございます。

    私のブログに参考元としてこちらの記事へのリンクを掲載いたしましたが、
    不都合ございましたらご連絡ください。

  • BlackFlag | 2018.02.10 12:04

    >みくさん
    コメントありがとうございます。

    当記事のスライドショースクリプトをご活用いただき
    うれしく思っております。

    ハート形スライドショーもステキですね。

    当記事へのリンクについても問題ありません。
    ご報告ありがとうございます。

    当ブログでは他にもいろいろとご紹介させていただいておりますので
    あれこれお試しいただけると幸いです。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して