レスポンシブjQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像(コンテンツ要素)がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので試しに作ってみたのを紹介してみます。jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法レスポンシブ動作はブラウザ枠を目いっぱいにするタイプなのでまずは別枠表示で動作サンプルから。最大幅を「800px」最小幅を「320px」としてブラウザ幅によってスライドショー部分が拡大縮小します。(どちらの値も変更可)簡単な動作仕様については以上になります。全体構成についてまずはHTMLから。alt=""></a></li></ul></div><!--/.viewer-->クラスやIDを付けた全体を囲う任意のブロック要素「.viewer」の中に<ul>リストを使って画像を並べます。(画像に対して<a>タグでリンクを張ってありますがリンクする必要がない場合はこのタグは不要です。)サンプルでは画像を6つにしていますがこれを増減させるには単純に<li>の数をそれぞれ同じ個数増減するだけです。これに対してCSSは以下の様になります。hidden;}スライドショー部分の幅や高さはスクリプト側から制御するのでCSS側では幅100%だけ入れておきます。ブラウザ幅の判別などもスクリプト側で制御するのでCSSでのメディアクエリー指定も特に使用しておりません。(実際にページに組み込む際にはページのレイアウト制御等々で使用することになると思いますが)オプションとしてスライドショーの左右にNEXT/BACKボタンを付けれるようにしてあるのでボタンの色など見た目はCSSで指定します。実際の動作スクリプトは以下の様になります。switchPrev(){findLi.not(':animated').parents('ul').each(function(){clearInterval(setTimer);slidePrev();timer();});}});});});</script>スクリプト開始部分にある設定値の内容は以下の様になっています。0.5左右NEXT/BACKの透過度これらの設定値を変更することでもろもろ調整が可能になっています。スクリプト全体はあまりシンプルと言える構成ではありませんが少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。画像サイズ(比率)によって各エリアの幅と高さを取得して制御していることもあり使用する(切り替える)画像は全て幅と高さを同サイズのものを使用する必要があります。「sideNavi」を「’on’」や「’off’」とすることで表示/非表示を切り替えることができます。(記述は「off」でなくても「on」じゃなければ何でもいいです・・・)表示したNEXT/BACKボタンをスライドショーエリアにカーソルが乗った時のみ表示させるようにするには「sideHide」を「’hide’」とします。常にボタンを表示させるにはここの値は「’show’」とします。(記述は「show」でなくても「hide」じゃなければ何でもいいです・・・)スライドショー自体は1ページ内に複数設置することも可能になっていますが複数設置した際にNEXT/BACKボタンをつけるとどうも動作がうまくいかなくなるようなので複数設置する場合はNEXT/BACKボタンは「off」にしてください。※不完全ですみません。左右のボタン表示「on」マウスオーバーでボタン表示「hide」パターンのサンプルを別枠で表示iPhoneやAndroid端末でも動作するハズ。レスポンシブ対応のサムネイル付きクロスフェードスライドショーを実装する際にぜひ。19:05いつも主様のサイトでお世話になっております。今回このクロスフェードビューアーと以前の記事のフリックスライダーttp://black-flag.net/jquery/20130514-4588.htmlを実装し、タブ切り替えしようとしたのですがコンテンツスライダーは動くのですが、クロスフェードビューアーが2枚目で止まってしまいます。コンテンツスライダーのHTMLを削除するとフェードビューアーはきちんと表示されます。競合するとフリックスライダーのHTMLの影響でフェードビューアーが2枚目で止まるようなのですがどう修正すれば両方動くようになるでしょうか。ご助言頂けたらと思います。1:44>セブンさんコメントありがとうございます。当記事のスクリプトをいろいろとご活用いただいている様で嬉しく思っております。ご質問いただきました件についてですが繰り返し処理をしている「setTimer」の名前が2つのスクリプト内で被っているせいかと思われますのでどちらか片方のスクリプト内の「setTimer」と書かれている箇所を全て「setTimerB」など別の名前に変えることで解消されるのではないかと思っております。(一つのスクリプト内に3~4箇所あります)お試しください。11:57こんにちは、はじめまして。学校で2つwebサイトを作った事があるだけの、超初心者です。合否結果待ちな感じです、と申し上げたら、どれくらい初心者であるか、わかっていただけるでしょうか...。今度友達のwebサイトを作る事になっていて、トップページのイメージ画像をスライドショーにしてみたいと思い、jQueryなるものを探していてこちらにたどりつきました。拡張子がjsとなっているものをダウンロードしなくてはいけない、と教わったのですが、こちらのサンプルファイルにはそれが入っていませんでした。いうことになっているのか、よく理解できません。できればご教授いただければありがたいです。0:34>たかりんさんコメントありがとうございます。このクロスフェードスクリプトをご活用いただいている様で嬉しく思っております。ご質問いただいた件についてですがjQueryを使用するにはまずjQueryのライブラリファイルをダウンロードする必要がありますので「jQuery」で検索してオフィシャルサイト(英語ページ)からダウンロードしてみてください。当記事のサンプルではGoogleAPIをいう物を使ってGoogle上にあるJSファイルを読み込んで使っています。外部ファイル」などで検索してやり方を探してみてください。11:01はじめまして。シンプルなものを探していてこちらにたどり着きました。使いやすくて良さそうですね。1:37>keijiさんコメントありがとうございます。このクロスフェードスクリプトをご検討いただいている様で嬉しく思っております。ご質問いただいた件についてですがもちろんプラグイン化した方がメリットも多くありますが当ブログで紹介しているサンプルに関しては今のところプラグイン化する予定はありません。プラグインのようにパッケージ化して簡単に使える、というよりかはスクリプトをこんな感じで書くと、こんな感じのものが実現できます、というスクリプトサンプルのつもりです。便利に使えるプラグインは他にいろいろありますので・・・よろしくお願いします。7:43いつも参考にさせて頂き、また使用させて頂いています。ねこの写真もとっても愛らしく...。本スライドショーを使わせて頂いているのですが、.viewer内img下の余白に悩まされています。サンプルデモでも、height500pxのimg下に4pxの余白が生じていますね。“スライドショー部分の幅や高さはスクリプト側から制御”ということですが、特に指定はないと思いますし、cssもいろいろ試したのですが、余白を無くすことは出来ません(>_<)無料で公開して下さっている中、面倒な問いだとは思いますが、もし対処法があるようでしたら教えてください。0:36>palさんコメントありがとうございます。このクロスフェードスクリプトをご活用いただいている様で嬉しく思っております。ご質問いただいた件についてですが下部の余白を消すには中に入る要素(UL)に対してCSSで「vertical-align:bottom」を設定すれば解消されると思いますがスクリプト側で解消できるように調整させていただきました。当記事のスクリプト48行目と62行目に新たにメインエリアに高さを指定する記述を追加しましたのでご確認いただければと思います。(ダウンロードサンプルファイルも反映済みです。