jQueryサイクルプラグインのカスタマイズの手助けが必要

Question

私はスライドショーのjqueryサイクルプラグインが大好きです。最近、フルスクリーンのバックグラウンドスライドショーウェブサイトのリクエストが多くなってきました。

スライドが常にサイズ変更されるようにjqueryサイクルjsを編集するのに失敗しました。

thisコードを入力してthisのようなコードを追加する必要があります。

イムあなたは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; 

Answer 1

あなたは、単にフルスクリーンに合わせて画像のサイズを変更しようとしていますか？なぜ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のサイクルを拡張/変更するにはポイントが表示されていません。それは私の意見です。

Answer 2

MaxImage 2.0 jquery pluginをご覧ください。

これはjQuery Cycle Pluginの略ですが、フルスクリーンのスライドショーを可能にするプラグインです。それは最終的な打ち上げに近く、IE7 +、Firefox、Chrome、Safari、iOSでテストされていますが、ベータ版ではまだ（11-07-11現在）ですので、使用する場合はまず徹底的にテストしてください。

the beta release pageに渦巻きをつけた場合の考えや示唆をお知らせください。ありがとう。