jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】
一年以上前の記事になりますが
「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法」
と題して、画像がクロスフェードするだけの
シンプルな画像ビューアーを実装するスクリプトを紹介しましたが
紹介後、１ページ内に複数設置やリンクを張ったり
キャプション（テキスト）を追加するパターンなどなど
数多くの様々なカスタマイズに関するご要望が届きました。
もともと単純に画像を切り替えるだけの想定でシンプルに作成していたものだったので
その様なパターンを実装するには何かと面倒なスクリプトカスタマイズが必要だったので
もっと応用が利く形での画像ビューアー（コンテンツビューアー）スクリプトを
作成してみたので紹介してみます。
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】
まずは動作のサンプルから。
「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】」サンプルを別枠で表示
シンプルな形で5枚の画像を
自動再生＆無限ループし続けます。
全体構成についてまずはHTMLから。
[html]
◆HTML
[/html]
前回のクロスフェードビューアーでは
＜img＞タグを使って切り替えていましたが
今回は＜ul＞リストを使って構成しているので
切り替える一つひとつの要素は＜li＞リスト要素になっています。
画像を配置するだけでなくリンクを張ったり
テキストなどのキャプションを配置したりするには
＜li＞の中で個別に自由にレイアウトすることが可能になっています。
そしてこのHTMLに対するCSSは以下の様になります。
[css]
◆CSS
.viewer {
margin: 0 auto;
width: 400px;
height: 300px;
text-align: left;
overflow: hidden;
}
.viewer ul {
width: 400px;
height: 300px;
text-align: left;
overflow: hidden;
position: relative;
}
.viewer ul li {
top: 0;
left: 0;
width: 400px;
height: 300px;
display: none;
position: absolute;
}
[/css]
＜li＞タグは「position:absolute;」になっている必要がありますが
その中に入る要素についてはそれぞれ任意の指定で問題ありません。
そして実際の動作を実行させるスクリプトは以下の様になります。
[javascript]
◆SCRIPT
[/javascript]
スクリプト開始部分にある設定値の内容は以下の様になっています。
| $setElm = $(‘.viewer’) | 対象にするブロック要素名（IDでもクラスでも可） |
|---|---|
| fadeSpeed = 1500 | フェードスピード |
| switchDelay = 5000 | 切り替わるまでの待機時間 |
これらの設定値を変更することでもろもろ調整が可能になっています。
対象のベースの要素がIDでもクラスでも可能になっているので
1ページ内に複数設置の際にはクラスを使用することで
複数設置することが可能になっています。
1ページ内に2つのクロスフェードビューアーを設置して
それぞれにキャプションを付けた形でのサンプルは
以下の様になります。
凝った演出などはありませんが
シンプルに画像などを切り替えるだけの動作が必要な際に
手軽に使えると思います。
クロスフェードの画像の切り替えビューアーが必要になった際に是非。。。
なんだかんだで、こういうシンプルなのが、一番良いですね。
早速使わせていただいております。
スムーズに切り替わって望みどおりのものになりました。
ありがとうございました！！
＞Keiさん
コメントありがとうございます。
こちらのスクリプトにて理想の動作が実装できた様で安心致しました。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
説明も対応も親切で大変お世話になってます。
とっても使いやすいです（なにより猫がかわいい)。
質問なんですが、
複数設置した場合で、それぞれに異なるフェードスピードやディレイ時間を指定したい場合は
どのように記述すればよいでしょうか？
＞猫好きさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
現状のスクリプトでは複数設置しても全て同じ時間設定になっております。
それぞれ個別に時間を設定できるパターンも用意が出来ましたら
ここでまた紹介させていただこうかと思っております。
よろしくお願いします。
いつもお世話になっております。
いつもたいへん、わかりやすい説明で非常に感謝しております。
初期のクロスフェードで実装させてもらって動いていたのですが、
楽天hpにtestであげたところ、初回の画像が表示されず、2回目の画像から表示
されるようになりました。（画像合計8枚をフロスフェードさせています）
ブラウザはＩＥ８で行って、上記結果となりました。
cromeで試してみると、うまく、表示されます。
このような場合の回避方法はありますでしょうか？（ハック対策？）
当方は最近、ようやく、HTML、CSSを理解し、scriptを勉強中の段階で
まだまだ、初心者なのですがご指導のほど、よろしくお願いします。
まずは一度、この最新バージョンのリスト形式にソースを変更して試してみたいとは
思うのですが、何かヒントをお持ちであれば、ご教授、お願いできますでしょうか？
勉強させていただいてます。
仕様にあたって ご質問なのですが、画像がマウスオーバーされたとき 画像の切り替えをストップさせることはできるのでしょうか？
お時間が許すようでしたら、ご教授いただけると幸いです。
いつもお世話になっております。
いれましたメールですが、すいません、私の手違いでした。
元画像転送がおかしくなっており、画像がCYMK画像となっており、RBG画像にしない
とうまく表現されないようです。
今回、非常に勉強になりました。
今後もscriptを参考にさせてもらいますので、よろしくご配慮のほど、お願いします。
でも、つくづく思うのですが、このサイトは本当に参考になります。
とてもよいサイトだと思います。
＞yuroさん
コメントありがとうございます。
クロスフェードビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実際の動作環境を確認できていないので何とも言えないのですが
思い当たることとすれば、レンダリングが完了する前に
動作が実行されてしまっている影響かな、と思っています。
スクリプト全体を
—————————————————————–
$(function(){
$(window).load(function(){
～ここにスクリプトを記述～
});
});
—————————————————————–
この様な形で囲うことで
解消される可能性があるのではないかと思っています。
お試しください。
よろしくお願いします。
＞suzukiさん
コメントありがとうございます。
ご質問いただいた件についてですが
ビューアーの設置が一つの場合は可能なのですが
当記事で紹介している様な複数設置の場合は
ちょっと難しいかもしれません。。
また何か方法が思いついたらここで紹介させていただきます。
よろしくお願いします。
ピンバック: jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法(自動でスライドする動作などは付けていません。) | webサイト作成に関する自分メモ
いつもお世話になっておりますm(_ _)m
こちらのビューアで、画像をランダム表示することは可能でしょうか？
もしそのような設定値などありましたら、教えていただけると幸いです。
よろしくお願いいたします。
＞fumicosさん
コメントありがとうございます。
ご質問いただいたランダム表示の件ですが
当記事で紹介しているスクリプトではその様な想定はしておらず
オプション設定などはありません。。
またその様な動作の画像ビューアーができましたら
ここで紹介させていただきます。
よろしくお願いします。
jQueryCrossFadeContentsViewer(キャプション付きスライドショー)のフェード切り替えしに惹かれ、スクリプト・ファイルをダウンロードさせていただきました。自分で写した画像に置き換えていろいろ試しています。photo【1】, photo【2】, photo【3】, photo【4】, photo【5】の箇所がキャプションになると思うのですが、長いキャプションになるとキャプションを読み終わらないうちに次の画像に切り替わってしまいます。switchDelay =5000 の数値を 6000, 7000～ にすればいいのでしょうが、そうすると全体に間延びしてしまうので、何とか「停止」ボタンと「開始」ボタンを設置したいのですが、コピーさせていただいた以下のスクリプトのどの部分をどのようにすればいいか全くわからないので、ご教示願えないかとメールさせていただきました。何とぞよろしくお願いいたします。
色々検索していてこのサイトに辿り着きました。
ひとつご質問させて頂きたくコメントさせて頂いております。
こちらの複数同時にクロスフェードさせるjsですが、
これに左右にボタンをつけて「次へ」＋「戻る」などの機能をつけ、
更にループする（1枚目→2枚目→3枚目→1枚目に戻る→ループ）ことは可能でしょうか…？
js初心者なのですが、
何卒ご教授頂ければ幸いです…。
よろしくお願いいたします…；；
＞村上直一さん
コメントありがとうございます。
このクロスフェードビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件ですが
キャプション部分には特に効果は加えておりませんので
おそらくCSSでの高さなどの設定の問題なのではないかと思われます。
サンプルファイルでは例として1行のテキスト枠を用意していますが
長い場合などはCSSなどでレイアウトを調整していただく形になります。
「停止」と「開始」のボタンについては
その様なボタンを実装させることも可能かと思いますが
あまりユーザーに親切なUIではなくなってしまう気もしています。
またその様な動作のビューアーができましたら
ここで紹介させていただきます。
よろしくお願いします。
＞MYさん
コメントありがとうございます。
このクロスフェードビューアースクリプトをご活用いただき
嬉しく思っております。
ご質問いただいた件ですが
「次へ」＋「戻る」などのボタン機能をつけることも可能なのですが
またその様なサンプルを作る時間ができましたら
ここで紹介させていただきたいと思っております。
よろしくお願いします。
この度使わせて頂こうと思っており、テストをしているところです。
690x248pxある画像をクロスフェードさせたいのですが、
クロームですと問題なく実行されるのですが、
IE9では右側に50pxほどずれて実行されます。
ブラウザの違いで出てしまう現象なのでしょうか？
それともサイト内の他のCSSが影響しているのでしょうか？
お時間ございましたらご教授頂けると幸いです。
よろしくお願いします。
＞inopiさん
コメントありがとうございます。
ご質問いただきました件についてですが
こちらでも「690pxx248px」で検証してみましたが
ChromeでもIEでも位置のズレは発生せずに
正常に動作しました。
おそらく実装後に他のCSSが効いてしまっているか、
もしくはもともとブラウザリセットが
きちんとされていないのではないかと考えております。
サンプルデータを「690pxx248px」に変更して
動作の方、お試しください。
よろしくお願いします。
こんにちは。とてもシンプルで、しかも一枚目にフェードインが入ってるものがなかなか見つからなかったのでとても助かります！
もしできれば、画像の順番をランダムにできるものはないのでしょうか…
お忙しいところすみません！他になかなか希望のものが見つからないので、ぜひ教えていただきたいです。
よろしくお願いいたします。
＞ねこまるさん
コメントありがとうございます。
ご質問いただきましたランダム表示についてですが
当記事で紹介しているスクリプトを
その様な仕様を想定していないので
実現するとなると新たに一からスクリプトを組んで作ることになりそうです。
またその様なサンプルができましたら
ここで紹介させていただきたいと思います。
よろしくお願いします。
いつもお世話になっております。
クロスフェードの技術を使わせてもらって大変、助かっております。
ありがとうございます。
実際にURLで示しましたように、稼動しているのですが、specの遅いＰＣで
再生しますと、scriptの最初の読み込みがみえてしまい、会社より修正するように
指示がかかってしまいました。specの良いＰＣでは一瞬で読み込みますので
まったく、初期の読み込みは見えないのですが、何かよい解消方法はないでしょうか？
このクロスフェードは大変に社内でも好評で是非とも使用していきたいとは
思っているのですが、この問題をクリアする必要がでてきまして、何か良い方法は
ありませんでしょうか？よろしくご指導お願いします。
＞yuroさん
コメントありがとうございます。
クロスフェードスクリプトを実際に
サイト制作にご使用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
以前のコメントで書かせていただいた
スクリプト全体を
—————————————————————–
$(function(){
$(window).load(function(){
～ここにスクリプトを記述～
});
});
—————————————————————–
この様な形で囲うことで
レンダリング完了後にスクリプトが実行させることになるので
問題とされている事象は解消されるのではないかと思っています。
お試しください。
よろしくお願いします。
早速のお返事ありがとうございます。
すぐにソースを
$(function(){
$(window).load(function(){ ←ここを追加
～ここにスクリプトを記述～
}); ←ここを追加
});
上記のように修正してみたのですが、結果は変わらずでした。
specの遅いＰＣでは画像読み込みがでてしまう形です。
他になにか手はありますでしょうか？
すいません、追記です。
例えば、スクリプトで画像を読み込みする前に通常画像を表示させておいて
スクリプト画像を裏で読み込み、完了後、通常画像からスクリプト画像へ切り替えするなどの方法はありますか？
これができれば、パラパラ読み込みが見えないのかもと思いまして。。。
なんとか、クロスフェードを採用したくて、苦慮しております。
よろしくご指導のほどをお願いします。
＞yuroさん
ご連絡ありがとうございます。
実装されているサイトを見る限り
旧タイプのスクリプトで実装されているようですので
当記事で紹介している改定版スクリプトを使ってお試しください。
参考までにウィンドウ読み込み後の
実装パターンでのサンプルも用意しましたので
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryCrossFadeContentsViewer/jQueryCrossFadeContentsViewerLoad.zip
このサンプルファイルを直接サーバにテストアップしていただき
スペックの遅いPCで確認してみていただく方法でもいいかもしれません。
スクリプトと併せてCSSに関しても
変更部分がありますのでご注意ください。
ご確認よろしくお願いします。
ありがとうございます。
じっくり検証してみたいと思います！
また、ご報告させてもらいます。
こんにちは！
丁寧な書き方とわかりやすさで、初心者のわたしでも設置することができました。
感謝致します。
しかし、ドロップダウンメニューの下に設置したところ、スライダーが最前面に来てしまい、ドロップダウンのメニューが画像で隠れてしまうのです。。。。。
メニューが何か関係あるだろうと思い、新しく他のメニューを作成してみたのですが、効果は無く、お手上げになってしまいコメントを残していただきました。
ご教授いただけましたら幸いです・・・・！
使用メニュー
http://www.red-team-design.com/css3-dropdown-menu
http://allabout.co.jp/gm/gc/416557/
すみません、追記させて頂きます。
重なる現象が起きてしまうのはIE７、８です。
メニューによって引き起こされる問題でしたら大変恐縮です。。。
ではでは、失礼致します！
＞なこさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件についてですが
実装されているページを確認する限り
ドロップダウンで表示するリストに「z-index」が入っていないことから
発生するのではないかと思われますので
CSSで記述している
—————————————
div.menubar ul#menu ul.sub {
—————————————
の中に
—————————————
z-index: 9999;
—————————————
を追加することで
解消されるのではないかと思っております。
お試しください。
よろしくお願いします。
お返事ありがとうございます！
メニュー部に z-index: 9999; を置いたところ、無事最前面にメニューが表示されました！！！！！
しかし、IE７だとやはりクロスフェード画像の後ろに隠れてしまい。。。。。。。。。
クロスフェードスライダーCSSにz-index: 1;を置いてみたがダメでした。。
しかし、z-index: -1; を試しに置いてみるとIE７でもメニューが見えるようになったんです！！！！！！
なぜ-1だと大丈夫なのかわからないですが、無事解決しました。
今回のクロスフェードスクリプトの設置で、外部CSSやJQuery、大変勉強になりました。
感謝致します！
シンガポールより
＞なこさん
無事に理想の動作が実装できた様で
安心致しました。
z-indexで大きな値を指定しても
IE7だと背面に行ってしまっていたんですね。。
「z-index: -1;」の指定は使ったことないですが
各ブラウザで問題なく動作しているならば
その方法でもいいかもしれませんね。
（できればIE7だけにその指定が効くようにするのが理想的かとも感じています）
また何かあればご連絡くださいませ。
よろしくお願いします。
いつも勉強に色々拝見させていただいております。
jQueryで画像がクロスフェードするシンプルな画像ビューアーを拝見し、画像5枚の一枚一枚にそれぞれリンクタグを貼りつけ、そのURLへを飛ばしたいと考え、素人ではございますが色々と思考錯誤＜div＞～＜／div＞等してみたのですがまったく出来ませんでした。
＜div＞＜A HERF＝＞写真＜／A＞＜／div＞ですと1番目の画像と最後の画像へのリンクしかできませんした。
また、無限に画像を繰り返し表示させる事も出来ず・・・是非お力をお貸し頂ければと思いますが宜しくお願いいたします。
＞MILKさん
コメントありがとうございます。
このクロスフェードスライドショースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
当記事で紹介しているHTML構成は
クロスフェードさせる要素は＜li＞で構成しておりますので
リンクタグを追加させる場合は
＜div＞などに変更する必要はなく
———————————————–
＜li＞＜a href=”#”＞＜img src=””＞＜/a＞＜/li＞
———————————————–
この様な構成にすれば実現できるとかと思っております。
お試しください。
よろしくお願いします。
いつもありがたくスクリプトを重宝させて頂いております。
ループさせない方法があればご指導頂きたいのですが。
お時間あるときにでも。
こんにちは！
前回はメニューとのかぶりの件で大変おせわになりました。
またまた質問させていただきます・・・・！
画像の３枚目からリンクを貼っているのですが、
IEではリンクが表示されますが、グーグルクロームではリンクが表示されないことに気づきました。。
その他の部分は特に問題ないのですが。。。。。
コード等が欠けているのかともう一度実装してみましたが、変わりはありませんでした。
このページのjQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】を使わせていただいております。
お時間あるときにご教授頂きましたら幸いです(>_<)
失礼します～
＞shadowさん
コメントありがとうございます。
このクロスフェードスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
このスライドショーではループさせないパターンは想定しておらず
現状ではその様な動作は厳しいと思っております。
同スライドショーの旧記事
——————————————————
・jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法
http://black-flag.net/jquery/20110525-3120.html
——————————————————
こちらの記事のコメント（上の方）にて
固定の枚数でクロスフェードさせるサンプルも用意していますので
一度そちらをご確認いただけると幸いです。
よろしくお願いします。
＞なこさん
コメントありがとうございます。
ご質問いただいた件についてですが
こちらでも当記事でダウンロードできる
サンプルファイルを使って試してみましたが
3枚目からリンクを張ってもGoogle Chromeでも
正常にリンクが動作しました。。。
サンプルファイルを使っても
同様の現象が起こるようでしたら
OS環境等をお知らせいただけると幸いです。
よろしくお願いします。
わたしも、再度またサンプルを置き換えてみましたが、クロームとIE７、１０ではリンクは現れませんでした。。
z-index: -1; /* メニューを最前面に配置 */
これを入れると、リンクが消えてしまうことがわかりました。
上のプルダウンメニュー、またはスライダーを他の物を使用してみようと思います。
色々とご相談ありがとうございました。
＞なこさん
「z-index」が影響していたようですね。。
このスライドショースクリプトは
シンプルな構成にしてありますので
ドロップダウンメニューをシンプルな構成のものに変更することで
解消される可能性もあるかもしれません。
もしくはIE7はだいぶシェアも少なくなっているので
対象外にしてしまうのも一つの手段かとも思います。
ご検討ください。
よろしくお願いします。
こんばんは、初めまして。
いつも大変役に立つ、親切な解説とアイディアありがとうございます。
サイト制作にあたって、いつも参考にさせていただいております。
今回のこちらの記事を実装してみたのですが、実は
CSSですでに画像の幅をデバイスの幅の９０％に表示させる記述を行っており、その上で何枚かの画像をこのクロスフェードさせたいのですが、クロスフェードのCSSでの画像の高さ指定がうまくできません（泣）
希望としてはクロスフェードする画像をすべて、デバイスの幅に合わせ、高さもそれにあわせて、自動的に、タテヨコ比率が問題なく変わるようにするためには、どのように記述すれば良いのでしょうか？
CSSにheight: auto;などと記述すると、クロスフェードする画像自体がすべて消えて表示されなくなったり、色々と試行錯誤しているのですが、うまく表示してくれません。
お忙しいところ、大変申し訳ないのですが、ご教授頂けますとすごく助かります。
なにとぞよろしくお願いいたします。
＞sun rizeさん
コメントありがとうございます。
このクロスビューアースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
当記事のスクリプトだと高さの値は
CSSで指定しておかなくてはいけません。
画面幅によってサイズを変換する場合は
当ブログ別記事の
——————————————————-
・jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法
http://black-flag.net/jquery/20130423-4566.html
——————————————————-
こちらのスクリプトを使って
サムネイル部分を「height:0」などとして非表示状態にすることで
同じような動作は実装できるかと思っております。
またサムネイルなしの画面幅に合わせた形での
シンプルなクロスフェードビューアーのスクリプトが出来ましたら
ここで紹介させていただきたいと思います。
よろしくお願いします。
はじめまして。
jQueryという言葉をここ最近きき、コレを機に自身のサイトもjQueryを使い、見栄えいいものにしたいと思い。製作しております。
そこでこのスライドショーをトップに持ってきたと思い、使用させていただておりますが、どうしても画像が中央表示できません・・・。
色々やってみたのですが、どうも上手くいきません。どの位置を修正すれば、このスライドショーを中央表示できるでしょうか？
お忙しい中と思いますが、教えていただけますと幸いです。
これからもこのサイトで勉強させていただきますね。
＞REDMANさん
コメントありがとうございます。
当記事のスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
画像を中央寄せにする場合には
CSS側で「.viewer ul li」に対して「text-align: center」を追記し、
新たにCSS内に「.viewer ul li img」のセレクタを追加し「margin: 0 auto」を指定することで
スライドショーの中の画像は中央寄せになると思います。
お試しください。
よろしくお願いします。
お返事ありがとうございました！
本当にこのサイトでjqueryを知り、導入する事でホームページつくりの枠が信じられないほどに広がりました。これからも楽しみにしております。
こんばんは、遅くなりまして申し訳ありませんでした。
ありがとうございます！
一度試してみます♪
はじめまして。
「jqqquery」「スライドショー」のワードで検索したところ
こちらのサイトのものが最も分かりやすかったので、
サイトに利用させていただいております。
こちらのコードでは画像がループし続けるという設定になっておりますが、
設定した最後の画像でスライドショーを停止するにはどのようにしたらよいでしょう？
お忙しいところお手数とは存じますが、ご教授お願いいたします。
＞westwoodさん
コメントありがとうございます。
このクロスフェードビューアーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
当記事で紹介しているスクリプトでは
ループを停止する想定はしておりません。
以前の記事
———————————————
・jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法
http://black-flag.net/jquery/20110525-3120.html
———————————————
こちらの記事のコメント欄にて
特定の枚数で停止させるサンプルファイルも用意しておりますので
そちらをご参照いただけますでしょうか。
よろしくお願いします。
全くの初心者です。お恥ずかしいのですがシンプルスライドに”キャプション”を
付けたいのですがシンプルのどこをどう変えればよいのですか？
シンプルスライドはどうにか動きました。
宜しくお願い致します。
＞全くの初心者さん
コメントありがとうございます。
記事およびサンプルファイルにて
キャプションつき動作サンプルも御座いますので
そちらをご確認いただければと思います。
よろしくお願いします。
初めまして。
jQueryを初めて使います。
とてもわかりやすくて、その通りに操作したらフェードしながらのスライドショーが私にも作れました。
が、画像の大きさが違うためかこちらのサンプルの様に上下中央、左右中央に配置されません。
同じような内容のコメントがないため（探せないのかもしれませんが）、質問させていただきます。
質問：使用する画像は全て同じサイズ、同じ向きでなければならないですか？
私が使用したい画像は600px×400pxサイズで縦長・横長が混在しています。
初心者の為、変な質問なのかもしれませんが、お教えいただきたく送信しました。
お時間のある時で構いませんのでご教示をどうぞよろしくお願いいたします。
＞ＭＡＫＵさん
コメントありがとうございます。
当記事のスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
スクリプト動作としては、幅と高さを決めうちにした＜li＞を
クロスフェードさせている構成になっておりますので
CSS等で＜li＞の中で画像が縦横中央になるように調整することで
可能かと思っております。
（スライドショースクリプト動作には影響しない部分になります。）
使用する画像は全て同じサイズ、同じ向きでなくても大丈夫です。
お試しください。
よろしくお願いします。
はじめまして！
こちらのスライドショーがシンプルで素敵なので
是非利用させて頂きたいと思っています。
とてもわかりやすく簡単なので初心者の私にも
念願のスライドショーができました。
質問させていただきたいことは、上の方と似た内容なのですが
私は、1つ目は、画像を全て800px×500pxで、
2つめは、画像を全て800px×650pxで設置したいのです。
この場合、CSSのどこを書き換えれば可能になるでしょうか？
今は、CSSの中も1つめのサイズにあわせて数字を書き換えているので、
2つめの下部が表示されない状態です。
初心者で申し訳ございません。
どうぞよろしくお願いします。
＞FUKUさん
コメントありがとうございます。
当記事のスライドショーをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
サンプルで言うスクリプト実行用のCSSクラス「.viewer」とは別に
実装するスライドショーのHTMLソースに固有のCSSクラスかIDを追加して
それに対して幅と高さをそれぞれ指定することで
スライドショーごとに幅と高さを設定することができると思います。
※スクリプト側で幅と高さの制御はしていないのでCSSの調整のみになります。
お試しください。
よろしくお願いします。
早々にお返事頂きありがとうございます。
例えば、CSS内のこの部分
.multiple {
margin: 0 auto;
width: 820px;
height: 500px;
text-align: left;
overflow: hidden;
}
.multiple ul {
width: 820px;
height: 500px;
text-align: left;
overflow: hidden;
position: relative;
}
.multiple ul li {
top: 0;
left: 0;
width: 820px;
height: 500px;
display: none;
position: absolute;
.multiple ul li span {
padding: 0 10px;
height: 30px;
line-height: 30px;
color: #fff;
background: #000;
display: block;
}
このクラス名を変えて
＜style TYPE=”text/css”＞
.multiple2 {
margin: 0 auto;
width: 820px;
height: 650px;
text-align: left;
overflow: hidden;
}
.multiple2 ul {
width: 820px;
height: 650px;
text-align: left;
overflow: hidden;
position: relative;
}
.multiple2 ul li {
top: 0;
left: 0;
width: 820px;
height: 650px;
display: none;
position: absolute;
.multiple2 ul li span {
padding: 0 10px;
height: 30px;
line-height: 30px;
color: #fff;
background: #000;
display: block;
}
＜/style＞
これを、スライドショーを設置するHTML内に書き足すということでしょうか？
これで＜div class=”multiple2″＞とすると、何も表示されなくなってしまいます。
スクリプトの
var $setElm = $(‘.multiple’),
この部分は、何もしなくて良いのでしょうか？
何度も質問して本当に申し訳ありません。
＞FUKUさん
スクリプトを実行させるクラスが「.multiple」ならば
HTMLには
———————————
・一つめ
＜div class=”multiple area1″＞
・二つめ
＜div class=”multiple area2″＞
———————————
のように「.multiple」とは別のクラスを一緒に指定して
「.multiple」には幅と高さ以外のCSSを指定して
「.area1」と「.area2」に幅と高さを指定してみてください。
お試しください。
よろしくお願いします。
こんにちは。
こちらのサイトを見つけて大変助かっています。
ひとつ、もし可能なのであれば教えていただきたいのですが、
最初の読み込みの時にフワっとフェードインさせず
普通に表示させる方法ってありますでしょうか？
画面内の数か所で使用しているのですが
画面を開くとその部分だけフェードインしてくるので
可能なのであれば他の部分と表示をそろえたいと思っています。
お手数ですが
どうぞよろしくお願いいたします。
＞santaroさん
コメントありがとうございます。
当記事のスライドショーをご検討いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
最初のフェードアニメーションは固有の処理になっているので
スクリプト16行目のアニメーション設定を切ることで
ページロード時にはフェードさせずにパッと表示することが可能です。
・スクリプト16行目改定後
findLiFirst.css（｛zIndex:’100′,opacity:’1’｝）；
※コピペする際は括弧等が全角になっているのですべて半角にしてください。
お試しください。
よろしくお願いします。
ご対応いただきありがとうございました。
バッチリです！
初めてコメントをさせて頂きます。
大変わかりやすく初心者の私も理解することができました。
ところが、実際に使用するとサンプルと同じように画像がフェードされているものの
その下に空間を開けてもう一つ画像が表示されてしまいます。
この現象を解消したいのですがお分かりになりますでしょうか？
本当にこういった知識がない為とても分かりにくい説明になってしまい大変恐縮なのですがご教授頂ければ幸いです。
＞ryuichiさん
コメントありがとうございます。
当記事のスライドショーをご活用いただいている様で
うれしく思っております。
ご質問頂きました件についてですが
実際に実装されているものを見てみないと何とも言えないのですが
CSSのブラウザリセットがされていない可能性もありますので
きちんとブラウザリセットをしていただくか、
もしくは、スライド用CSSの先頭に
—————————
.viewer,
.viewer * {
margin: 0;
padding: 0;
}
—————————
を追記してみてください。
よろしくお願いします。