JQuery Cycle Plugin Shuffle Right

Question

고정! 내가 전에 이것을 보지 못했다고는 믿을 수 없다 :

$('#s4') 
     .before('<div id="nav">') 
     .cycle({ 
      fx:  'shuffle', 
      speed: 500, 
      shuffle: { top:15, left: 300 }, 
      timeout: 0, 
      pager: '#nav', 
      cleartypeNoBg:true 
    }); 

여기서 셔플 애니메이션을 선택할 수있다. 나는 사이클 플러그인을 사용하기 위해 노력하고있어 300

---

그러나 나는 왼쪽 대신 오른쪽에 셔플해야합니다 (15)를 왼쪽 : 난 내 최고로 설정해야합니다. 나는

opts.shuffle = opts.shuffle || {left:+w, top:15}; 

유일한 문제는 내가 셔플있어 이미지가 큰 조용하고 이미지 사이의 전환시 가로 스크롤 막대를 만드는 것입니다에

opts.shuffle = opts.shuffle || {left:-w, top:15}; 

을 변경하여 성공적으로 이런 짓을했습니다. 이것은 왼쪽으로 걸어 갔을 때 발생하지 않으며 내가 무엇을 놓치고 있는지 잘 모르겠습니다. 아래는 셔플 효과에 대한 스 니펫입니다. 어떤 도움을 주셔서 감사합니다!

// shuffle 
$.fn.cycle.transitions.shuffle = function($cont, $slides, opts) { 
    var i, w = $cont.css('overflow', 'visible').width(); 
    $slides.css({left: 0, top: 0}); 
    opts.before.push(function(curr,next,opts) { 
     $.fn.cycle.commonReset(curr,next,opts,true,true,true); 
    }); 
    // only adjust speed once! 
    if (!opts.speedAdjusted) { 
     opts.speed = opts.speed/2; // shuffle has 2 transitions 
     opts.speedAdjusted = true; 
    } 
    opts.random = 0; 
    opts.shuffle = opts.shuffle || {left:+w, top:15}; 
    opts.els = []; 
    for (i=0; i < $slides.length; i++) 
     opts.els.push($slides[i]); 

    for (i=0; i < opts.currSlide; i++) 
     opts.els.push(opts.els.shift()); 

    // custom transition fn (hat tip to Benjamin Sterling for this bit of sweetness!) 
    opts.fxFn = function(curr, next, opts, cb, fwd) { 
     var $el = fwd ? $(curr) : $(next); 
     $(next).css(opts.cssBefore); 
     var count = opts.slideCount; 
     $el.animate(opts.shuffle, opts.speedIn, opts.easeIn, function() { 
      var hops = $.fn.cycle.hopsFromLast(opts, fwd); 
      for (var k=0; k < hops; k++) 
       fwd ? opts.els.push(opts.els.shift()) : opts.els.unshift(opts.els.pop()); 
      if (fwd) { 
       for (var i=0, len=opts.els.length; i < len; i++) 
        $(opts.els[i]).css('z-index', len-i+count); 
      } 
      else { 
       var z = $(curr).css('z-index'); 
       $el.css('z-index', parseInt(z)+1+count); 
      } 
      $el.animate({left:0, top:0}, opts.speedOut, opts.easeOut, function() { 
       $(fwd ? this : curr).hide(); 
       if (cb) cb(); 
      }); 
     }); 
    }; 
    opts.cssBefore = { display: 'block', opacity: 1, top: 0, left: 0 }; 
}; 

당신은 어떤 HTML을 게시하지만, (스크롤바를 받고) 넘쳐 컨테이너의 CSS에 overflow: hidden를 추가하지 않은

<div id="contentAreaJS" class="contentArea"> 
    <div id="s4" class="pics"> 
     <div id="navlist"> 
     <ul> 
      <li id="mon"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_fajitas.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li> 
      <li id="tue"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_tacos.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li> 
      <li id="wed"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_chips.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li> 
      <li id="thur"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_dessert.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li> 
      <li id="fri"><a href="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilisLightbox_burger.png" style="text-decoration:none;" rel="shadowbox;width=500;height=400;"></a></li> 
     </ul> 
    </div> 
     <a href="https://www.chilistogo.com/Pages/Welcome.aspx" target="_blank"><img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilispartyPlatters.png" height="237" width="769" /></a> 
    <a href="http://www.chilis.com/EN/HappyHours/001.005.0609.pdf" target="_blank"><img src="http://image.iloqal.com/lib/fe5c1570746107757c1c/m/1/ChilishappyHour.png" height="237" width="769" /></a> 
     </div>  
    </div> 

Answer 1

HTML. 전환을 완료 한 후 페이지 레이아웃이 정상으로 돌아 오도록하기 위해 이전/후크를 사용하여이를 제어해야 할 수도 있습니다.