Нужна помощь в настройке плагина jQuery Cycle

Question

Хорошо, мне нравится плагин JQuery Cycle для слайд-шоу.Недавно я получил много запросов на полноэкранные веб-сайты с фоновым слайд-шоу.

Мне не удалось отредактировать цикл jquery js, чтобы размер слайдов всегда менялся.

Мне нужно взять это код и добавьте в него что-то вроде 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.

Это плагин, который просто стоит на плагине jQuery Cycle, но допускает полноэкранные слайд-шоу. Он близок к финальному запуску и был протестирован в IE7 +, Firefox, Chrome, Safari, iOS, но все еще (по состоянию на 11-07-11) находится в бета-версии, поэтому, если вы используете его, убедитесь, что сначала тщательно его протестировали.

И, пожалуйста, дайте мне знать, какие у вас могут быть мысли или предложения, если вы расскажете ему на странице бета-версии . Спасибо.