需要幫助定製jQuery Cycle插件

好的我喜歡用於幻燈片的jquery循環插件。最近我收到了很多關於全屏幕背景幻燈片網站的請求。需要幫助定製jQuery Cycle插件

我一直沒有成功編輯jQuery週期js，讓幻燈片始終調整大小。

我需要採取this代碼，並添加一些像this它。

Im相當肯定這是你可以編輯的jQuery插件週期：

// stretch slides 
    if (opts.fit) { 
      if (!opts.aspect) { 
      if (opts.width) 
       $slides.width(opts.width); 
      if (opts.height && opts.height != 'auto') 
       $slides.height(opts.height); 
      } else { 
        $slides.each(function(){ 
          var $slide = $(this); 
          var ratio = (opts.aspect === true) ? $slide.width()/$slide.height() : opts.aspect; 
          if(opts.width && $slide.width() != opts.width) { 
            $slide.width(opts.width); 
            $slide.height(opts.width/ratio); 
          } 

          if(opts.height && $slide.height() < opts.height) { 
            $slide.height(opts.height); 
            $slide.width(opts.height * ratio); 
          } 
        }); 
      } 
    } 

    if (opts.center && ((!opts.fit) || opts.aspect)) { 
      $slides.each(function(){ 
        var $slide = $(this); 
        $slide.css({ 
          "margin-left": opts.width ? 
            ((opts.width - $slide.width())/2) + "px" : 
            0, 
          "margin-top": opts.height ? 
            ((opts.height - $slide.height())/2) + "px" : 
            0 
        }); 
      }); 
    } 

    if (opts.center && !opts.fit && !opts.slideResize) { 
      $slides.each(function(){ 
      var $slide = $(this); 
      $slide.css({ 
        "margin-left": opts.width ? ((opts.width - $slide.width())/2) + "px" : 0, 
        "margin-top": opts.height ? ((opts.height - $slide.height())/2) + "px" : 0 
      }); 
      }); 
    } 

    // stretch container 
    var reshape = opts.containerResize && !$cont.innerHeight(); 
    if (reshape) { // do this only if container has no size http://tinyurl.com/da2oa9 
      var maxw = 0, maxh = 0; 
      for(var j=0; j < els.length; j++) { 
        var $e = $(els[j]), e = $e[0], w = $e.outerWidth(), h = $e.outerHeight(); 
        if (!w) w = e.offsetWidth || e.width || $e.attr('width'); 
        if (!h) h = e.offsetHeight || e.height || $e.attr('height'); 
        maxw = w > maxw ? w : maxw; 
        maxh = h > maxh ? h : maxh; 
      } 
      if (maxw > 0 && maxh > 0) 
        $cont.css({width:maxw+'px',height:maxh+'px'}); 
    } 

    var pauseFlag = false; // https://github.com/malsup/cycle/issues/44 
    if (opts.pause) 
      $cont.hover(
        function(){ 
          pauseFlag = true; 
          this.cyclePause++; 
          triggerPause(cont, true); 
        }, 
        function(){ 
          pauseFlag && this.cyclePause--; 
          triggerPause(cont, true); 
        } 
      ); 

    if (supportMultiTransitions(opts) === false) 
      return false;

來源

2011-08-08 Niko Lowry

你展示了一些東西，並告訴你失敗了。但你的問題是什麼？ – Veger

好吧，最初我設置幻燈片100％的高度和寬度，然後分別添加全屏jQuery。它工作得很好，除了調整大小沒有反思如果瀏覽器有時調整大小，所以我想編輯實際的插件來擴展 –

你只是想調整圖像以適合全屏？爲什麼要修改jQuery循環？爲什麼不利用它提供的回調函數。

$(element).cycle({ 
    opt1: val1, 
    .... 
    before: function(currSlideElement, nextSlideElement, options, forwardFlag) { 

     //resize each image here, before it is displayed 

    } 
});

另外，你可以調整頁面加載的所有圖像。爲什麼需要等待圖像準備好顯示才能調整大小？

以同樣的方式，您可以在瀏覽器窗口調整大小的情況下處理圖像的大小調整。

$(window).resize(function() { 

    //resize the images again 

});

除非你試圖創建要發佈自己的插件，我沒有看到修改點/ jQuery的延長週期。這只是我的看法。

來源

2011-08-08 22:15:57 Chris

看看MaxImage 2.0 jquery插件。

這是一個插件，只是站在jQuery循環插件，但允許全屏幻燈片。它已接近最終發佈，並已在IE7 +，Firefox，Chrome，Safari，iOS中進行了測試，但仍處於測試階段（截至11-07-11），所以如果您使用它，請確保先徹底測試它。

請讓我知道任何想法或建議，如果您在the beta release page給它一個旋轉按鈕，可能有。謝謝。

來源

2011-11-07 15:46:43

需要幫助定製jQuery Cycle插件

回答

相關問題