jQueryを使ってのレスポンシブに対応したスライドショーを実装する
いくつかのパターンを紹介してきましたが、
サムネイルも何もなしでただ画像（コンテンツ要素）がクロスフェードするだけのシンプルな
スライドショーのレスポンシブに対応したパターンの要望を多くいただいたので
試しに作ってみたのを紹介してみます。
jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法
レスポンシブ動作はブラウザ枠を目いっぱいにするタイプなので
まずは別枠表示で動作サンプルから。。
「jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法」サンプルを別枠で表示
サンプルでは6枚の画像を自動でクロスフェードで切り替え、
最大幅を「800px」最小幅を「320px」として
ブラウザ幅によってスライドショー部分が拡大縮小します。（どちらの値も変更可）
簡単な動作仕様については以上になります。
全体構成についてまずはHTMLから。
◆HTML <div class="viewer"> <ul> <li><a href="#1"><img src="img/photo1.jpg" alt=""></a></li> <li><a href="#2"><img src="img/photo2.jpg" alt=""></a></li> <li><a href="#3"><img src="img/photo3.jpg" alt=""></a></li> <li><a href="#4"><img src="img/photo4.jpg" alt=""></a></li> <li><a href="#5"><img src="img/photo5.jpg" alt=""></a></li> <li><a href="#6"><img src="img/photo6.jpg" alt=""></a></li> </ul> </div><!--/.viewer-->
クラスやIDを付けた全体を囲う任意のブロック要素「.viewer」の中に
＜ul＞リストを使って画像を並べます。
（画像に対して＜a＞タグでリンクを張ってありますが
リンクする必要がない場合はこのタグは不要です。）
サンプルでは画像を6つにしていますが
これを増減させるには単純に＜li＞の数をそれぞれ同じ個数増減するだけです。
これに対してCSSは以下の様になります。
◆CSS
/* .viewer
------------------------- */
.viewer {
margin: 0 auto;
width: 100%;
position: relative;
overflow: hidden;
}
.viewer ul {
width: 100%;
overflow: hidden;
position: relative;
}
.viewer ul li {
top: 0;
left: 0;
width: 100%;
position: absolute;
}
.viewer ul li img {
width: 100%;
}
/* sideNavi
------------------------- */
.viewer .btnPrev,
.viewer .btnNext {
margin-top: -25px;
top: 50%;
width: 50px;
height: 50px;
position: absolute;
z-index: 101;
}
.viewer .btnPrev {
left: 10px;
background: #ccc url(../img/btnPrev.jpg) no-repeat center center;
}
.viewer .btnNext {
right: 10px;
background: #ccc url(../img/btnNext.jpg) no-repeat center center;
}
/* =======================================
ClearFixElements
======================================= */
.viewer ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.viewer ul {
display: inline-block;
overflow: hidden;
}
スライドショー部分の幅や高さは
スクリプト側から制御するので
CSS側では幅100%だけ入れておきます。
ブラウザ幅の判別などもスクリプト側で制御するので
CSSでのメディアクエリー指定も特に使用しておりません。
（実際にページに組み込む際にはページのレイアウト制御等々で使用することになると思いますが）
オプションとしてスライドショーの左右にNEXT／BACKボタンを
付けれるようにしてあるのでボタンの色など見た目はCSSで指定します。
そして実際の動作スクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(window).load(function(){
var setElm = $('.viewer'),
setMaxWidth = 800,
setMinWidth = 320,
fadeSpeed = 1500,
switchDelay = 5000,
sideNavi = 'off', // 'on' or 'off'
sideHide = 'hide', // 'hide' or 'show'
naviOpc = 0.5;
setElm.each(function(){
var targetObj = $(this),
findUl = targetObj.find('ul'),
findLi = targetObj.find('li'),
findLiFirst = targetObj.find('li:first');
findLi.css({display:'block',opacity:'0',zIndex:'99'});
findLiFirst.css({zIndex:'100'}).stop().animate({opacity:'1'},fadeSpeed);
function timer(){
setTimer = setInterval(function(){
slideNext();
},switchDelay);
}
timer();
function slideNext(){
findUl.find('li:first-child').not(':animated').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'99'});
}
function slidePrev(){
findUl.find('li:first-child').not(':animated').css({zIndex:'99'}).animate({opacity:'0'},fadeSpeed).siblings('li:last-child').css({zIndex:'100'}).animate({opacity:'1'},fadeSpeed).prependTo(findUl);
}
targetObj.css({width:setMaxWidth,display:'block'});
// メイン画像をベースにエリアの幅と高さを設定
var setLiImg = findLi.find('img'),
baseWidth = setLiImg.width(),
baseHeight = setLiImg.height();
// レスポンシブ動作メイン
function imgSize(){
var windowWidth = parseInt($(window).width());
if(windowWidth >= setMaxWidth) {
targetObj.css({width:setMaxWidth,height:baseHeight});
findUl.css({width:baseWidth,height:baseHeight});
findLi.css({width:baseWidth,height:baseHeight});
} else if(windowWidth < setMaxWidth) {
if(windowWidth >= setMinWidth) {
targetObj.css({width:'100%'});
findUl.css({width:'100%'});
findLi.css({width:'100%'});
} else if(windowWidth < setMinWidth) {
targetObj.css({width:setMinWidth});
findUl.css({width:setMinWidth});
findLi.css({width:setMinWidth});
}
var reHeight = setLiImg.height();
targetObj.css({height:reHeight});
findUl.css({height:reHeight});
findLi.css({height:reHeight});
}
}
$(window).resize(function(){imgSize();}).resize();
// サイドナビボタン（有り無し）
var agent = navigator.userAgent;
if(sideNavi == 'on'){
targetObj.append('<a href="javascript:void(0);" class="btnPrev"></a><a href="javascript:void(0);" class="btnNext"></a>');
var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnPrevNext = targetObj.find('.btnPrev,.btnNext');
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
btnPrevNext.css({opacity:naviOpc});
} else {
btnPrevNext.css({opacity:naviOpc}).hover(function(){
$(this).stop().animate({opacity:naviOpc+0.2},200);
},function(){
$(this).stop().animate({opacity:naviOpc},200);
});
}
if(sideHide == 'hide'){
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
btnPrevNext.css({visibility:'visible'});
} else {
btnPrevNext.css({visibility:'hidden'});
targetObj.hover(function(){
btnPrevNext.css({visibility:'visible'});
},function(){
btnPrevNext.css({visibility:'hidden'});
});
}
}
btnPrev.click(function(){switchPrev();});
btnNext.click(function(){switchNext();});
}
// ボタン移動動作
function switchNext(){
findLi.not(':animated').parents('ul').each(function(){
clearInterval(setTimer);
slideNext();
timer();
});
}
function switchPrev(){
findLi.not(':animated').parents('ul').each(function(){
clearInterval(setTimer);
slidePrev();
timer();
});
}
});
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| var setElm = $(‘.viewer’) | スライドショー全体を囲うブロック要素名（IDでも可） |
|---|---|
| setMaxWidth = 800 | スライドショー部分の最大幅 |
| setMinWidth = 320 | スライドショー部分の最小幅 |
| fadeSpeed = 1500 | フェードアニメーションスピード |
| switchDelay = 5000 | スライドアニメーション待機時間 |
| sideNavi = ‘off’ | 左右NEXT／BACKの表示／非表示（表示する場合は「on」） |
| sideHide = ‘hide’ | 左右NEXT／BACKのロールオーバーで表示切り替えON／OFF（常に表示させる場合は「show」等） |
| naviOpc = 0.5 | 左右NEXT／BACKの透過度 |
これらの設定値を変更することでもろもろ調整が可能になっています。
スクリプト全体はあまりシンプルと言える構成ではありませんが
少しの設定値を調整するだけで簡単に設置することは可能になっているかと思います。
画像サイズ（比率）によって各エリアの幅と高さを取得して制御していることもあり
使用する（切り替える）画像は全て幅と高さを同サイズのものを使用する必要があります。
オプション機能としてスライドショーの左右にNEXT／BACKのボタンを表示させるようにもしてあり、
「sideNavi」を「’on’」や「’off’」とすることで表示／非表示を切り替えることができます。
（記述は「off」でなくても「on」じゃなければ何でもいいです・・・）
表示したNEXT／BACKボタンをスライドショーエリアにカーソルが乗った時のみ
表示させるようにするには「sideHide」を「’hide’」とします。
常にボタンを表示させるにはここの値は「’show’」とします。
（記述は「show」でなくても「hide」じゃなければ何でもいいです・・・）
スライドショー自体は1ページ内に複数設置することも可能になっていますが
複数設置した際にNEXT／BACKボタンをつけるとどうも動作がうまくいかなくなるようなので
複数設置する場合はNEXT／BACKボタンは「off」にしてください。
※不完全ですみません。。
左右のボタン表示「on」マウスオーバーでボタン表示「hide」パターンのサンプルを別枠で表示
iPhoneやAndroid端末でも動作するハズ。
レスポンシブ対応のサムネイル付きクロスフェードスライドショーを実装する際にぜひ。。。
いつも主様のサイトでお世話になっております。
今回このクロスフェードビューアーと以前の記事のフリックスライダー
ttp://black-flag.net/jquery/20130514-4588.htmlを実装し、タブ切り替えしようとしたのですが
コンテンツスライダーは動くのですが、クロスフェードビューアーが２枚目で止まってしまいます。
コンテンツスライダーのHTMLを削除するとフェードビューアーはきちんと表示されます。
どうやら競合するとフリックスライダーのHTMLの影響で
フェードビューアーが２枚目で止まるようなのですが
どう修正すれば両方動くようになるでしょうか。
ご助言頂けたらと思います。
私のサイトです。
ttp://t-hayato.net/
＞セブンさん
コメントありがとうございます。
当記事のスクリプトをいろいろとご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
繰り返し処理をしている「setTimer」の名前が
2つのスクリプト内で被っているせいかと思われますので
どちらか片方のスクリプト内の「setTimer」と書かれている箇所を全て
「setTimerB」など別の名前に変えることで解消されるのではないかと思っております。
（一つのスクリプト内に3～4箇所あります）
お試しください。
よろしくお願いします。
こんにちは、はじめまして。
学校で2つwebサイトを作った事があるだけの、超初心者です。
2月にサーティファイのwebクリエイター能力認定試験上級を受験しまして、
合否結果待ちな感じです、と申し上げたら、どれくらい初心者であるか、
わかっていただけるでしょうか…。
今度友達のwebサイトを作る事になっていて、
トップページのイメージ画像をスライドショーにしてみたいと思い、
jQueryなるものを探していてこちらにたどりつきました。
とても恥ずかしい質問なのですが、jQueryを使う時は、
拡張子がjsとなっているものをダウンロードしなくてはいけない、と教わったのですが、
こちらのサンプルファイルにはそれが入っていませんでした。
どういうことになっているのか、よく理解できません。
できればご教授いただければありがたいです。
よろしくお願いいたします。
＞たかりんさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
jQueryを使用するにはまずjQueryのライブラリファイルを
ダウンロードする必要がありますので
「jQuery」で検索してオフィシャルサイト（英語ページ）から
ダウンロードしてみてください。
当記事のサンプルではGoogleAPIをいう物を使って
Google上にあるJSファイルを読み込んで使っています。
当記事のスクリプトはHTML内に記述するやり方と
外部ファイル化するやり方がありますので
「javascript 外部ファイル」などで検索して
やり方を探してみてください。
よろしくお願いします。
はじめまして。
シンプルなものを探していてこちらにたどり着きました。
とても使いやすくて良さそうですね。
欲を言えば、スクリプトが長文なのでプラグイン化されていればと思いましたが、
プラグイン化のご予定はありませんか？
＞keijiさん
コメントありがとうございます。
このクロスフェードスクリプトをご検討いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
もちろんプラグイン化した方がメリットも多くありますが
当ブログで紹介しているサンプルに関しては
今のところプラグイン化する予定はありません。
プラグインのようにパッケージ化して簡単に使える、というよりかは
スクリプトをこんな感じで書くと、こんな感じのものが実現できます、という
スクリプトサンプルのつもりです。
便利に使えるプラグインは他にいろいろありますので・・・
よろしくお願いします。
いつも参考にさせて頂き、また使用させて頂いています。
ねこの写真もとっても愛らしく…。
本スライドショーを使わせて頂いているのですが、.viewer内img下の余白に悩まされています。
サンプルデモでも、height500pxのimg下に4pxの余白が生じていますね。
“スライドショー部分の幅や高さはスクリプト側から制御”ということですが、特に指定はないと思いますし、cssもいろいろ試したのですが、余白を無くすことは出来ません(>_<)
無料で公開して下さっている中、面倒な問いだとは思いますが、もし対処法があるようでしたら教えてください。
よろしくお願い致します。
＞palさん
コメントありがとうございます。
このクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
下部の余白を消すには中に入る要素（UL）に対して
CSSで「vertical-align：bottom」を設定すれば解消されると思いますが
スクリプト側で解消できるように調整させていただきました。
当記事のスクリプト48行目と62行目に
新たにメインエリアに高さを指定する記述を追加しましたので
ご確認いただければと思います。（ダウンロードサンプルファイルも反映済みです。）
お試しください。
よろしくお願いします。
いつもblack-flag.netのサイトに助けられ、大変お世話になっています。
このクロスフェードビューアーを使用させていただきたく
サンプルファイルをダウンロードして設置も完了し、動作確認もできました。
jqueryが得意じゃない人にもわかるように親切に説明してくださり、ありがとうございます。
スライドショーの最後の画像で停止させたいのですが、そういったことは可能なのでしょうか？
よろしくお願いいたします。
＞chibicolonさん
コメントありがとうございます。
このクロスフェードスクリプトをご検討いただいている様で
嬉しく思っております。
スライドショーの最後で停止する動作については
その様なパターンでの作成も可能かと思っておりますが
現状のスクリプト構成では想定していない動作になっております。
またその様なオプションを追加できましたら
こちらの記事を更新させていただきます。
よろしくお願いします。
いつも参考にさせていただいてます。
お世話になっておりますthと申します。
javascript超初心者です。
初歩的な質問で申し訳ないのですがこちらのサンプルで自動再生なしのものにしたいのですが
他のサンプルの下記部分を本サンプルのjavascriptの最後に貼付けたのですがビューワーが表示されなくなってしまいます。
// 自動再生（有り無し）
if(autoPlay == ‘off’){
function timer(){
setTimer = setInterval(function(){
switchNext();
},delayTime);
}
timer();
}
オプションにautoPlay = ‘off’を追加しました。
こちらのサンプルでは構造的に自動再生は停止できないのでしょうか？
お手数ですがよろしくお願い致します。
＞thさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
自動再生についてですが
もともと画像を切り替えるだけの
スライドショー（左右のボタンはオプション）の構成なので
自動再生させないと画像を切り替える術が無くなり
ただの画像表示になってしまいます…
当スクリプトを使って自動再生させずに
左右のボタンのみでの切り替えにする場合は
スクリプトの24～29行目、105、107、112、114行目を
削除することで可能かと思います。
参考までにサンプルも用意しましたので
下記よりご確認ください。
http://black-flag.net/devel/jQueryResponsiveCrossFadeViewer/indexAutoPlayStop.html
よろしくお願いします。
こんにちわ、いつもブログ拝見しています！
どのスライドの猫さんもかわいいですね。
このスライダーを3カラムに分けた真ん中にいれたいのです、
でもなぜかサイズが#containerにフィットしてくれないのです、
スライダーの画像がはみでている感じです。
29%、40%、29%とカラムを分けました。
全体をwrapでくるんでいます。.viewerのcssはそのままです、
どうしてだろうと今日一日考えてみたんですけれど…分からず…
無料で公開していただいているものに質問するのは申し訳ないのですが、
どうぞ宜しくお願いいたします。
＞小林さん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実装されている画面を確認できないと何とも言えないのですが
真ん中のエリアの左右にpaddingなどが指定されていたりすると
その様なことになる可能性もありますので
周りのCSSの影響ふくめ再度確認していただければと思っております。
よろしくお願いします。
BlackFlag様
自動再生の件で投稿しましたthです。
返答ありがとうございました。
スムーズに解決することが出来ました。
サンプルまでご用意していただいてしまい申し訳ございません。
今後とも参考にさせてください。
よろしくお願い致します。
お忙しいところ申し訳ありません、
こんな感じなのですが…
重ね重ねすみません(^^;)
＞小林さん
URL確認させていただきました。
まず始めにHTML内ではidは1ページに1度しか使用できないので
「#container」が3つ存在しておりますがid名を分ける必要があります。
（同じ名前を複数使用する場合はclassを使います）
カラム分けしたレイアウトで当ビューアーを使用する場合には
スクリプト46行目で値を取ってくる対象を
入れ込むカラムに変更する必要があります。
参考までにご連絡いただいたソースを基に
調整したサンプルを用意しましたので
下記ページよりご確認ください。
http://black-flag.net/devel/jQueryResponsiveCrossFadeViewer/jQueryResponsiveCrossFadeViewer3ColumnTest/
※3つのカラムはid名を分け、真ん中のカラムを対象にしてあります。
ご確認よろしくお願いします。
Black Flagさま
カラム分けの質問をした小林です、
バッチリできました！
初歩的なミスもあり、大変申し訳ございませんでした、
ずっと悩んでいたので助かりました！
本当にありがとうございました。
これからもBlackFlagさんで勉強していきます！
はじめまして、ホームページをテキストエディタで作っています。
最近BlackFlagさんのページを知り、一生懸命勉強させて頂いています。
ありがとうございます。
ところで、
「jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法【改訂版】」
(2013/01/09記事)
の下のほうに「キャプション付き」のものが掲載されています。
このソースを参考に、
当ページのクロスフェードのスライドviewer画像の下部に、
このキャプションと同じものを付けたくて、
「index3.html」
～前略～
＜a href=”#1″ rel=”nofollow”＞画像1＜/a＞
＜a href=”#2″ rel=”nofollow”＞画像2＜/a＞
～攻略～
「common.css」
～前略～
.viewer ul li span {
padding: 0 10px;
height: 30px;
line-height: 30px;
color: #fff;
background: #000;
display: block;
}
～攻略～
と記述してみましたが、
どうしても画面上に「画像１」「画像２」という文字が出てきません。
を外して単に文字列を入れてみても、
画面に全く表示が出てこなくて、頭を抱えています。
もし、初心的ミスがありましたら、申し訳ございませんが、
よろしくお願い致します。
＞gokugokuさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
乗せるキャプションを＜a＞タグにするか＜span＞タグにするか等
HTMLとCSSの構成をきちんと整理し直すことが先決かと思います。
併せて、上に乗せるキャプションは「position:absolute」で
絶対値で位置指定する必要があります。
再度、構成からご確認してみてください。
よろしくお願いします。
>BlackFlagさま、ご返事ありがとうございます。
前回の自分の書き込みの中の＜ｓｐａｎ＞の表記(半角文字で書きました)が
３か所すべて消えてしまってました。自分が「＜」を全角にしなかった事によるミスです。すみません。
とりあえず、＜ｓｐａｎ＞の部分を全角文字で書いておきます。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～
「index3.html」
～前略～
＜a href=”#1″ rel=”nofollow”＞＜ｓｐａｎ＞画像1＜／ｓｐａｎ＞＜/a＞
＜a href=”#2″ rel=”nofollow”＞<ｓｐａｎ＞画像2＜／ｓｐａｎ＞＜/a＞
～攻略～
～～～～～～～～～～～～～～～～～～～～～～～～～～～～
と、
本文途中の
～～～～～～～～～～～～～～～～～～～～～～～～～～～～
＜ｓｐａｎ＞＜／ｓｐａｎ＞と記述してみましたが、
どうしても画面上に「画像１」「画像２」という文字が出てきません。
＜ｓｐａｎ＞＜／ｓｐａｎ＞を外して単に文字列を入れてみても、
画面に全く表示が出てこなくて、頭を抱えています。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～
です。
「position:absolute」を追加して探っておりました所、
原因は、何となくわかってきました。
「common.css」の
～～～～～～～～～～～～～～～～～～～～～～～～～～～～
.viewer ul li img {
width: 100%;
}
～～～～～～～～～～～～～～～～～～～～～～～～～～～～
のimg widthを 70%とかにして画像を縮小したら、ちゃんとキャプションが出てきました。
要は画像が100%で描画されていたので、どうしてもその下のテキスト文字が隠れてしまって、
出てこなかったようです。
もう少し、貴殿のソースを読めるように勉強、精進して参ります。
アドバイスありがとうございました。
Black Flagさん
ショップサーブのセンターフリーエリアにスライドショーを設置したく、検索してこちらのサイトに伺いました。
取り合えずフリーページに作成して見たところ、フェードアウト時に下部に残像が残ってしまいます。
取り除く方法はございますか？
Black Flagさんのこちらのページソース（http://black-flag.net/devel/jQueryResponsiveCrossFadeViewer/）より写真とサイズの変更及び文字の削除をしただけです。
※ＰＣに関してほとんど知識がありません。
宜しくお願い致します。
＞hideさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
おそらくスライドショーで使用するCSSが
読み込まれていないせいだと思われます。
記事内に書かれているCSSを
ページ内で読み込まれるようにしてください。
併せて、お知らせいただいたWebページ内で
当ブログで使用している「reset.css」ファイルへ
直リンクが貼ってあるようですが
そのような使い方はご遠慮願います。
直リンクでCSSファイルを使用せずに
ご自身のサーバ内に設置するようにしてください。
よろしくお願いします。
Black Flag さん
早速の回答ありがとうございました。
ご指摘の点を改善した後、公開したいと思います。
チンプンカンプンなので、良く調べてみます。
重ねてお礼申し上げます。
BlackFlag 様
初めまして。
こちらのサイトを拝見して、参考にさせていただきました。
右も左もわからない初心者なので、丁寧に説明してくれるサイトがあって助かりました。
質問なのですが、
スライダーの動作はうまくいきましたが、どうしてもスライダー画像の右と下の部分が切れてしまいます。
ウィンドウを狭くしていくと、さらに切れる幅が広がってしまいます。
画像の横幅も100％と指定しているのですがなぜでしょうか…
申し訳ありませんが、確認お願いします。
＞saitoさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
嬉しく思っております。
ご質問頂きました件についてですが
おそらくページ全体にCSSブラウザリセットの設定がされていない
影響と考えられます。
サンプルデータで読み込ませている「reset.css」のような
CSSブラウザリセットを設定するか
CSS内にスライダー部分の「margin」と「padding」の値を0にするように
—————————
.viewer,
.viewer * {
margin: 0;
padding: 0;
}
—————————
を追記してみてはいかがでしょうか。
お試しください。
よろしくお願いします。
＞BlackFlag 様
対応がとっても早くてうれしいです！ありがとうございます！
アドバイス通りに記述してみただバッチリうまくいきました！
初歩的なミスで申し訳ありませんでした…。
本当に助かりました！
ありがとうございました！
はじめまして。
外部ファイルに記述したら、画像が表示されなくなりました。
スクリプトを外部にした場合、
＜script type=”text/javascript” src=”js/spslider.js”＞＜/script＞
＜script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”＞＜/script＞
だけで紐付けしたらいいんですよね？
jsファイルには、＜script＞＜/script＞はいりませんよね？
＞mattyさん
コメントありがとうございます。
実際に組み込まれている画面を拝見させていただかないと
現象も不明で何とも言えないのですが
HTMLにJSファイルを読み込む際、
記載していただいた順番とは逆で
jQueryライブラリファイルを先に読むようにしてください。
外部にした際、＜script＞タグは不要です。
お試しください。
よろしくお願いします。
こんばんわ
はじめまして
初心者なのですが、
こちらの画像の表示順番をランダムにすることはできますか？
ランダムにする場合ですがどこに何を追加すればよいのでしょうか？
すみませんがよろしくお願い致します。
＞なおさん
コメントありがとうございます。
当記事のスライドスクリプトをご検討いただいている様で
うれしく思っております。
リストのランダム並べ替え動作については
当ブログの別記事で紹介させていただいております。
・jQueryでランダムに画像などコンテンツ要素をフェードインさせる方法
http://black-flag.net/jquery/20130327-4522.html
この記事の2つ目のサンプルスクリプトの6～19行目が
リストのランダム並べ替え動作になっておりますので
こちらをご参考にしていただければと思います。
お試しください。
よろしくお願いします。
はじめまして。
いつも参考にさせて頂いております。ありがとうございます。
よくある ◯ ◯ ◯ で今何枚目かを表示するナビゲーションを付けることは可能でしょうか？
設定などで可能でしょうか？もしくは追記が必要でしょうか？
ご多忙とは存じますがご教授頂ければ幸いです。
よろしくお願い致します。
＞メロさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご検討いただいている様で
うれしく思っております。
ご質問いただいたページネーションの件についてですが
当記事のスクリプト構成だと少々難しく思っております。
宣伝っぽくなってしまい申し訳ありませんが…
—————————————
・書籍「プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート」出版について
http://black-flag.net/jquery/20160202-5926.html
—————————————
こちらで同様のパターンも紹介しておりますので
ご参考にしていただけると幸いです。
当ブログでもそのような構成のスライドショーを
いつか公開させていただこうかと思っております。
よろしくお願いします。
はじめまして^^
いつも参考にさせていただいております。
分かりやすくて工夫溢れる解説を、ありがとうございます！
このスライダーを利用させていただいているのですが、
私の力では解決できない点が1つあり、コメントさせていただきます。
スライドが表示されるまでの数秒間、
スライダーの下にくるはずの要素が、
スライダーが入るべきところに一瞬表示されてしまいます。
サンプルページでも、
ページに移った一瞬の間、コピーライトが一番上に表示されて
そのあとに画像が入ってきています。
何か解決方法をご存知でしたら、教えていただきたいです。
自分でも色々試したのですがどうしてもわからず、
お忙しいところお手数をお掛けしますがよろしくお願いいたいます。
＞ricoさん
コメントありがとうございます。
レスポンシブクロスフェードスクリプトをご活用いただいている様で
うれしく思っております。
ご質問いただいた件についてですが
スライダー部分がリキッドになっていて
ページ読み込み後に高さを取得する必要があることから
そのような形になります。
回避策としてはスライドエリアにCSSで仮の高さを入れておくか、
スライドが読み込まれるまでページ全体（bodyタグ）を非表示状態にして、
読み込みが完了された時点で表示する、という構成になるかと思います。
bodyタグを非表示状態にするタイプのサンプルを用意しましたので
下記URLより動作をご確認ください。
http://black-flag.net/devel/jQueryResponsiveCrossFadeViewer/jQueryResponsiveCrossFadeViewerVisibility/
このサンプルのファイル一式は下記よりダウンロードできます。
http://black-flag.net/devel/jQueryResponsiveCrossFadeViewer/jQueryResponsiveCrossFadeViewerVisibility.zip
CSSでbodyタグに対して「visibility:hidden」を入れて
スクリプトの最後でbodyタグを「visibility:visible」にしています。
ご確認ください。
よろしくお願いします。
確認が遅くなって申し訳ありません。
早速ありがとうございます！
そして細かいご配慮ありがとうございます。早速試してみます^^
こんにちは！
blackFlagさんのクロスフェードスクリプト
とてもシンプルでステキですね。
こちらは超初心者です。
勉強させていただいています。
初歩的な質問で大変申し訳ないのですが、
スマホ版だけ画像の高さを変更したい（高くしたい）と思い、
スマホサイトのみ別画像を読み込まそうと触っていますが、
うまくいきません。
試したことは
・ulにクラスを付けPC用スマホ用２つのulを記述する。
・＜a href=”#1″ rel=”nofollow”＞・・・
のように記述する。
どちらもPCではうまく表示されましたが
スマホでは全く表示されませんでした。
お忙しいところ
本当に申し訳ありません。
こんなバカな私にもアドバイスがあればよろしくお願いいたします。
＞ちびさん
コメントありがとうございます。
当記事のクロスフェードスクリプトをご活用いただいている様で
うれしく思っております。
ご質問いただいた件についてですが
実際に実装されている画面を確認させていただかないと
何が問題なのか原因は調査することができません…
当スクリプトはページロード時に実行されるようにしてありますので
実行させるタイミング等を調整する必要があるのかとも想定されます。
よろしくお願いします。