レスポンシブイメージギャラリーに自動再生の設定を追加します。

Question

私が働いているこのサイトの画像ギャラリーhttp://tympanus.net/codrops/2011/09/20/responsive-image-gallery/にこのギャラリーが追加されております。完璧に動作しますが、唯一のことは、スライドショーを自動再生するオプションがないことです。

http://www.debellephotography.com/debelleslide/

任意の助けいただければ幸いです！

Answer 1

スライドをループするsetInterval関数をトリガーする新しいボタンを作成します。これは次のようになります。

<button onclick="play()">slideshow</button> 

function play() { 
    setInterval(function() { 
     // Do the code that triggers next image 
    }, 1000); 
} 

数値は、機能の実行間隔（ミリ秒）です。

Answer 2

この

var current=1; 
    function autoAdv() 
    { 
     if(current==-1) return false; 

     $('.es-carousel a').eq(current%$('.es-carousel a').length).trigger('click',[true]); // [true] will be passed as the contentScroll parameter of the click function 
     current++; 
     $('.rg-image-nav-prev').eq(current%$('.rg-image-nav-prev').length).trigger('click',[true]); // [true] will be passed as the contentScroll parameter of the click function 
     current++; 
    } 

    // The number of seconds that the slider will auto-advance in: 

    var changeEvery = 10; 

    var itvl = setInterval(function(){autoAdv()},changeEvery*1000);​ 

Answer 3

を試してみて、私はあちこちビットと作品をつなぎ合わせや、助けに感謝し、それを行う方法を考え出しました。

var t; 
var timer_is_on=0; 

function timedCount() 
{ 
$('.rg-image-nav-next').click() 
t=setTimeout("timedCount()",1000); 
} 

function doTimer() 
{ 
if (!timer_is_on) 
{ 
timer_is_on=1; 
timedCount(1000); 
} 
} 

function stopCount() 
{ 
clearTimeout(t); 
timer_is_on=0; 
} 

timeCount機能は、1秒ごとに次の画像をアクティブにします。 doTimer関数は、タイマーが複数回アクティブ化されないようにします。 stopCount関数は、スライドショーの一時停止を許可します。

私はその後、一時停止して再生するために2つのボタンを追加しました：

<div class="playbutton"><a href="javascript:doTimer();"><img src="images/play.png" width="24" height="24" alt="Play"></a></div> 
<div class="pausebutton"><a href="javascript:stopCount();"><img src="images/pause.png" width="24" height="24" alt="Pause"></a></div> 

あなたはここで働いて、それを見ることができます：example with autoplay