前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作する
フリック／スワイプ動作UIをjQueryで実装する方法を紹介しましたが、
前回の単純なフリック／スワイプのUI動作に加えて、
自動で次の画像に切り替わるスライドショー動作と
メインビジュアル部分にNEXT／BACKのボタンを追加したパターンでの
画像ギャラリーを作ってみたので紹介してみたいと思います。
jQueryでフリック／スワイプ動作付きの自動再生スライドショーを作成する実験
まずは動作サンプルから。
一定の間隔で自動で次の画像に切り替わります。
画像の切り替えはサムネイルクリックの他、メインビジュアル部分の左右にあるNEXT／BACKボタンと
メインビジュアル部分をフリック／スワイプすることで切り替えることが可能になっています。
メインビジュアル部分にマウスオーバーしている間（フリック／スワイプ動作の間）は
自動再生機能は停止します。
この動作の全体構成について、
HTMLから。
◆HTML <div id="flickscroll"> <ul> <li><img src="img/photo01.jpg" width="400" height="400" alt="" /></li> <li><img src="img/photo02.jpg" width="400" height="400" alt="" /></li> <li><img src="img/photo03.jpg" width="400" height="400" alt="" /></li> <li><img src="img/photo04.jpg" width="400" height="400" alt="" /></li> </ul> </div><!--/#flickscroll--> <div id="flickthumb"> <ul> <li><img src="img/photo01.jpg" width="100" height="100" alt="" /></li> <li><img src="img/photo02.jpg" width="100" height="100" alt="" /></li> <li><img src="img/photo03.jpg" width="100" height="100" alt="" /></li> <li><img src="img/photo04.jpg" width="100" height="100" alt="" /></li> </ul> </div><!--/#flickthumb-->
HTMLは前回の記事の内容と同じです。
上部の＜div id=”flickscroll”＞がメイン部分にあたるソースになり、
下部の＜div id=”flickthumb”＞がサムネイル部分になります。
２つの＜div＞の中にはそれぞれにリストを入れ込みます。（ID名は変更可能）
HTMLはメイン用とサムネイル用の＜div＞と＜ul＞リストを用意するのみです。
リストの数はいくつでも増減可能です。
そしてこのHTMLソースに対してのCSSは以下の様に。
◆CSS
/* #flickscroll
--------------------------- */
#flickscroll {
margin: 0 auto;
width: 400px;
height: 400px;
text-align: left;
position: relative;
}
#flickscroll ul {
top: 0;
left: 0;
height: 400px;
position: absolute;
overflow: hidden;
}
#flickscroll ul li {
width: 400px;
height: 400px;
float: left;
display: inline;
overflow: hidden;
}
#flickscroll #moveprev {
top: 0;
left: -30px;
width: 30px;
height: 400px;
background: transparent url(../img/moveprev.jpg) no-repeat left top;
position: absolute;
cursor: pointer;
}
#flickscroll #movenext {
top: 0;
right: -30px;
width: 30px;
height: 400px;
background: transparent url(../img/movenext.jpg) no-repeat left top;
position: absolute;
cursor: pointer;
}
/* #flickthumb
--------------------------- */
#flickthumb {
margin: 10px auto;
width: 400px;
height: 100px;
text-align: center;
}
#flickthumb ul {
width: 400px;
height: 100px;
}
#flickthumb ul li {
width: 100px;
height: 100px;
float: left;
cursor: pointer;
display: inline;
}
#flickthumb ul li.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
/* =======================================
ClearFixElements
======================================= */
#flickscroll ul:after,
#flickthumb ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#flickscroll ul,
#flickthumb ul {
display: inline-block;
overflow: hidden;
}
CSSも前回の内容とさほど変わりませんが
NEXT／BACKボタンを形成するセレクタを追加してあります。
実際のフリック／スワイプ動作させる箇所「#flickscroll」で
全体の幅と高さの表示サイズを指定しています。
全体を囲うID「#flickscroll」の中に入る
リスト＜ul＞は「position:absolute」で絶対位置にして、
幅widthは＜li＞の数によってスクリプト側で計算して入れるので
ここでは指定しないようにしています。
サムネイル箇所についてはとくにスクリプト動作事態には影響しないレイアウト調整のみになっています。
そして実際に動作を実行させるスクリプトは以下の様になります。
◆SCRIPT
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $setMainId = $('#flickscroll');
var $setThumbId = $('#flickthumb');
var scrollSpeed = 300;
var delayTime = 5000;
var mainWidth = parseInt($setMainId.css('width')),mainHeight = parseInt($setMainId.css('height'));
$setMainId.wrapInner('<div id="flickmask"></div>');
var $setMaskId = $('#flickmask');
$setMaskId.css({width:(mainWidth),height:(mainHeight),position:'relative',overflow:'hidden',cursor:'pointer'});
var $setMaskUl = $setMaskId.children('ul'),
$setThumbUl = $setThumbId.children('ul'),
$setThumbLi = $setThumbUl.children('li'),
$setThumbLiFirst = $setThumbUl.children('li:first'),
$setThumbLiLast = $setThumbUl.children('li:last'),
listWidth = parseInt($setMaskUl.children('li').css('width')),
listCount = $setMaskUl.children('li').length,
leftMax = -((listWidth)*((listCount)-1));
$setMaskUl.each(function(){
$(this).css({width:(listWidth)*(listCount)});
});
var isTouch = ('ontouchstart' in window);
$setMaskUl.bind(
{'touchstart mousedown': function(e){
var $setMaskUlNot = $setMaskId.children('ul:not(:animated)');
$setMaskUlNot.each(function(){
e.preventDefault();
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
this.leftBegin = parseInt($(this).css('left'));
this.left = parseInt($(this).css('left'));
this.touched = true;
clearInterval(setTimer);
});
},'touchmove mousemove': function(e){
if(!this.touched){
return;
}
e.preventDefault();
this.left = this.left - (this.pageX - (isTouch ? event.changedTouches[0].pageX : e.pageX) );
this.pageX = (isTouch ? event.changedTouches[0].pageX : e.pageX);
if(this.left < 0 && this.left > leftMax){
$(this).css({left:this.left});
} else if(this.left >= 0) {
$(this).css({left:'0'});
} else if(this.left <= leftMax) {
$(this).css({left:(leftMax)});
}
},'touchend mouseup mouseout': function(e){
if (!this.touched) {
return;
}
this.touched = false;
var $setThumbLiActive = $setThumbUl.children('li.active');
if(this.leftBegin > this.left && (!((this.leftBegin) === (leftMax)))){
$(this).stop().animate({left:((this.leftBegin)-(listWidth))},scrollSpeed);
$setThumbLiActive.each(function(){
$(this).removeClass('active');
$(this).next().addClass('active');
});
} else if(this.leftBegin < this.left && (!((this.leftBegin) === 0))) {
$(this).stop().animate({left:((this.leftBegin)+(listWidth))},scrollSpeed);
$setThumbLiActive.each(function(){
$(this).removeClass('active');
$(this).prev().addClass('active');
});
} else if(this.leftBegin === 0) {
$(this).css({left:'0'});
} else if(this.leftBegin <= leftMax) {
$(this).css({left:(leftMax)});
}
slideTimer();
}
});
$setThumbLi.click(function(){
clearInterval(setTimer);
var connectCont = $setThumbLi.index(this);
$setMaskUl.stop().animate({left:(-(listWidth)*(connectCont))},scrollSpeed,function(){
slideTimer();
});
$setThumbLi.removeClass('active');
$(this).addClass('active');
});
$setThumbLiFirst.addClass('active');
$setThumbLi.css({opacity:'0.5'});
$setMainId.append('<div id="moveprev"></div><div id="movenext"></div>');
var $setPrevId = $('#moveprev');
var $setNextId = $('#movenext');
var $setPrevNextId = $('#movenext,#moveprev');
$setPrevNextId.css({opacity:'0.5'});
$setNextId.click(function(){
var $setThumbLiActive = $setThumbUl.children('li.active');
$setThumbLiActive.each(function(){
var listLengh = $setThumbLi.length;
var listIndex = $setThumbLi.index(this);
var listCount = listIndex+1;
if(listLengh == listCount){
$setThumbLiFirst.click();
} else {
$(this).next('li').click();
}
});
});
$setPrevId.click(function(){
var $setThumbLiActive = $setThumbUl.children('li.active');
$setThumbLiActive.each(function(){
var listLengh = $setThumbLi.length;
var listIndex = $setThumbLi.index(this);
var listCount = listIndex+1;
if(1 == listCount){
$setThumbLiLast.click();
} else {
$(this).prev('li').click();
}
});
});
slideTimer();
function slideTimer() {
setTimer = setInterval(function(){
var $setThumbLiActive = $setThumbUl.children('li.active');
$setThumbLiActive.each(function(){
var listLengh = $setThumbLi.length;
var listIndex = $setThumbLi.index(this);
var listCount = listIndex+1;
if(listLengh == listCount){
$setThumbLiFirst.click();
} else {
$(this).next('li').click();
}
});
},delayTime);
};
var agent = navigator.userAgent;
if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
$setThumbLi.hover(function(){
$(this).stop().animate({opacity:'1'},300);
},function(){
$(this).stop().animate({opacity:'0.5'},300);
});
$setPrevNextId.hover(function(){
$(this).stop().animate({opacity:'1'},300);
},function(){
$(this).stop().animate({opacity:'0.5'},300);
});
}
});
</script>
メイン部分の＜div＞要素の幅と高さの値を元に
フリック／スワイプ動作でスライドさせる＜ul＞の幅やスライドさせる距離など計算しています。
スクリプト開始部分にある
————————————————
var $setMainId = $(‘#flickscroll’);
var $setThumbId = $(‘#flickthumb’);
var scrollSpeed = 300;
var delayTime = 5000;
————————————————
は上から
————————————————
・該当するメインエリアのID名
・該当するサムネイルエリアのID名
・フリック／スワイプ動作でスライドさせた時のスライドスピード
・次の画像に切り替わるまでの待機時間
————————————————
となっているので、
値を変更することでカスタマイズが可能です。
スクリプトも少々作りが荒いところもあり、
もう少し簡略化したかったのですが
今のところこれくらいが限界かと。。
前回の記事の応用で実験的に作ってみたフリック／スワイプ動作付きのスライドショーですが
この様な画像スライドギャラリーが必要な際のご参考に是非。。
始めまして。こんにちは。
こちらのプログラムを利用してサイトを作成させていただいているのですが、
一つ質問があり、コメントさせていただきます。
もし、お時間があれば、教えていただけましたら幸いです。
デフォルトの状態だと、
スワイプや、フリック中に、縦方向のスクロールがロックされていると思うのですが、
縦方向のスクロールを可能にすることは簡単にできますでしょうか？
>toureさん
コメントありがとうございます！
このフリックスライドショーをご活用いただいているようで
嬉しく思っております。
ご質問頂きました縦方向の動作についてですが
ここで紹介させていただいているスクリプトでは
横方向のみの動作にしているので簡単にはいかないかもしれません。。
横向きに対しての値を制御しているので
その部分をすべて縦の向きに制御するために
—————————————–
・Xで制御している値をYに
・widthで制御している値をheightに
・leftで制御している値をtopに
—————————————–
など、調整が必要になるかと思っております。
また時間ができましたら
縦型のフリックスライドショーも紹介してみたいと思います。
よろしくお願いします。
こんにちは。
遅くなってしまいすみません。
プログラム、利用させていただきありがとうございます。
また、ご丁寧に返信いただきありがとうございます。
そうなのですね。せっかく調整のヒントを記載いただいたのですが、
現状では、自分の力では難しそうです。
本当は、少しでもいじれるようになればいいのですが、
現状では他の部分に時間をさかれてなかなか難しくなってしまっています。
また、のぞかせてもらいます。
もし、時間ができましたら紹介いただけたら幸いです。
これからも更新頑張ってください。
他のプログラムも拝見させていただきます。
＞toureさん
ご返信ありがとうございました。
フリック動作は私もまだまだ勉強中なので
ご希望の動作にすぐにお応えできず申し訳ありませんが
またお役に立ちそうなサンプルが出来ましたら
ここで紹介させていただきます。
今後ともよろしくお願いします。
はじめまして
いつも楽しく拝見させていただいております。
こちらのスクリプトで勉強させていただいているのですが
質問がありコメントさせていただきました。
以下の動作を実装してみようといろいろ試しているのですが
うまくできず、、
—–
1）自動再生を切ってみる。
2）ループを切ってみる。
3）スライドの最初と最後の状態ではNEXT／BACKボタンをグレーアウトさせる。
—–
1）～2）まではできたのですが
3）がうまくできないのです。
大変恐縮なのですがアドバイスいただけますと幸いです。
よろしくお願い致します。
＞karinaさん
コメントありがとうございます！
返信送れてしまい申し訳ありません。。
このフリックスライドショーをご活用いただきありがとうございます。
ご質問いただいた内容についてですが
左右のNEXT／BACKの表示非表示についてですが
その様な動作を組み込むには、画像が切り替わる度に
現在何枚目を表示しているか判断させる為のスクリプトが必要になります。
元々サムネイルに対してアクティブ状態のものに
クラス「active」を付ける仕組みにしていたので
その「active」クラスがついているサムネイルの位置を判別して、
左右のNEXT／BACKボタンの表示非表示を切り替える
動作にするのが簡単かと思います。
参考までにサンプルを用意しましたので
下記のURLよりデータをダウンロードして確認してみてください。
http://black-flag.net/devel/jQueryFlickSwipeSlideShow/jQueryFlickSwipeSlideShowSideMove.zip
左右のNEXT／BACKボタンはスライドの始めと終わりで片方を非表示にしているので
グレーアウトにする場合は別で背景画像などを敷いてみてください。
よろしくお願いします。
ご返信ありがとうございます！
サンプルまで用意していただいて
本当にありがとうございます。
理想通りの機能が実装できました。
まだまだjsの勉強をはじめたばかりなので
スクリプトや実装までの考え方もとても勉強になりました。
これからもブログ楽しみにしております！
本当にありがとうございました！
＞karinaさん
サンプルのご確認ありがとうございました！
理想通りの動作が実装できたようで安心致しました。
JSは初めは難しいですが
慣れて考え方が分かってくると
いろいろと発想が湧いてくると思うので
あれこれ試してみてください。
また何かありましたら
よろしくお願いします。
はじめまして、こんばんは。
このフリックスライドショーをぜひ使わせていただきたいと考えているのですが、ループの仕様変更などは出来るのでしょうか？
うまく説明できるか分からないのですが、photo04.jpgにスライドしたあと、photo01.jpgに戻る際に
photo02.jpg、photo03.jpgが見えない状態でphoto01.jpgに戻って欲しいのです。
無知なうえ、分かりづらい質問をして大変申し訳ございませんが、
お時間があるときにでも、回答いただけますと幸いです。
よろしくお願いいたします。
＞doitさん
コメントありがとうございます！
ご質問いただきましたループの仕様に関してですが
この記事で紹介させていただいているスクリプトは
あくまでフリック／スワイプ動作のサンプルになっているので
ループなどの動作に関してはあまりカスタマイズ性はもたせておりません。。
当ブログで紹介しているカルーセルUIのスクリプトと組み合わせることで
ご希望の動作に近づけることができるかと思いますが
一度ご参考にしていただけますでしょうか。
サンプルなど用意できず申し訳ありませんが
ご確認の程、よろしくお願い致します。
こんにちは。はじめまして
フリックスライドショー参考にさせて頂いております。
お伺いしたいのですが、お時間ある時にご返答頂けると助かります。
上記内容で画像に(サムネイルじゃないところ)リンクをつけたいのですが、
PCﾌﾞﾗｳｻﾞでは対応するのですが、スマートフォンでは対応しないようなのです…。
何か原因とかわかりますか？
勝手な質問ですみません。
お時間ある時で構いませんので、何か参考になる案とかありましたら
教えて頂ければ大変助かります。
宜しくお願い致します。
返信ありがとうございました。
このブロブでいろいろ参考にさせていただきまして、
勉強させていただきます。
大変だとは思いますが、今後もいろいろな情報更新を
よろしくお願いいたします。
＞tokitokiさん
コメントありがとうございました。
フリック要素にリンクを貼ることについては
こちらでも試していなかったことなのですが
リンクを貼ることで、タッチイベントとクリックイベントの
微妙な感覚が認識しづらくなっていると思われます。
（スマホでも何度もたたくとタイミングによってリンクされます）
申し訳ありませんが、
今のところ回避策が思いつかないのですが
フリックエリアにリンクタグが有るか無いかで
タッチイベントの処理を変える方法になるかと思います。
時間見つけてまたここのブログで紹介できるように調査していきます。
宜しくお願い致します。
＞doitさん
ご返信ありがとうございました。
まだまだ未熟ですが、皆さんのお役に立てる情報を
発信し続けられるように精進させていただきます。
これからも宜しくお願い致します。
はじめまして、こんばんは
flickthumbのliをクリックすると画像が切り替わるのを、clickではなくhoverにしようと思って
配布されているindex.htmlの95行目を
$setThumbLi.click(function(){～～
から
$setThumbLi.hover(function(){～～
に変更して見たのですが、画像が自動で切り替わらなくなってしまいました。
いろいろいじったらさらにわからなくなったので、お暇なときにでもご教示いただければ幸いです
＞tarさん
コメントありがとうございます。
このスライドショースクリプトをご活用いただいているようで嬉しく思っております。
ご質問頂きましたhoverでの切り替え動作についてですが
自動スライドの動作がclickと連動している影響と
iPhoneやAndroidなどのスマホ系デバイスでは、
hoverでの処理はあまり望ましくないので
click動作はひとまずそのままにしておいた方が良いかと思います。
そして、スクリプト後半に書いてある
UA制御にてiPhoneなどスマホ系以外（PC系）に向けた記述の中に
hovar処理を追記する構成がよろしいかと考えております。
◆修正前 ——————————————
$setThumbLi.hover(function(){
$(this).stop().animate({opacity:’1′},300);
},function(){
$(this).stop().animate({opacity:’0.5′},300);
});
—————————————————
ここが、
◆修正後 ——————————————
$setThumbLi.hover(function(){
clearInterval(setTimer);
$(this).stop().animate({opacity:’1′},300);
var connectCont = $setThumbLi.index(this);
$setMaskUl.stop().animate({left:(-(listWidth)*(connectCont))},scrollSpeed);
$setThumbLi.removeClass(‘active’);
$(this).addClass(‘active’);
},function(){
$(this).stop().animate({opacity:’0.5′},300);
slideTimer();
});
—————————————————
この様になります。
参考までにサンプルを用意してみましたので
必要であれば下記のURLよりデータをダウンロードして確認してみてください。
http://black-flag.net/devel/jQueryFlickSwipeSlideShow/jQueryFlickSwipeSlideShowHover.zip
ご確認よろしくお願いします。
お返事ありがとうございます。
サンプルまで作成していただき本当にありがたいです。
iPhoneやAndroid等の動作確認は忘れていたので大変参考になりました。
重ね重ねありがとうございました。
＞tarさん
早速ご確認ありがとうございました。
無事に理想の動作が実装できたようで安心いたしました。
また何か不明なことがありましたらご連絡くださいませ。
よろしくお願いします。
はじめまして。
実装や、カスタムも簡単で早速使わせてもらってます。
２つ質問がございますので、よろしければお答えください。
１．フリック操作時に自動スクロールがオフになりますが、フリック操作後も自動スクロールがオフになったまま動かなくなってしまいます。フリック操作終了後に自動スクロールをオンにすることは可能でしょうか？
２．サムネイル画像は、メイン画像に表示されていない場合グレーアウトになっていますが、グレーアウトではなく違う画像を指定することは可能でしょうか？
恐縮ですが、ご回答いただけると幸いです。
PS.いつも色々と参考にさせていただいています。
これからも頑張ってくださいね！
先日質問させていただいた minakoともうします。
質問の１番目の自動スクロールの件ですが、フリック後にオンにならなくても大丈夫になりました。（依頼者が良いとのことで…）
もうひとつお聞きしたいのですが、現在スライドショーの画像は、左に揃うように作っておられると思います。
これを真ん中で揃うように変更することは可能でしょうか？リキッドデザインで、デバイスの幅が変わった場合にセンターに吸着させたいからです。
教えて頂ければ大変助かります。
質問ばかり申し訳ありません。
＞minakoさん
コメントありがとうございます！
このフリックスライドショーをご活用いただいているようで嬉しく思っております。
もろもろご質問いただきました内容ですが、
【１】に関しては、その様な仕様にしていたつもりが
きちんと動作していなかったようなので
記事内のスクリプトを再度調整させていただきました。
【２】については、現在地のサムネイルには
そのリストに「active」のクラスが付くようにしているので
CSS側でリストの背景画像に別画像を敷いて、
「active」のついたリストの画像は表示、
それ以外は非表示にすることで表示できるのではないかと想定しています。
————————————–
#flickthumb ul li img {
visibility: hidden;
}
#flickthumb ul li.active img {
visibility: visible;
}
————————————–
最後に画像の位置についてですが
基本的にはこのスクリプトはリキッド対応にしていないので
どのような状態か分かりかねる部分もありますが
メインエリアはリスト構成にしているので
単純にその中で中央寄せにしてみてはいかがでしょうか。
————————————–
#flickscroll ul li {
width: 400px;
height: 400px;
float: left;
display: inline;
overflow: hidden;
text-align: center;
}
————————————–
以上になりますが、
いろいろお試しください。
よろしくお願いします。
はじめまして！
とっても使いやすくて使わせていただいてます！
一点質問なのですが、
#flickscroll ul li内に複数のimgを表示し、
そのうちの1つをクリック(タップ)するとimgがすべて入れ替わるようにしてみました。
PCではうまく表示できるのですが、
ipadでは全く表示されなくなってしまいました…。
tokitoki様のご質問に対する回答と同じように、
タッチイベントとクリックイベントの
微妙な感覚が認識しづらくなっているのでしょうか？
似た様な質問で申し訳ありません。
何か良いアイディアがありましたらぜひご教示をお願いいたします！
参考までに入れ替えに使ったコードです。
$(function(){
$(“#切り替えボタン1″).click(function(){
$(“.クリックで隠す画像”).hide();
});
$(“#切り替えボタン1″).click(function(){
$(“#切り替えボタン1″).hide();
});
$(“#切り替えボタン1″).click(function(){
$(“#クリックで表示する画像”).show();
});
$(“#切り替えボタン1″).click(function(){
$(“#切り替えボタン2″).show();
});
});
$(function(){
$(“#切り替えボタン2″).click(function(){
$(“#クリックで表示する画像”).hide();
});
$(“#切り替えボタン2″).click(function(){
$(“#切り替えボタン2″).hide();
});
$(“#back”).click(function(){
$(“.クリックで隠す画像”).show();
});
$(“#back”).click(function(){
$(“#切り替えボタン1″).show();
});
＞ryoukoさん
コメントありがとうございます。
このスクリプトをご活用いただいているようで嬉しく思っております。
ご質問いただきました内容についてですが
このスクリプトではフリック箇所に関しての
リンク要素についての対処はしていないので
画像にリンクを張っても正常に動作しません・・・
タッチイベントとクリックイベントの対処にも対応したパターンも出来次第、
ここで紹介させていただきたいと思っておりますが
現状まだ用意できておりません。。
申し訳ないのですが
何卒よろしくお願いします。。
はじめまして、こんにちは。
こちらのスクリプトをつかわさせていただいております。
レイアウトのカスタマイズもとてもしやすく、重宝させていただいております。
一つ、質問なのですが、現在このスクリプトは、画像が、
左から右～と移動するようですが、
これを、右から左～に変えることは、できるのでしょうか・・・？
漫画広告に使いたいと考えており、
漫画の読みやすさから考えると、右から左に画像が移動させたくて・・・。
お手数ですが、なにとぞよろしくお願いいたします。
＞みやびさん
コメントありがとうございます。
このフリックスライドショーをご活用いただいているようで
こちらとしても嬉しく思っております。
ご質問いただきました右から左への移動についてですが
このスクリプトを使ってやるとなると
全体の構成から見直すことが必要になってしまうと思われますが
HTML（CSS）はそのままで動作部分のみ
スクリプトで強引に変更してみたサンプルを用意してみました。
必要であれば下記URLよりダウンロードして
スクリプト等ご確認ください。
http://black-flag.net/devel/jQueryFlickSwipeSlideShow/jQueryFlickSwipeSlideShowReverse.zip
あまりきれいな方法ではないのですが
また作成する時間がとれましたらここで紹介してみたいと思います。
よろしくお願いします。
＞BlackFlagさん
素早い対応大変ありがとうございます！
そして、サンプルまでいただけるなんて・・・！
大変にありがとうございます！
また、貴サイトのスクリプト使わさせていただきます。
よろしくお願いいたします。
＞みやびさん
ご返信ありがとうございます。
サンプルがお役に立ったようで安心しました。
他記事でもいろいろとスクリプトを紹介させていただいておりますので
あれこれ試していただければ幸いです。
また何かありましたらご連絡くださいませ。
よろしくお願いします。
はじめまして！
矢印つきで、表示されている画像がわかるものを丁度探していました。
コードもとてもわかりやすく簡単に実装できました。
大手男性用ヘアー企業のトップ画像に使用させて頂く予定です。
有難うございます。
＞さいとうさん
コメントありがとうございます！
このフリックスライダーをご活用いただいているようで
とても嬉しく思っております。
実際に制作サイト様に実装していただけるとのこと
ありがとうございます。
他にもいろいろとサンプルスクリプトを紹介しておりますので
あれこれ試していただけると幸いです。
よろしくお願いします。
はじめまして！
こちらのスクリプトがとても使いやすく、
いつも使わせて頂いています。
一つ質問をさせていただきたいのですが、
iPhoneのRetina対策の為に、zoom:0.5を指定しているのですが、
android(2.3.3)で見た時にフリック時に画像と画像の間でスクロールが止まってしまいます。
何か解決策はありますでしょうか？？
お忙しい中恐縮ですが、
よろしくお願い致します。
＞keiさん
コメントありがとうございます。
ご質問いただきました件ですが
申し訳ありませんが当方Android2.3.3の環境がなく
検証なども行えない状態です・・・
iPhoneのRetina対応に入れている「zoom:0.5」が原因ならば
当ブログ別記事の
———————————————
・jQueryでiPhone、iPad、Androidのそれぞれ縦・横画面の向きを判別してCSSクラスを追加する方法
http://black-flag.net/jquery/20110816-3411.html
———————————————
こちらの記事を応用して
iPhoneの場合のみ「zoom:0.5」が入るようにすることで
Androidには「zoom:0.5」が影響しなくなるのではないかと考えております。
お試しください。
よろしくお願いします。
はじめまして、東條と申します。
スライドショーを探しておりましたこちらのサイトに辿り着きました。
是非こちらのスライドショーを使わせて頂きたいと考えているですが、
すみませんが１点ご質問させて下さい。
サンプルファイルをダウンロードさせて頂きまして、
大きい画像の方にAタグで写真毎にリンクを貼りまして、
PCでの各種ブラウザからは問題無くリンクされました。
またiPhoneエミュレータのiBBdemo3でも正常にリンクはされました。
しかしながらiPhoneのsafariやAndroidのブラウザでは
画像をタップしてもそのAタグが効かない状態でございます。
（左右の矢印でのスライドは動作します）
ちなみにAタグは普通に
＜li＞＜a href=”http://www.yahoo.co.jp/”＞＜img src=”img/photo01.jpg” width=”400″ height=”400″ alt=”" /＞＜/a＞＜/li＞
というように記載しております。
こちらのリンクを動作させたいのですが、
どのように設定すれば宜しいでしょうか？
大変お忙しいかと思いますが、
ご返答の程宜しくお願い致します。
＞東條さん
コメントありがとうございます。
このフリックスライドショーをご活用いただいているようで
嬉しく思っております。
ご質問いただきました件ですが
ここのコメントにも同じように質問を頂いているのですが
申し訳ありませんがこのスクリプトはリンクに対応しておりません。。
（いろいろ試したのですがなかなかうまくいかず・・・）
また機会がありましたら
リンクも張ることが出来るフリックスライダーを
別途ここで紹介させていただきます。。
よろしくお願いします。
＞BlackFlagさん
ご返答頂き、誠に有難うございます。
またコメント全て把握しておらず申し訳ございませんでした。
リンク設定はあった方が良いかと思いますので、
是非ご検討の程宜しくお願い致します。
はじめまして！
現在webショップもデザインをしているのですが
こちらのサイトのスライドショーなど多々使わせて頂いております。
そこで質問なんですが・・・
商品のディティールのスライドショーに使用しようと思い作っていたのですが
写真の枚数が増え、＜div id=”flickthumb”＞の部分を二段にしたのですが
一段目の最後までいくと二段目の画像にはいかずそのまま止まってしまいました。
その場合どのようにすればよいでしょうか？
まだまだ初心者の為困り果てて質問致しました。
ご返答お願いします。
＞sakkoさん
コメントありがとうございます。
このフリックスライダースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただいた件についてですが
実際の構成を確認できていないので何とも言えませんが
恐らく＜ul＞を2つ設置しているせいではないかと思われます。
サムネイルを2段にする場合でも
＜ul＞は一つで構成する必要があります。
試しにサムネイルを2段にしたサンプルを用意しましたので、
必要であれば下記URLよりダウンロードしてみてください。
http://black-flag.net/devel/jQueryFlickSwipeSlideShow/jQueryFlickSwipeSlideShowThumb2.zip
よろしくお願いします。
こちらのサイトをｊｓを色々使用させていただいております。
大変重宝し感激です。
上記のスクリプトに関して質問なのですが、同一ページに複数表示することは可能でしょうか？
単純に複数設置して、flickscrollとflickthumbのｉｄ名を変えても中々うまくいきません。
お忙しい中、大変申し訳ございませんがご返答頂けると助かります。
何分未熟者ですみません。
何卒よろしくお願いいたします。
＞YONAGAさん
コメントありがとうございます。
このフリックスライダースクリプトを
ご活用いただいている様で嬉しく思っております。
ご質問いただきました件についてですが
申し訳ありませんがこのフリックスライダーは複数設置を想定しておらず
現状の構成では難しいかと思っています。。
また複数設置が可能なパターンのサンプルができましたら
ここで紹介させていただきたいと思っております。
よろしくお願いします。
ご返答ありがとうございました！
了解いたしました。
お忙しい中、ほんと恐縮ですが是非、お願いしたく期待しております！
また、その他のスクリプトも大変助かっております。
今後ともご利用させていただきますので宜しくお願いいたします。
はじめまして。
いつもサイトを拝見させていただいています。
こちらのスクリプトも利用させていただいてサイトを制作しているのですが、
「Uncaught ReferenceError: $setPrevNextId is not defined 」というエラーが発生してしまいます。
大変恐縮なのですが、jsのコードを読む技量が足らないため、[152行-163行]の処理について
教えていただくことはできないでしょうか？
おそらくhtml側の問題だと思うのですが、どこから手をつけたら良いのかわからない状態です。
よろしくお願いいたします。
＞okamotoさん
コメントありがとうございます。
このフリックスライドショースクリプトをご活用いただいている様で
嬉しく思っております。
ご質問いただきました件についてですが
こちらで確認する限りその様なエラーは発生していないのですが
[152行～163行]での処理はiPhone、iPad、Androidを判別して
サムネイル部分のロールオーバー動作を実行させるかどうかの処理をしております。
（PC以外ではロールオーバー動作を実行させない）
ご確認ください。
よろしくお願いします。
コメントありがとうございます。
確認したところ、スマホで表示する際にflickthumb以下を出力しないようにしていたために発生していたようでした。
お手数をおかけしましたが、今後もよろしくお願いいたします。
ありがとうございました。