サイトのトップページなどでキ―ビジュアルにあたる部分を
複数枚ある画像を単純なフェードで切り替えるような動作を組み込むことはよくあること。
そんなちょっとした画像の切り替えが必要な際に使える
凝った動きも無く、画像がひたすらクロスフェードし続ける
シンプル画像ビューアーのサンプルを作ったので紹介してみます。
まずは動作のサンプルから。
jQuery CROSS FADE IMAGE VIEWER【SAMPLE】
サンプルでは4枚の画像を切り替えています。
自動で再生され、4枚の画像が永遠にループし続けます。
全体構成についてHTMLから。
◆HTML <div id="viewer"> <img src="img/photo01.jpg" width="400" height="300" alt="" /> <img src="img/photo02.jpg" width="400" height="300" alt="" /> <img src="img/photo03.jpg" width="400" height="300" alt="" /> <img src="img/photo04.jpg" width="400" height="300" alt="" /> </div><!--/#viewer-->
大枠をID「#viewer」（ここの名前は任意）で囲って、
その中に＜img＞タグで画像をひたすら入れておきます。
4枚以上の画像を使用する際は単純に＜img＞ソースを追加します。
HTMLソースの一番上に書かれた＜img＞タグが
ページロード時に最前面に表示され、
その後、順々に下にさがって表示されます。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
#viewer {
margin: 0 auto;
width: 400px;
height: 300px;
text-align: left;
overflow: hidden;
position: relative;
}
#viewer img {
top: 0;
left: 0;
position: absolute;
}
大枠のIDに対して、
中に入る＜img＞要素が「position:absolute;」になっている必要があります。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var setImg = '#viewer';
var fadeSpeed = 1500;
var switchDelay = 5000;
$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
</script>
変数「setImg」は画像の周りを囲うIDの名前となっているので、
サイト構成によってここの名前を変更することも可能です。
（ここは「.viewer」のようなクラス指定でも可）
「fadeSpeed」はその名の通りフェードする際のスピード、
「switchDelay」は切り替わるタイミング時間になり、
ここの値を変えることでそれぞれのスピード調整が可能です。
凝った演出などはありませんが
シンプルに画像を切り替えるだけの動作が必要な際に
手軽に使えると思います。
クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。
【2013/01/09】 ページ内での複数設置および画像にリンク設置などを可能とした改訂版スクリプトを作成しました。詳細はこちらから
【2013/12/17】 レスポンシブ対応したパターンを作成しました。（ページ内での複数設置および画像にリンク設置なども可能）詳細はこちらから
いろいろと勉強させていただいてます。
さっそくですが、このスライダーのループを止めることってできるんでしょうか？
何か、オプションのようなものがあって、そこで、設定するようには見えないんですが、
スクリプトの部分に何かを付け加えることで可能でしょうか？
最後の画像にコメントをのっけて、そこで止めてしまうような使い方を想定しています。
もしお時間が許すようでしたら、ご教授いただけると幸いです。
コメントありがとうございます！
このスライダーではループを止める構成にはしていないので
このスクリプトでは実現は難しいかもしれません。。。
ちなみに何枚の画像を使って切り替える想定ですか？
また違ったスクリプト構成になりますが、
使用する画像の枚数が決まっていれば、
別の方法で簡単に実現できると思いますので
お返事が遅れて申し訳ございません。
ただ今想定しているのは3枚です。
基本的にJavaScriptが理解できていないので、
無理なご相談をしてしまったようです。
申し訳ございませんでした。
お時間のあるときにでも、JS初心者にヒント的な
コメントでもいただけたら幸いです。
今後ものぞきにきますので、どうぞよろしくお願いします。
Maki
いえいえ。とんでもないです。
画像３枚をフェードで切り替えて
最後の画像でストップするサンプルファイルを作ってみました。
データは下記よりダウンロードしてみてください。
http://black-flag.net/devel/fadeSwitch/fadeSwitch.zip
サンプルデータをご確認頂いて
また分からないことがあればご質問ください。
ここのコメント欄に記載するのは限界があるので
スクリプトの要望等あれば「CONTACT」ページより
問い合わせてもらえると助かります。
よろしくお願いします。
スクリプト初心者です。初歩的な質問で恥ずかしいのですが
上記の記述は head・・・body・・・どちらに埋めるのでしょうか？
一番最初の HTMLの img名を自分のフォルダ内の名前に変えるだけでは動かないのでしょうか？
よろしくお願いします。
emiartさん
コメントありがとうございます！
スクリプト部分は基本的には＜head＞タグ内に記述します。
（＜body＞タグ内でも動きますが）
スクリプトが正常に読み込まれていればimgフォルダ名は変更しても大丈夫です。
スクリプト内で記述してある「img」の指定は＜img＞タグに対しての指示なので
フォルダ名は影響はしません。
記事の最下部にサンプルスクリプトのダウンロードを用意してあるので
そのファイルを色々いじって試していただけると、分かりやすいかと思います！
よろしくお願いします！
お返事ありがとうございます。
投稿を誤って2回もしてしまってすみません・・・。
明快な解答をいただけて嬉しいです。実はこんな常識？的なことはどのページにも
載ってなかったのです(-_-;)
それとimgタグにだけ反応するのですね。良く分かりました。
こんなことも分かってなくて試そうとしてるのって無謀でしょうか・・・・。
サンプルを参考にさせていただきます。ありがとうございました。
いえいえ。とんでもないです。
私も初めは何も知らないところからスタートしたので
一つ一つ覚えていけば大丈夫です！
また何か分からないことあったら
いつでもご連絡くださいませ。
このサイト素晴らしすぎます！
感動しました！
親切なうえ分かりやすい！
今までjavascriptから逃げてきましたが、これからは
どんどんサイトに活用していこうと思います！
これからもお世話になります！
とても嬉しいお言葉ありがとうございます！
JSを効果的に組み込むことで
ユーザーがサイトを使いやすくなる仕掛けができたり
サイト全体に華やかな演出を加えたりすることができるようになるので
いろいろ試してみてください！
自分もまだまだ勉強中の身なので
もっといろいろ発信できるようにがんばります！
おっしゃる通りです。
紙媒体のデザインよりハマりそうです。笑
facebookページも拝見させていただき、いいね！
押させていただきました。
これからもいろいろ参考にさせていただきますね！
返信ありがとうございました！
紙媒体とWebはそれぞれ違った
物づくりの楽しさがありますよね。
Facebookの方の「いいね！」も
ありがとうございました！
今後もお役に立てるようなネタを提供できるように
がんばらせていただきます！
いつも参考にさせていただいております！
このビュアーで表示させる画像にリンクを付けることは可能でしょうか？
＜a＞＜/a＞で試しましたが、うまく行きませんでした。
お知恵をお貸しただけると幸いです。
よろしくお願いします！
chappieさん
こんにちは。
コメントありがとうございます！
ここでサンプルで紹介しているスクリプトは
画像＜img＞タグを対象に構成しているので
＜a＞タグを挟むと動かなくなってしまいます。
スクリプト内で切り替えるタグの対象を＜a＞タグにして
切り替わるごとに「z-index」のレイヤー順序を変えることで実現できます。
動作のサンプルを用意したので
下記URLよりデータをダウンロードして
ご参考ください。
http://black-flag.net/devel/jQueryCrossFadeImageViewer/jQueryCrossFadeLinkImageViewer.zip
スクリプト部分に加えてCSSも
この記事の内容とは若干変わっていますので
お気をつけください。
よろしくお願いします！
ありがとうございます！
おかげさまでいい感じで利用させていただけそうです。
Jimdoで利用しようと思っていて、このスクリプトしかスライドショーが作動しなかったので助かりました。
他のスクリプトも動くのかもしれませんが、私の知識ではうまく動作しませんでした…
ともあれ、このスクリプトは他のものよりシンプルなので、大変気に入っています。
大変お世話になりました！
ありがとうございます〜
ご確認ありがとうございます！
無事にご要望にあった動作だったようで安心しました！
スライドショーのスクリプトはほんと様々ですが
できるだけ軽いもので実装することが理想ですよね。
また何かありましたら
よろしくお願いします！
こんにちは。最近ブログのヘッダー部分をリニューアルをしようとネット上を探したところ
こちらのサイトにたどり着きました。
JSのこともjqueryのことも全く何も分からないのですが、どうしても3枚の画像を簡単なフェードで切り替え、最後の画像で止めるという技を使いたいです。コメントを拝見し、既に同じ質問をされた方がいらっしゃり、サンプルファイルまでダウンロードできるようになっていましたが、ダウンロードができません。
どうすればよろしいですか？？
また、使いたい画像はどこに置けばいいのでしょうか？
困った質問をしてスミマセン。
こんにちは。
コメントありがとうございます。
3枚の画像の切替についてですが、
コメント内にあるサンプルデータのダウンロードは
確認したところ、こちらでは今でも正常に行えるのですが、
URLをクリックしてもデータが落とせないのでしょうか？
http://black-flag.net/devel/fadeSwitch/fadeSwitch.zip
画像を置く場所はどこでも大丈夫ですが、
サンプルデータのHTMLソースに書かれている画像を指定するパスを
置いた画像のディレクトリ構成に変更する必要があります。
ひとまずサンプルデータをダウンロードして
中を確認してみてください。
よろしくお願いします。
お返事ありがとうございました。
ダウンロードは出来ましたが、その後の処理について
質問させていただきたいので、contactページから
質問させていただきます。
すみませんがよろしくお願いします。
とっても参考になる情報が満載で助かっております。ありがとうございます。
ど素人な質問で申し訳ないのですが、
スマホサイト用に利用しようかと思ったのですが、
横向きにした場合、画像も広がるように画像の指定をpxではなく%で
行ないたいのですが、その場合のCSSはどう行なったらよいのでしょうか？
overflowとかpositionがあるので単純に％を入れても画像が表示されなかったりで
よくわからなかったのです、、、
よろしければお知恵をお借りできますでしょうか。
よろしくお願い致します。
＞mimiさん
コメントありがとうございます！
この記事で紹介している画像ビューアーは
全体を囲んでいる＜div＞の幅と高さの値が
中で表示する画像のサイズと常に同期していないといけないので
画像の幅を100％などにした際には、
別途スクリプト側で、幅100％にした画像の比率を保った高さの値を保持していかなくてはいけません。
スマートフォン向けサイトの場合は
画面を縦にした場合と、横にした場合それぞれでスクリプトを実行させる必要があります。
あまりシンプルな構成ではないかもしれませんが
PCで見た際にはブラウザのリサイズにあわせて
＜div＞エリアの高さの値を変更させ、
スマートフォンでは画面を縦と横で切り替えた際に
＜div＞エリアの高さの値を変更させるサンプルを用意してみたので
下記のURLからダウンロードしてご確認いただけますでしょうか。
http://black-flag.net/devel/jQueryCrossFadeImageViewer/jQueryCrossFadeImageViewerResize.zip
申し訳ないのですが、
当方、iPhoneでの確認はできているのですが
Android端末での確認環境がなく、見れていません。。
Androidにも対応させる形で作ってありますが、
もしAndroid端末で見た際に不具合があったらお知らせください。。
データをご確認いただき、
また不明な点などありましたら
ご連絡くださいませ。
よろしくお願いします。
お返事ありがとうございます。
ご丁寧にスクリプトなど書き直して用意していただけたなんて、
感激です＞＜
アンドロイド端末でも大丈夫でした！本当にありがとうございました！
これからも参考に拝見させていただきます。
＞mimiさん
データのご確認ありがとうございました。
ご要望の動作になっていたようで安心しました。
Androidでも無事に動いてホッとしました。
また何かうまく動作しないことがあれば
ご連絡くださいませ。
使用させていただきました。
ＨＴＭＬはじめたばかりの自分でもできるように大変親切でした。
ありがとうございました。
＞capさん
コメントありがとうございます！
このスクリプトがご参考になった様でよかったです。
サイト制作に少しでもお役立ていただけると
こちらとしても嬉しく思います。
よろしくお願いします！
使用させていただきました。
こちらのようなシンプルなスクリプトを探していました。
ありがとうございました。
＞nekさん
コメントありがとうございます！
このスクリプトがお役に立ったようで
こちらとしても嬉しく思っております。
他にもシンプルさを心掛けて、
スクリプトサンプルを作ってありますので
いろいろ試して頂けると幸いです。
よろしくお願いします！
使用させていただきました。
私の探していたものにまさにマッチしており、大変役に立ちました。
ありがとうございます。他にもすごく使えそうななのが、わかりやすく、丁寧に掲載されており今後も参考にさせていただきます。お気に入り登録しましたぁ☆
＞kurobondoさん
コメントありがとうございます！
この画像ビューアーのスクリプトがお役に立ったようで
こちらとしても嬉しく思っております。
これからもWebサイト制作に役立つ情報を発信していけるよう頑張りますので
たまに除いていただけると幸いです。
よろしくお願いします。
はじめまして！
使用させていただきました。
とてもシンプルでわかりやすかったです。
ありがとうございました。
1つご質問があります。
下にテキストリンクで画像が変わるようにするには、
どうしたらよいでしょうか？
ご指導宜しくお願い致します！
＞tonoさん
コメントありがとうございます！
この画像ビューアーをご活用いただいているようで
とても嬉しく思っております。
ご質問頂いた内容についてですが
テキストリンクをクリックすることで
画像をクロスフェードさせて切り替える、ということでしょうか？
こちらの認識が違っているかもしれませんが
もしかしたら当ブログの別記事の
「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」が
ご希望の動作に近いように感じております。
・jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法
http://black-flag.net/jquery/20110512-3039.html
一度こちらをご確認いただけますでしょうか
よろしくお願いします。
ご回答ありがとうございます！
伝わりづらい文章で大変失礼しました。
前へ 次へ の2種類のテキストリンクで
画像を切り替えるにはどのようにすれば良いでしょうか？
何度も質問ばっかりですみません！
宜しくお願い致します。
＞tonoさん
ご返答ありがとうございます。
この記事で紹介しているスクリプトは
あくまで画像がクロスフェードして切り替わる
シンプルな動作のみになっており
「前へ」「次へ」といったリンクをつけるには
スクリプト構成が全然違ったものになるので
この記事で紹介しているスクリプト内容では厳しいかと思っております。
ですが、その様な画像ビューアーを作成することも可能なので
機会がありましたらまたこのブログで紹介してみたいと思っております。
よろしくお願いします。
そうなんですね！
初心者でわからない事だらけですみません！
是非、教えて頂きたいと思っておりますので、
宜しくお願い致します！
はじめまして。
大変わかりやすいHPで参考にさせて頂いております。
初心者ですが、質問させてください。。。
こちらのスクリプトで マウスオーバー時に停止することは容易にできますでしょうか？
お手数おかけしますがアドバイスいただければ幸いです。
「jQuery SIMPLE SLIDESHOW」のソースを参考に試してみたのですがうまくできず。。
画像は2枚で考えております。
よろしくおねがいいたします。
＞hideさん
コメントありがとうございます！
このスクリプトをご活用いただき嬉しく思っております。
ご質問いただきましたマウスオーバーでの動作ストップについてですが
切り替え動作部分をfunctionを使ってのタイマー制御にすることで可能になります。
記述方法については
——————————————–
fadeTimer();
function fadeTimer() {
setTimer = setInterval(function(){
$(setImg + ‘ :first-child’).animate({opacity:’0′},fadeSpeed).next(‘img’).animate({opacity:’1′},fadeSpeed).end().appendTo(setImg);
},switchDelay);
};
$(setImg).hover(function(){
clearInterval(setTimer);
},function(){
fadeTimer();
});
——————————————–
この様な感じになります。
サンプルファイルも用意しましたので
必要であれば下記URLよりダウンロードしてご確認ください。
http://black-flag.net/devel/jQueryCrossFadeImageViewer/jQueryCrossFadeImageViewerHoverStop.zip
ご確認よろしくお願いします。
BlackFlag (管理人さま)
早々にお返事いただき感謝いたします！
本当にありがとうございます。
また、ダウンロード用のスクリプトまでご用意いただき・・・
お手数おかけしてもうしわけございません。
ご教授頂いたスクリプトで無事に実現できました！
ありがとうございます。
当方、.hoverで 止めることはできたのですが
再度開始させる書き方がわからず、、、
いろいろ試したのですが おかげ様無事に実装できました！
実装もできましたし、また書き方など大変勉強になりました。
ありがとうございます。
また、こちらのサイトにこさせて頂きます！
＞hideさん
ご返信ありがとうございました！
無事に理想の動作が実装できたようで安心しました。
このブログで紹介しているスクリプトは出来る限りシンプルな形で
分かりやすい構成を心がけているので
スクリプトの内容を辿っていただくと
何をどのように処理しているか分かっていただけるかと思うので
いろいろ試してみてください。
今後ともよろしくお願いします。
web1987 | 2012.06.06 23:56
jQueryで画象がクロスフェードしてシンプルに自動再生する方法
jQueryで画象がクロスフェードしてシンプルに自動再生する方法についてまとめられてます。 ▶jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法 柔…
すごく役に立つスクリプトをありがとうございます。
当方、現在スマホ用のサイトを作っておりましてコメント欄にありましたファイルより、画像を100％表示することができました。
それで、さらに欲を言ってしまうと、その画像にリンクを貼る場合はどのようにしたらよろしいでしょうか。
他のコメントにありました、リンクを付けるファイルも見させていただいたのですが、私の知識では難しいようでした。
もしお時間がありましたら、ご教示いただけると、大変ありがたいです。
よろしくお願いします｡
＞ＴＵさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいているようで
嬉しく思っております。
クロスフェードの対象をリンクの付いたコンテンツ要素にして
画像幅100％にするには、コメント欄で紹介している
２種類のサンプルスクリプトを組み合わせることで
実現できるかと思います。
上記を組み合わせたサンプルを用意してみましたので
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryCrossFadeImageViewer/jQueryCrossFadeLinkImageViewerResize.zip
ご確認よろしくお願いします。
ありがとうございます！完璧にできました！
感謝感激です。
本当にありがとうございました。
＞ＴＵさん
実装のご報告ありがとうございました。
無事に理想どおりの動作が実装できたようで
安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
はじめまして。
クロスフェードのjQuery使用させていただきました。
スクリプトについて質問です。
setIntervalのfunction内でのappendTo(setImg)が
どのように動作しているのかがよく理解できません。
next()を使っているのでend()によって選択状態が1個前に戻り、
#viewer :first-childつまり#viewer内の最初のimgを選択していることになると思います。
(ここまでは合っていますでしょうか？汗)
ここからappendTo(setImg)がどのような働きをしているのか
教えていただきたいです。
宜しくお願い致します。
＞yaさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました「appendTo(setImg)」の動作についてですが
ここではクロスフェードした後、フェードアウトした画像（＜img＞タグ）を
画像リストの一番後ろに移動させている処理になります。
（「setImg」で設定しているIDの末尾に移動している処理になります）
FirefoxのアドオンFirebugなどでこの部分の動作を表示してみると
実際のソースが書き変わっている様子が分かると思いますので
お試しください。
よろしくお願いします。
>管理人様
早急なご返答ありがとうございました。
Web開発に役立つアドオンまで教えていただき有り難うございます。
Firebugを使って見てみたところ動作が視覚的に確認できました。
本当にありがとうございました。
今後も貴サイトにお邪魔させて頂きます・・・。
＞yaさん
ご返信ありがとうございます。
無事に動作の方、ご確認いただけたようで、
仕組みをご理解いただけて安心致しました。
FirebugはjQueryのデバグツールとしても
かなり使いやすいものなので今後もご活用くださいませ。
（ちなみにChromeでは「F12」キーを押すと同様のツールが現れます）
今後ともよろしくお願いします。
はじめまして。
ステキなサイトを見つけられて感激です。
「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法 」
で画像をクロスフェードするのですが、上にテキスト画像（キャッチフレーズのようなもの）が乗っていてそれは
固定、といったものを作りたいと考えております。
お時間あるときに教えていただけたら幸いです。
＞ゆうこさん
コメントありがとうございます。
このクロスフェードビューアーをご活用いただいているようで
嬉しく思っております。
ご質問いただいた上に固定のテキスト画像を乗せる件については
スクリプトに変更を加えることなく、
HTMLとCSSの追加だけでいけるかと思っています。
全体を囲うブロック要素（サンプルで言う「#viewer」）の上に
CSSの「position:absolute」などを使ってテキスト画像を上に被せるやり方になるかと思います。
その際、クロスフェードスクリプトを実行させている画像には
「z-index」が「20」で入るようにしてあるので
テキスト画像に対しては「z-index」の値を20以上にする必要があります。
お試しください。
よろしくお願いします。
ていねいなお返事ありがとうございます。
試してみます。
これからも参考にさせていただきます。
よろしくお願いいたします。
＞ゆうこさん
ご返答ありがとうございました。
お試しいただいてまた不明なところなどありましたら
ご連絡くださいませ。
よろしくお願いします。
はじめまして。
シンプルなスライドを探していたのですごくありがたいです。
なのですが、なぜか画像が表示されません…
ほぼ素人のようなものなので、きっと初歩的なミスをしている気がするのですが、
（Chromeで要素を確認すると画像自体はきているのでファイル名の問題ではなさそうです…。）
間違いがあるとしたらどのような点でしょうか？
article#top-header {
position: relative;
overflow: hidden;
width: 100%;
z-index: 5;
padding: 0;
margin: 0;
}
article#top-header img.main-img {
position: absolute;
top: 0;
left: 0;
}
＜img src="/assets/images/top-img01.jpg” width=”1000″ class=”main-img” /＞
＜img src="/assets/images/top-img02.jpg” width=”1000″ class=”main-img” /＞
＜img src="/assets/images/top-img03.jpg” width=”1000″ class=”main-img” /＞
＜img src="/assets/images/top-img04.jpg” width=”1000″ class=”main-img” /＞
#スクリプトのid名は#viewerから変更してあります。
また、重ねて質問で申し訳何のですが、こちらのスライドを背景画像としてブラウザに合わせて拡大縮小するにはどうすればいいでしょうか。
身近に聞ける人がいないもので、申し訳ないのですがお答えいただければ幸いです。よろしくお願いします。
＞mumさん
コメントありがとうございます。
このビューアースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました内容について確認させて頂きましたが
全体を囲うブロック要素を「position:relative」にして
中に入る画像＜img＞を「position:absolute」にしていますので
大枠のブロック要素「article#top-header」に対しては
高さheightの指定を入れないと画像は表示されません。
（中に入る要素が全てabsoluteなので空っぽ状態になります）
背景画像でのフルスクリーン表示については
ちょうど来週の更新（9月4週目）の際に同等のものを紹介する予定でいますので
もうしばらくお待ちください。
よろしくお願いします。
こんにちわ。
クロスフェードビューアーのサイトを探していましたが、
ここのソースがとてもシンプルで利用させていただいております。
ひとつ教えて下さい。
数枚の画像を繰り返し連続再生している状態で画像ファイルを更新した際、
ページを再表示しないで画像だけ切り替えるようにしました。
$(setImg + ‘ :first-child’).animate({opacity:’0′},fadeSpeed).next(‘img’).animate({opacity:’1′},fadeSpeed).end().appendTo(setImg);
$(setImg + ‘ :last-child’).attr(“src”,img_url + “?” + (Math.random()*100) );
画像src後ろに?+ランダム数を付与する方法で更新できるようにしましたが、
スムーズに画像が表示されてる間に一瞬新しい画像が表示されてしまって困っております。
ファイルを更新したタイミングではなく更新した画像の表示順が来るたびに一回だけ現象が発生します。
2周目以降は更新された画像に切り替わって現象は発生しません。
いい解決策がありましたらご教授下さい。
よろしくお願いします。
はじめまして。
こちらのフェードアウトのjqueryを利用させていただいております。
画像を2枚で停止させたい場合はどうしたらよいのでしょうか？
fade.jsのを編集したら良いのかと試行錯誤したのですが
なかなかうまくいかなかったのでこちらへ質問させていただきました。
jqueryの関数等の専門的な知識はないのですが、少し（指定の記述をコピペ程度）でしたら触れます。
ご指導頂ければと思います。
よろしくお願いいたします。
＞しちみさん
コメントありがとうございます。
このクロスフェードビュアースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問頂きました内容についてですが
同様の現象を再現できずにおります。。
もしテストURLなど御座いましたら
お知らせいただければ可能な限り調査など出来るかと思います。
よろしくお願いします。
返信ありがとうございます。
なんとか自分で解決できました＾＾
onloadを用いて定期的に読み直す方法にしたところ、
画像更新を反映させることができました。
function Loadimg(img_name, img_src) {
img = document.images[img_name];
img.src = img_src;
}
function TimerLoadimg(img_name, img_src){
dd = new Date();
img_src = img_src + “?” + dd.getTime();
setTimeout(“Loadimg(‘” + img_name + “‘, ‘” + img_src + “‘)”, 5000);
}
$(function(){
var setImg = ‘#viewer’;
var fadeSpeed = 2000;
var switchDelay = 4000;
$(setImg).children(‘img’).css({opacity:’0′});
$(setImg + ‘ img:first’).stop().animate({opacity:’1′,zIndex:’20′},fadeSpeed);
setInterval(function(){
var img_url = $(setImg + ‘ :first-child’).attr(“src”);
alert(img_url);
$(setImg + ‘ :first-child’).animate({opacity:’0′},fadeSpeed).next(‘img’).animate({opacity:’1′},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
ご協力いただきありがとうございました。
＞おっちーさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました、
画像を2枚で停止させる場合ですが、
「fade.js」をご使用していただいてるならば
スクリプト内の
————————–
function imgChange01() {
$(‘#image01′).stop().animate({opacity:’0′},fadeTime);
$(‘#image02′).stop().animate({opacity:’1′},fadeTime);
setTimeout(function(){imgChange02();},switchTime);
};
function imgChange02() {
$(‘#image02′).stop().animate({opacity:’0′},fadeTime);
$(‘#image03′).stop().animate({opacity:’1′},fadeTime);
};
————————–
の２つの括りを
————————–
function imgChange01() {
$(‘#image01′).stop().animate({opacity:’0′},fadeTime);
$(‘#image02′).stop().animate({opacity:’1′},fadeTime);
};
————————–
この様に変更することで実現することが可能になるかと思います。
お試しください。
よろしくお願いします。
＞しちみさん
ご返信ありがとうございます。
無事に理想の動作が実装できた様で安心致しました。
また何かありましたら
よろしくお願いします。
はじめてコメントさせてもらいます、れなと申します。
まず最初に、とても理想的なスクリプトをとても分かりやすい説明と共に提供してくださりありがとうございます！
余分な機能が無く、軽くて、ひたすらスライドしてくれているようなやつが欲しかったのです・・・
私はJavaScriptについては初心者なのですが、こちらの記事の通りにやったところあっさりと出来てしまいました。感激です。
似たようなスクリプトを紹介してくれているサイトは探せばあるにはあるのですが、どれもその通りにやったのに、あれ？動作しない・・・という事が多く、自分のHPには対応していないのかな・・・とも思ったり、知識が無いため原因が分からずあきらめかけていました。そんな中ここへたどり着きました^^
普段あまりコメントしたりしないんですが、とても嬉しかったので思わず書き込ませてもらいました。
他のスクリプトも見たのですが、Flashをつかわなくてもここまで出来るのか！と驚きました。
とても面白いと思いました。センスも良いですね。時間がある時、いろいろ試してみたいと思います。
同じページに試したいスクリプトがたくさんあって、今やるとHTMLがごちゃごちゃになって訳分からなくなりそうです・・・^^
自分のサイトは製作中なのですが、公開することになった際はこちらのblogにリンクをはりたいと思っています。
長々とすみません。嬉しかったのでついつい^^ また遊びにきます。
連続で投稿してしまいすみません。
ひとつ質問なのですがよろしいでしょうか。
表示される画像をランダムに変えることは可能ですか？？
そのページを表示するたびに最初の画像からスライドがはじまるのではなく、最初の画像がランダムに変わるようには出来ないでしょうか？
お時間のある時に回答いただけますと助かります。
＞ れなさん
コメントありがとうございます！
このクロスフェードビュアーがお役に立ったようで
こちらとしても嬉しく思っております。
いろいろと暖かいメッセージもありがとうございました。
シンプルで使いやすいスクリプト制作を心掛けているので
その様に言っていただけると幸いです。
リンクについても貼っていただけるとのこと嬉しく思っております。
jQueryを使用することでFlashのような動きを
簡単にサイト内に実装できるようになるので
ここで紹介しているサンプルなどをあれこれいじって試してみてください。
ご質問頂きましたロード時のランダムについてですが、
返答が遅くなってしまいすみません。。
ページロードした際に最初に表示する画像を
ランダムにするパターンのサンプルを用意しましたので
下記からダウンロードしてご参考ください。
http://black-flag.net/devel/jQueryCrossFadeImageViewer/jQueryCrossFadeImageViewerRandam.zip
スクリプト内に使用する画像の最大枚数を入力するところがあるので
切り替え画像の枚数によって値を変えてください。
不明な点があればまたご連絡くださいませ。
よろしくお願いします。
はじめまして。
素晴らしいスクリプトのご提供、ありがとうございます!!
また、他の方とのやりとりを拝見して感じました……管理者様のお人柄も素晴らしいです!!!!!!!
おかげさまでクライアント(上司)の要求に応えられそうです。
本当に助かりました、これからも色々勉強させて頂きます。
＞コンドウさん
コメントありがとうございます！
このクロスフェードスクリプトがお役にたったようで
嬉しく思っております。
まだまだ未熟者ですがその様なお言葉をいただけると励みになります。
ありがとうございます。
他にもいろいろとスクリプトを紹介しているので
あれこれ試していただけると幸いです。
よろしくお願いします。
さっそくのご返答ありがとうございました。
遅いなんてとんでもないです、むしろはやすぎてびっくりです。
ためしたところとても簡単に出来ました♪ありがとうございます！
教えていただいた最初の画像をランダムに表示するスクリプトについてひとつ質問してもよろしいでしょうか？
最初に表示される画像だけ他の画像の表示時間より長くなるみたいなのですが、これを他の画像の表示時間と同じにすることは出来るのでしょうか？
お時間のある時に教えていただけますとうれしいです。
＞れなさん
ご確認ありがとうございます。
改めて確認したところ
少々スクリプト構成がおかしかったです。。
失礼しました。。。
再度、調整し直して先日のデータを上書きしましたので
下記URLより再度ダウンロードしてみてください。
http://black-flag.net/devel/jQueryCrossFadeImageViewer/jQueryCrossFadeImageViewerRandam.zip
ランダムで値を変えている部分は前回のものから構成を変えてあります。
こちらで正常に動作すると思いますので
一度お試しください。
よろしくお願いします。
正常に動作しました！！ありがとうございます、感激です！
おかげさまで理想的なスライドショーを設置することができました。うれしいです。
こんなにはやく対応していただいてありがとうございました。
＞れなさん
ご返信ありがとうございました。
無事に理想の動作が実装できた様で安心しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
はじめまして。いろいろなサイトを彷徨ってやっと理想的なサイトにたどり着けたと思っています。
当方、初心者なので質問をお願いします。クロスフェードする画像の外に、キャプション（コメント）もシンクロして切り替えるにはどうすればいいのでしょうか。多分、簡単な書き込みでできるのだと思いますが、教えて下さい。
＞おかもさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問頂きましたキャプションについてですが
記事内で紹介しているスクリプトでは
＜img＞タグ自体をクロスフェードで切り替えているので
キャプションを入れる際には切り替える対象を変える必要があります。
切り替える要素を＜img＞タグではなく、＜div＞タグにして
個々の＜div＞タグの中にキャプション用の＜span＞タグを入れた形で
サンプルを用意してみましたので下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryCrossFadeImageViewer/jQueryCrossFadeImageViewerCaption.zip
キャプション付きのコンテンツ要素が
クロスフェードで切り替わる構成になっています。
お試しください。
よろしくお願いします。
お返事ありがとうございます。しかも、サンプルまでアップしていただき感謝です。
早速活用させていただきます。
これからもよろしくお願いいたします。
はじめまして。
ずっと自分のHPにスライドショーみたいなのをつけたくて、いろんなサイトを探していたのですが、私があまりにも初心者すぎて、他のサイトでは全くわからず、四苦八苦して導入してみたものの全く動かずとういう状態を３ヵ月ほど放置していたのですが(笑)、こんなにわかりやすく、親切なサイトを発見でき、やっと自分のHPにも導入することが出来ました！！
本当にありがとうございます。
ここを読みながら、画像にリンクを貼ることもでき大満足なんですが、さらなる欲求がでてきてしまい、お忙しいと思いますが、ご教授頂きたいです。
画像にリンクを張りスライドする状態なんですが、更にその各画像に簡単なタイトル（キャプション）を表示させていのですが、可能でしょうか？
お手数ですが宜しくお願い致します。
＞ほしさん
コメントありがとうございます。
このクロスフェードビューアーをご活用いただいているようで
とても嬉しく思っております。
ご質問いただきましたキャプションの件ですが
ちょうど2つほど前のコメントにて
同様のキャプション追加のお問い合わせをいただいた「おかも」様宛てに
サンプルファイルを紹介しておりますので
一度こちらのファイルをお試しいただけますでしょうか。
不明な点などあればまたご連絡くださいませ。
よろしくお願いします。
早速のご連絡ありがとうございます。
すみません、私の説明不足でした。
おかもさんのところでアップされているサンプルは、確かにキャプション付きのクロスドビューアーなのですが、更にそのサンプルの仕様にプラス、各画像にリンクも貼りたいんです。
このようなことは可能でしょうか？
お忙しいのに何度もすみませんが、ご教授頂けますよう、宜しくお願い致します。
はじめまして。
色々なサイトをめぐって頭を抱えこんだあげくこちらにたどり着き，シンプルに画像が切り替わり、最後にとまるというものを探していたので、とっても助かりました。
ありがとうございます。
お教えいただけたらと思うことがあり、コメントを入れさせていただきます。
実際にサーバーに上げてみてみたら、フェードインする前に、瞬間的に画像がぱぱっと見えてしまいます。入れてみた画像が大きいので、目がちかちかしてしまって困っています。
これを止める方法はないでしょうか？使ったのはfadeSwitchです。
お忙しい中を申し訳ないのですが、ご教授いただければ幸いです。
よろしくお願いいたします。
＞ちかさん
コメントありがとうございます。
このクロスフェードビューアーをご活用いただいているようで
嬉しく思っています。
ご質問いただいた件ですが
その様な現象が起こってしまうテストページのURLなど
お知らせいただくことは可能でしょうか。
仰っている事象を確認できる環境があれば
解消方法なども検討できるかと思っております。
（別のスクリプトが干渉している可能性も考えられるので）
ご検討の程、よろしくお願いします。
はじめまして、とてもわかりやすく非常にシンプルなタグに惚れました。
ありがとうございます。
ひとつ相談なのですが、何枚かの画像をクロスフェードし、各画像にリンクを張るところまでできたのですが、それにプラスして閲覧者の人が任意で各画像を見る仕掛けを作るにはどうしたらいいですかね。
例えば、フェードの画像の上下もしくは内部に、ボタンなどを作ったりした場合のスクリプトなどご紹介いただけたら嬉しいです。
よろしくお願いいたします。
＞AUKidさん
コメントありがとうございます。
当記事のクロスフェードビューアースクリプトを
ご活用いただいているようで嬉しく思っています。
ご質問いただいた件ですが、
おそらく当ブログ別記事の
—————————————————————-
・jQueryでサムネイル付きスライドショーをシンプルに作成する方法
http://black-flag.net/jquery/20111122-3597.html
—————————————————————-
こちらの動作が想定しているものに近いのではないかと思っております。
サムネイル付きのクロスフェード切り替えスクリプトになっており、
サムネイルとして使う画像は任意の画像で構成できるようになっています。
（サムネイル画像でなくても「●」などにすることも可能です）
お試しください。
よろしくお願いします。
早々にご返答をいただいていて、ありがとうございました。
反応が遅くて申し訳ありません。
URLを公開することができないのですが、試しにと入れて動きを見ただけのページでした。
HTMLにCSSファイルをつけて、あとはこのスクリプトのみで、ページも１ページ分試しにと作っただけのかんたんなものです。
これではBlackFlagさまも回答の仕方がないかと思いますが、親切なご返答をありがとうございました。
はじめまして、
ネットショップにフラッシュで画像を３枚ほどアップしてスライドさせていたのですが、フラッシュだと携帯では見れないことに気がついて、いろいろなサイトを行ったり来たりして模索しておりました。
こちらのクロスフェードする画像ビューアーを拝見し、早速取り入れさせていただきました。
今までの苦労が嘘のように、簡単に画像をアップでき、感謝に絶えません。
本当にありがとうございます。
動作もうまく入って、アップできましたが、なぜか画像を400×300から950×380に訂正しても、400×300のままで表示されます。
はじめはアップした画像のサイズが変わったかな、と思いましたが、画像URLをブラウザに表示して確認したところ、950×380でした。
HTMlもCSSのどちらも変更しましたがどうにも拉致があかず、質問投稿させていただきました。
縦、横のサイズ以外でどこか訂正しなくてはいけないのでしょうか。
お時間のあるときに是非ご教示いただけますとありがたいです。
宜しくお願い申し上げます。
＞Filsonaさん
コメントありがとうございます。
このクロスフェードビューアーをご活用いただき嬉しく思っております。
ご質問いただきました件についてですが
スクリプト側ではエリアの幅や高さの制御は一切しておりませんので
widthやheightを使っての指定はHTMLソースとCSS側のみになっております。。。
実際のデータを確認できていないので何とも言えないのですが、
再度HTMLとCSSでの幅と高さの指定をご確認いただき
それでも解決しない場合はキャッシュのクリアなどをしてみてはいかがでしょうか。。
（「Ctrl」キー＋「F5」キー等）
お試しください。
よろしくお願いします。
早速、ご回答いただきありがとうございました。
ご指摘の通り、試してみたところ、画像サイズも指定通りに表示されました。
さて、もう一つ質問ですが、実装できたのは、実はトップページなのですが、私が意図しているのは共通ページのヘッダータイトルの真下に大きく、実装したかったのです。
その位置に表示したいHTMLタグを書き込むと、画像そのものがスクリーンの左側真上に寄ってしまい、構成が崩れます。
こちらでご紹介されている方法はトップページ用なのでしょうか。
それとも、タグのどこかを変更すれば共通ページでも実装できますでしょうか、お忙しいところ、恐縮ですが、またご教示いただけますとありがたいです。
宜しくお願い致します。
Filsonaです。度々すみません。
先ほどの質問ですが、試しにCSSを下記のようにautoを入れて見ましたところ、フラッシュを置いた時と同じように綺麗に表示されました。
#viewer img {
top: 0 auto;
left: 0 auto;
position: absolute;
但し、違うのは、フラッシュのときはヘッダータイトルとサイド/トップページの閒に表示されたのですが、今回はサイド/トップページのコンテンツの上に重なってしまいました。
素人が勝手な変更をした為に起こったことでしょうか、それとも元々、私がなにか間違って設置しているのでしょうか。
おわかりになる範囲で教えていただけるとありがたいです。
宜しくお願い致します。
＞Filsonaさん
ご返信ありがとうございます。
サイズ問題に関して無事に解消され
正常に表示された様でよかったです。
このスクリプト動作はトップページのみとか
そういった制限は特にないので
どこにどの様に設置することも出来ると思いますが
設置する際に他部分のHTMLやCSSが影響して
表示がうまくいかないことは可能性として充分考えられますので
その辺りも確認しながら設置してみてください。
よろしくお願いします。
返信、ありがとうございました。
おっしゃる通り、他のCSS表記で高さが０pxで指定されているようで、そちらを変更することができませんので、表示したい画像のHTMLで高さを指定し、こちらを優先するように表示したら、きれいに実装できました。
こちらのサイトにありました、横並びスライドも実装してみたのですが、同じ状況で苦戦していましたので、早速、同様に試してみます。
結果は改めてお知らせ致します。
ありがとうございました。
こんにちは、同一ページ内に複数設置したい場合、スクリプト等できるだけシンプルにまとめることは可能でしょうか
現在、複数設置するのにid=”viewer” id=”viewer2″ id=”viewer3″…とidを変更し、スクリプトもそれぞれに対応してvar setImg = ‘#viewer’; var setImg = ‘#viewer2′; var setImg = ‘#viewer3′;…と書き換えて設置したい数だけスクリプトを書くとうまく動いてくれています。しかし、例えば１０箇所設置とかになるとスクリプトも１０個書くことになりますのでこれをまとめたいと考えています。
よろしくお願いいたします。
＞Keiさん
コメントありがとうございます。
このクロスビューアースクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました同ページ内での複数設置についてですが
このスクリプトでやろうとするとその様な形になってしまいます。
同様のご質問も多くいただいていることから
近いうちに複数設置パターンのスクリプトを
新たな記事として紹介させていただこうかと思っておりますので
もうしばらくお待ちくださいませ。。
よろしくお願いします。
ご回答ありがとうございます。
お手数をおかけしますが、よろしくお願いいたします。
jQueryで画像をクロスフェードさせる | yorokobinotame | 2013.01.10 19:09
[...] http://black-flag.net/jquery/20110525-3120.html [...]
こんにちは。
とても分かり易説明で、私のＨＰにも取り込みたいと、
先ほどからＨＰビルダーを使いチャレンジしています。
ここで質問なのですが
サンプルで猫の写真を四枚使い、好きな場所で再生するところまで行きました。
他のサイトを見ても、ここまでもたどり着けず
こちらのサイトがわかりやすく感激しています。
ただ、画像を自分の好きなものに差し換えた時、
小さく、猫のサイズと同じサイズで表示されます。
#viewer {
margin: 0 auto;
width: 900px;
height: 420px;
text-align: left;
overflow: hidden;
position: relative;
}
単純に数字だけをいじってもダメでした((´ω`υ))
スタイルシートをいじって、合わせたら好きなサイズにできるかなぁ・・
とおもってやっていますが、解決しません。
大きな画像をはめて（同じサイズです）再生したいです。
表示サイズを変えるにはどうしたらいいでしょうか。
初心者な質問ですみません。
＞明日香さん
コメントありがとうございます。
このクロスフェードビューアースクリプトを
ご活用いただいているようで嬉しく思っております。
ご質問いただいた件についてですが
サイズ変更に関してはCSSのサイズ変更に加えて
HTML側の＜img＞のサイズを変更する必要があり
恐らくHTMLの方が変更されていないのではないかと思っております。
（スクリプト側では特にサイズの指定は処理していません）
一度、HTMLソース内の＜img＞タグをご確認ください。
よろしくお願いします。
教えていただけますでしょうか？
jabasprictなどまったくの初心者です。
仕事で、複数画像を自動でフェードしながら変えていく方法を探していたところ
こちらのページにたどりつきました。
ためしに自分なりにスプリクとなど入力してみたのですが、ランタイムエラーがでて動作しません。
周りにたずねる人もいなくて困っています。
多分入力方法が間違っているのでしょうが、直し方がわかりせん。
よろしくお願いいたします。
＜!DOCTYPE html＞
＜html＞
＜div id=”viewer”>
＜img arc=”1.jpg” widht=”600″ height=”400″ alt=”" /＞
＜img arc=”2.jpg” widht=”600″ height=”400″ alt=”" /＞
＜img arc=”3.jpg” widht=”600″ height=”400″ alt=”" /＞
＜img arc=”4.jpg” widht=”600″ height=”400″ alt=”" /＞
＜img arc=”5.jpg” widht=”600″ height=”400″ alt=”" /＞
＜img arc=”6.jpg” widht=”600″ height=”400″ alt=”" /＞
＜div>
＜script type=”text/javascript”＞
$(function() {
var setImg = ‘#viewer’;
var fadeSpeed = 1500;
var switchDelay = 5000;
$(setImg).children(‘img’).css({opacity:’0′});
$(setImg + ‘ img:first’).stop().animate
({opacity:’1′,zIndex:’20′},fadeSpeed);
setInterval(function(){
$(setImg + ‘ :first-child’).animate({opacity:’0′},fadeSpeed).next
(‘img’).animate({opacity:’1′},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
＜/script＞
＞yayaさん
コメントありがとうございます。
このクロスフェードビューアーをご活用いただいているようで
嬉しく思っております。
ご質問いただいた件についてですが
HTMLに書かれているスペルを再度確認していただく点と
jQueryファイルがきちんと読み込まれているか
ご確認してみてください。
よろしくお願いします。
お返事ありがとうございました。
なんとか自動でフェードしながら写真が変わるようになりました。
これからも勉強して、少しでも仕事に役立てたいとおもいます。
また何かありましたらよろしくお願いします。
jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法(自動でスライドする動作などは付けていません。) | webサイト作成に関する自分メモ | 2013.03.06 0:15
[...] ルな画像ビューアー（自動再生）を作成する方法 http://black-flag.net/jquery/20110525-3120.html [...]
はじめまして。
jQueryの知識がないためこちらの記事が参考になりました。
ID内に存在する画像分切り替え、
最後にフェードを遅くして止めるようにしたかったのですが、
無事実装できました。
どうもありがとうございました。
＞Shinezさん
コメントありがとうございます。
このクロスフェード画像ビューアースクリプトが
お役に立った様で嬉しく思っております。
また何かありましたら
何卒よろしくお願い致します。
はじめまして。
こちらのスライドショーを使わせていただいております。
ありがとうございます。
質問なのですが、最初だけフェードさせずに
表示させる方法はございますでしょうか。
よろしくお願いします。
＞mameさん
コメントありがとうございます。
この画像ビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました
最初の表示をフェードさせないようにする件についてですが
記事内で紹介しているスクリプトの
10行目にあたる
—————————————————
$(setImg + ‘ img:first’).stop().animate({opacity:’1′,zIndex:’20′},fadeSpeed);
—————————————————
を
—————————————————
$(setImg + ‘ img:first’).css({opacity:’1′,zIndex:’20′});
—————————————————
という風に書き換えることで実現できるかと思います。
※コメントのテキストをそのままコピペする際には
シングルクォーテーション「’」が全角に変更されてしまうと思うので
貼り付け後、半角に変更してください。
お試しください。
よろしくお願いします。
こんにちは。
早急なご教示ありがとうございます。
こちらで無事実装できました。
大変助かりました。感謝申し上げます。
ありがとうございました。
こんにちは。
こちらのページを参考にし、ＨＰへスライドショーを導入しました。
ひとつ難儀している点がございます。ページ製作段階（ローカル）では
きちんと動作するのですが、サーバーにアップした段階（公開）で
上手く動作しません…。画像が切り替わるのはＯＫなのですが、
ディゾルブ（ＯＬ）がかからない状態です。問題点などご教示頂けましたら
幸いです。
お忙しいところ大変恐縮ですが、宜しくお願い致します。
ＨＰ（ページ上部に掲載の写真。３枚がクロスフェードするはずなのですが…）
http://www.geocities.jp/hirosakirecorder/tvdx_hirosaki.html
今朝方、書き込みしました弘前タワーです。
原因はブラウザーにあったようです。ページ制作段階ではIE10で
動作確認しておりましたが、アップロード後の閲覧はSleipnirで
していました。IE10や他のブラウザーで閲覧したところ正常に動作
しております。
いやはや、お騒がせして申し訳ございません…。
＞弘前タワーさん
コメントありがとうございます。
こちらのクロスフェードビューアーをご活用いただいている様で
嬉しく思っております。
発生した問題も解決したようで
無事に理想どおりの動作が実装できた様でよかったです。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
はじめまして。あやと申します。
自社のHPにスライドショーを使用したいと思い、色々探してこちらのHPにたどり着き、
使わせて頂いてます。HTMLやｊQueｒyの事もほとんど分からないのに、おかげ様でどうにか
実現することが出来ました（涙涙）ありがとうございます！
しかし、問題が一つ…。
スライドショーさせたい写真を載せれば載せるほど、ページが伸びていきます…。
写真1枚だけなら、画面をスクロールさせなくてもぴったりサイズなんですが、例えば、3枚載せたら
縦に3枚並ぶ分の長さが出来てしまいます。載せれば載せた分だけ、長～いページとなってしまいます。
八方色々なサイトを探しましたが、どうしても分からず質問させて頂きました。
分かりにくい説明で申し訳ありません。
どうか、ご指導のほどよろしくお願い致します。
＞あやさん
コメントありがとうございます。
このクロスフェードスライドショースクリプトを
ご活用いただいている様で嬉しく思っております。
ご質問いただきました件についてですが
実際どのような全体構成で実装されているか
確認できていないので何とも言えないところもあるのですが
ブラウザリセットがきちんとされていない影響かな、とも思われますので
CSSに
———————————-
* {
margin: 0;
padding: 0;
}
———————————-
とした記述を追加することで
解消される可能性があるのではないかと思われます。
（あくまで憶測になりますが・・・）
お試しください。
よろしくお願いします
こんにちは、あやです。
お返事頂き、ありがとうございました。
記述して頂いた事項をCSSの部分に追加してみましたが、変わらずです（T△T)
もう少し、やりくりしてみます！
お忙しいのにありがとうございました。
また使わせていただきます！！
＞あやさん
ご確認ありがとうございます。
当記事のサンプルファイルを
そのまま使用していただければ
その様な現象は起こらないと思われますので
再度HTMLとCSS、スクリプトをご確認頂き
実装してみていただければと思います。。
（まずHTMLとCSS、スクリプトをそのままコピペするなど）
よろしくお願いします。
はじめまして。チョコと申します。
こちらのスライドショーを使わせていただいております。
ありがとうございます。
質問なのですが、コチラのサンプルファイルをダンウロードして、そのままプレビューにしたら、画像が切りかえなかった。どこの数字とか変更することじゃないですか？
とても使いたいです。教えてください♪
よろしくお願いします
＞chocoさん
コメントありがとうございます。
このスライドショースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
ダウンロードファイルではなく
当記事上のサンプルは動作しているのでしょうか。
動作していないOS環境、ブラウザ等についても
お知らせいただけると幸いです。
ご確認よろしくお願いします。
こんにちは、chocoです。
早速の返事、ありがとうございます。
記事上のサンプルが動作しています。そのソースをDWで開いて、自分のPCに保存して、プレビューで見ても、動作してないです。
ダウンロードしていたファイルを写真を差し替えて、
そのままFTPにCS、htmlに入れたけど、動作してないです。
まだまだ勉強していますので、未熟なので、教えてくれれば、うれしいです。
宜しくお願いします。
chokoです、たびたびすいません。
コチラのミスで、もう一回確認したら、動作していました。本当にすいません。
素晴らしいです。ずっとこういうのを使いたかったです。
本当に、ありがとうございます。
また、欲張りですが、
コチラのサイトみたいに、↓↓
http://www.rakuten.co.jp/galstar/
画像にリング貼って、切り替えしてると、
大きな画像の下に、グレーのありまして、それと同じようにできますでしょうか？
お忙しいところを、すみませんです。
宜しくお願いします！
＞chocoさん
無事に動作したようで安心致しました。
当記事で紹介しているスライドショースクリプトは
サムネイルやページネーション的なものは付けないパターンになりますが
当ブログで紹介している別パターンのスライドショーを
————————————————
・jQuery/CSS3 TIPS
http://black-flag.net/jquery/20120801-4016.html
————————————————
このページでまとめてありますので
理想の動作と同じものは無いかもしれませんが
こちらを参考にしていただければと思います。
ご確認ください。
よろしくお願いします。
すばらいいものを見つけた！！！
素晴らしい人を知り合った！！！
本当にうれしくてたまらない！
ありがとうございます♪
今から、ひとつひとつを試しにやってみたいです。
また、知らないところがありましたら、質問させてください！
ネットショップの運営で、いろいろ作りたかったけど、
できなくて、残念だったけど、なんか、御蔭さまで、やる気が出てきました！！
ありがとうございます！
探してました。出会えてとってもうれしいです。
ですが質問させてください。
1.自分のサイトに下記タグをそのままのせていいのでしょうか？
＜script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”＞＜/script＞の部分ですが
2.フェードアウトするときに一旦画像が消えて真っ白になってしまいます。
それから滑らかにフェードインするのですが、
サンプルのように、画像が残った状態でフェードインしてくれないのです。
お忙しいところ申し訳ございませんがよろしくお願いします。
何度も申し訳ございません。
もうひとつお伺いしたいのですが
トップページの上部に800＊300Pｘほどのスライドショー画像を10枚配置したのですが
ページフッターより画像がはみ出てしまい、ホームページビルダーでプレビューすると
問題なく上部は表示されるのですが
＋最下部にもページ（＜/HTML＞）からはみ出して表示されてしまいます。
たとえばA4サイズくらいのページだとしますと画像はA4が3枚分くらいまで下につながってますので
通常ならスクロールしないページが、画像がある分3ページほどスクロールされるのです。
（つまりこちらのページで言いますとCOPYRIGHT © BLACKFLAG.NET ALL RIGHTS RESERVED.の下に
画像が表示されてまだ下にスクロールされてしまいます。）
お手数をおかけしてすみませんがよろしくお願いします。
＞makoさん
コメントありがとうございます。
このクロスフェードビューアーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
＜script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”＞＜/script＞
はGoogleのAPIを使ってjQueryを使用しているので
そのままタグを記載していただいて問題ありません。
気になるようでしたらjQueryファイルをダウンロードして
相対で繋ぐ形でも大丈夫です。
その他の部分につきましては
実際に実装されているものを確認できていないので何とも言えないのですが
他のところで使用しているCSSが影響してしまって
動作に支障をきたすことも考えられますので
実際にサイトに組み込みながカスタマイズするのではなく
当記事でダウンロードできるサンプルファイルを
カスタマイズして理想の動作の形にしてから
実際のサイトデータに実装してみてはいかがでしょうか。
お試しください。
よろしくお願いします。
BlackFlag様
早速ありがとうございました。
CSSの部分に余計な記述が挿入されていて
うまく動いてなかったみたいで、画像がつらなっていたようです。
無事に動きました。
お手数をおかけして申し訳ございませんでした。
またよろしくお願いします。
4枚の画像にそれぞれリンクを付けると、画像の切替わりがおかしくなります。リンクを付けていないと正常に動くのですが、リンクをつけるにはどうしたら良いでしょうか。
＞udeさん
コメントありがとうございます。
フェード要素にリンクを張る際などには
—————————————–
・jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】
http://black-flag.net/jquery/20130109-4439.html
—————————————–
こちらのスクリプトを使用していただければ
実現できると思います。
お試しください。
よろしくお願いします。
始めまして、とてもすばらしいjuqeryです。
自分はjavascriptは解かってないのですが、これでひとつ質問があります。
サムネイルをクリックすると画像がフェードするのですが、テキストも付け足して
画像+テキストも変えるようにできますか？
＞dendoroviumさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
おそらく別記事で用意させていただいている
・jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】
http://black-flag.net/jquery/20130109-4439.html
こちらのサンプルにて、理想とされている動作が
実現できるのではないかと思っております。
ご確認ください。
よろしくお願いします。
こんにちは。
とてもすばらしいjuqeryです。
とても勉強になります。
全然違う話ですけど、
下記のサイトのように，↓
http://www.rakuten.ne.jp/gold/hotch-potch/
右側に、固定してる3つのバナーのように、ページに貼りたいんけど、
どうすれば、そのようにできますか？
お忙しいところ申し訳ございませんがよろしくお願いします。
＞jkmzさん
コメントありがとうございます。
当ブログのスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
スクリプトはまったく絡まず
CSSだけで実現できるかと思います。
記載いただいたサイトのCSSでは
——————-
position: fixed;
right: 0;
top: 90px;
z-index: 999;
——————-
これらの値が設定してあると思いますので
ブラウザの開発用ツールなどを使って
サイトのCSSがどう構成されているか
参考にしてみてください。
よろしくお願いします。
はじめまして。
２年前の記事に、今頃ご質問しまして大変恐縮です。
CSS・HTMLなど、全く分からない ど素人です。
すいません。
５年前に始めたFC２ブログなんですが、ちょこちょこ最近いじってまして、
トップページのひまわり画像を、変えようと 試みたら変えることが
出来ました。
（※ちなみに、FC２の共有テンプレを使用しています）
そして、ここで欲が出ましてｗ、このひまわりのところが、よくある自動で
切り替わるように出来ないかな？と思い、ここ１週間くらい試行錯誤してた
ところです。
そして、いろんなサイトを歩きまわって、このサイトで足が止まりました。
よーく見ると、コメントによるQ＆Aが実に充実してまして、
良心的なサイトだなーって親近感を感じ今回恥ずかしながら、ご質問させて
いただきました。
私は、みなさんみたいな中級以上のレベルではなく、全くの初心者ですが、
どうしても、この記事のようなスライド画像にしたく、
ご指導のほど、宜しくお願いします。
まず、何をしたらいいのかが全く分からず、
記事に書いてあるソース？コード？を自分のサイトのどの部分に書き換えれば
いいか、また、私のFC２ブログのテンプレ管理画面に
HTML編集画面と、CSS編集画面が別々にありまして、
どちらをいじるのかも分かりません。
すいません。
宜しくお願いします。
追記
過去のQ＆Aを見てもさっぱり理解できませんでした。
すいません。
サンプルダウンロードはしました。
これを、どう使うかでまた分かりません。
＞Kidokiさん
コメントありがとうございます。
このクロスフェードビューアーの使用をご検討いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
大変申し訳ありませんが
このコメント欄にてHTMLとCSSとスクリプトの基礎から
解説するのは少々厳しく感じております。
基本的には当記事内に書かれている
HTMLの内容をHTMLファイルに
CSSの内容をCSSファイルに、
スクリプトはHTMLファイルもしくは外部ファイルにして
使用していただく形になりますので
HTMLやCSSの基礎について解説されているサイトなども参考にして
組み込んでみていただけたらと思っております。
よろしくお願いします。
スライドショーの使いやすさもそうですが、
初心者にも丁寧に解説して下さっていて、とても有り難いサイトです。
早速、使わせて頂きたいと考えていますが、
配置する写真が、縦位置やサイズの違うものが混じった場合、
その写真が常に中央に来るようになるでしょうか。
＞あとむさん
コメントありがとうございます。
このスライドショースクリプトをご活用いただいている様で
嬉しく思っております。
画像中央寄せの件についてですが
当記事のスクリプトはimgタグのみの切り替えになっていますので
当ブログ別記事の
—————————————-
・jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】
http://black-flag.net/jquery/20130109-4439.html
—————————————-
こちらのパターンではliリストタグの切り替えにしてあるので
こちらの構成でliタグの中で画像が中央寄せになるように
CSS等で調整していただければ実現できるかと思います。
お試しください。
よろしくお願いします。
回答をありがとうございました。
すでに別の所で、同じような質問と回答があったのですね。失礼しました。
早速試してみました。
画像を中央寄せにする場合には
CSS側で「.viewer ul li」に対して「text-align: center」を追記し、
新たにCSS内に「.viewer ul li img」のセレクタを追加し「margin: 0 auto」を指定することで
スライドショーの中の画像は中央寄せになると思います。
上記の案内通りに処理をしてみましがた、写真で上下が同じサイズの場合、中央寄せになるのですが
写真上下のサイズが違う場合、写真が上側に寄って、下に余白が出来るのですが、
こちらも中央に寄せる方法があるのでしょうか？
重ねての質問で恐縮です。
ご返信ありがとうございます。
とりあえず、もう一度自力で頑張ってみます。
＞あとむさん
要素をエリアの中心に持っていく方法については
いろいろやり方はありますが
「css 上下中央」や「js 上下中央」と検索することで
CSSやJSを使って実現できる方法が色々と出てくると思いますので
使いやすいものを選んで試していただければと思います。
よろしくお願いします。
流れで追加の質問を重ねてしまいました。
失礼しました。
色々と探して試してみているのですが
中々、思い通りになってくれません。
でも、もう少し、頑張ってみたいと思います。
ありがとうございました。
できました！
いろいろと試行錯誤を繰り返していましたが
やっと、写真の天地左右中央揃えが完成しました。
お騒がせしました。
初めまして。
とても簡単な方法でスライドを実装できて、助かりました。
いつもは下記のスライドを使ってます。
h ttp://allabout.co.jp/gm/gc/417216/
ただ、上記のスライドでは画像が連番でないと使用できないので、そうでない画像を使う時に、こちらを使用したいと思ってます。
ただ、ひとつ質問です。
ブラウザはIE10ですが、最初の開始時に、最後の画像がまず表示されます。それから１番初めの画像に戻り、その後は順調にループします。
念のため、こちらの2013.05.23時に質問され、URLを公開されてる「広前タワー様のh ttp://www.geocities.jp/hirosakirecorder/tvdx_hirosaki.html」を閲覧させてもらいましたが、同じ現象です。
これでは、ストーリー性のある画像を並べる時、ちょっと困ります。
きちんと１番目の画像から表示する方法はないでしょうか？
よろしくお願いします。
＞光子さん
コメントありがとうございます。
このクロスフェードスライダーをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
当ブログの別記事になりますが
——————————————-
・jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】
http://black-flag.net/jquery/20130109-4439.html
——————————————-
こちらにてもろもろの動作を
再調整したパターンを用意してありますので
こちらをお試しいただければと思います。
（ご指摘の点も改訂しています）
よろしくお願いします。
早速のご回答、本当にありがとうございます。
改訂版で、バッチリ最初から動きました。
試しに改訂版で書いてあったように、同じclass名で複数設置したら、そちらも簡単に動いて感動しました。
ついでにもう一つ質問です。
小さな画像を急速に動かして、アニメgifのような動きをさせるのに、
改訂版で、fadeSpeed = 0にして、速度指定を上げ、animate({opacity:’1′}とかをいろいろ削除したら、そんな動きをだせました。でも、知識が無いので削除分が不安です。
fadeSpeed = 0にして、速度指定を上げるだけで、大丈夫でしょうか？
そのやり方でも、アニメgifのような動きはします。
教えていただけると、嬉しいです。
＞光子さん
改訂版にて理想の動作が実装できた様で
安心いたしました。
アニメーションスピードの速度を上げてGIFアニメっぽく見せる方法については
「fadeSpeed」と「switchDelay」の値を小さくすることで
スクリプト内の記述は削除せずに実現できるのではないかと思っております。
このスクリプトをその様な見せ方で使う発想は今まで無かったですが
おもしろいかもしれませんね。
お試しください。
よろしくお願いします。
それだけで、大丈夫なんですか！
よかったです。
複数設置も簡単だし、画像サイズも変更できるから、軽めの画像を使っていろいろやれそうです。
ほんとうに良いスクリプトに出会いました。
大切に使わせていただきます。ありがとうございました！
はじめまして。
jQueryについていろいろ調べていたらこちらのサイトにたどりつきました。
質問はこのようなフェードインフェードアウトする画像のひとつに、
別の画像を配置して別ページへリンクをかけたいのですが、
そのような作業は可能なのでしょうか？
テキストを配置するのは見かけたのですが画像を置いてクリックすると移動する
クロスフェード中に移動するというものを作りたいです><
＞tomoさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた内容についてですが
申し訳ありません。。
実装されようとしている動作の構成がよく分かりませんでした。。
当記事のスクリプトはimgタグのみの切り替えになっていますが
当ブログ別記事の
———————————————————–
・jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】
http://black-flag.net/jquery/20130109-4439.html
———————————————————–
こちらのパターンではliリストタグが切り替わる仕様になっておりますので
こちらの構成でliタグの中に各要素を配置して
CSSでレイアウトを調整してみていただくことでは如何でしょうか。
お試しください。
よろしくお願いします。
はじめまして。
HPリニューアルにつき、画像クロスフェードについて調べていたところ、こちらにたどり着きました。
素人の私でも大変わかりやすく、簡単に実装でき、すばらしいサイトだと思います。
質問なのですが、クロスフェードさせている画像を、ブラウザのサイズに合わせて伸縮させるということは
可能でしょうか？
フルスクリーンの背景ではなく、サイト内に設置した画像（横1024px：縦512px）を伸縮させたいのです。
ブラウザが最大の場合は拡大せずこのサイズのままで、ブラウザを小さくしていった場合のみブラウザに
合わせて、画像も縮ませたいのです。
よろしくお願いいたします。
＞ターザンさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
おそらく当ブログ別記事の
————————————————————
・jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法
http://black-flag.net/jquery/20131217-4909.html
————————————————————
こちらの動作で実現できるのではないでしょうか。
お試しください。
よろしくお願いします。
すでに提供していただいてたとは、確認もせず質問してしまって申しわけありません。
早速試させていただきました。
かゆいところに手が届くとはまさにこの事、これで理想のHPが完成しそうです。
本当にありがとうございました。
BlackFlagさんはじめまして。Yoshinoっていいます。
はじめに・・・、”jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法”の記事、もお、もお・・・ありがとうございました！！！！！！。
ネットショッピングしかしたことのない、PC超ド素人！もちろんHTML,CSS,JS,JQ・・・も今年の２月まで聞いたことのない私がHPにネットショップサイトの制作をはじめたんですが、TOPページにどーしてもフェードする画像をはっ付けたくて、もういろんなサイトを参考にさせていただきましたが出来ず、もうひとサイト参考にして出来なかったら業者に依頼しよって、あきらめた時BlackFlagさんの記事に出会いました。
画像がフェードしました～～～！！！！！！BlackFlagさんに感謝！感激！キャー～～！！！です。
また、頑張れそうです！
これから、BlackFlagさんの他の記事を隅から隅まで読んでJSの勉強させていただきま～す。
＞Yoshinoさん
コメントありがとうございます。
このクロスフェードスクリプトがお役に立った様で
嬉しく思っております。
Web制作を始めたばかりの方でも
こうして手軽に実装できた、というお声をいただくと
こちらとしてもとても安心します。
他にもいろいろと紹介させていただいておりますので
あれこれお試しいただけると幸いです。
よろしくお願いします。
はじめまして。
現在会社のホームページのトップ画面で4枚の画像をFLASHで見せています。
数年前に知り合いにお願いしてホームページ・ビルダー17で作っていただきました。
しかし、上司からipadやiphoneからでもFLASH画像が見れるようにしろと言われ、知り合いにお願いしようと思ったのですが、連絡がとれなくなってしまい、私がやることになりました。
超超初心者なので、サンプルをダウンロートした後どうしたらいいかわからずコメントさせていただきました。
大変失礼ではありますが、お力をお貸しいただければ幸いです。
よろしくお願い致します。
＞ eguchiさん
コメントありがとうございます。
このクロスフェードビューアーの使用をご検討いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
大変申し訳ありませんが
このコメント欄にてHTMLとCSSとスクリプトの基礎から
解説するのは少々厳しく感じております。
基本的には当記事内に書かれている
HTMLソースの内容をHTMLファイルに
CSSセレクタの内容をCSSファイルに、
スクリプトはHTMLファイルもしくは外部ファイルにして
使用していただく形になりますので
HTMLやCSSの基礎について解説されているサイトなども参考にして
組み込んでみていただけると幸いです。
よろしくお願いします。