Need help customizing jQuery Cycle plugin

Ok I love the jquery cycle plugin for slideshows. Ive recently been getting a lot of requests for fullscreen background slideshow websites.

Ive been unsuccessfull in editing the jquery cycle js to have the slides always resize.

I need to take this code and add something like this to it.

Im pretty sure this is where you would edit the jquery cycle plugin:

    // 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 开发者_StackOverflow中文版= 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;

Your simply trying to resize the images to fit the full-screen? Why modify jQuery cycle at all? Why not utilize the callback functions which it provides instead.

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

        //resize each image here, before it is displayed

    }
});

Alternatively, you could just resize all images on page load. Why do you need to wait until the image is ready to be displayed to resize it?

In the same way, you could handle the resize of the images in the event the browser window is resized.

$(window).resize(function() {

    //resize the images again

});

Unless you are trying to create your own plugin which you want to distribute, I don't see the point in modifying/extending jQuery cycle. That's just my opinion.

Take a look at MaxImage 2.0 jquery plugin.

It's a plugin that just stands on jQuery Cycle Plugin but allows for fullscreen slideshows. It's close to final launch and has been tested in IE7+, Firefox, Chrome, Safari, iOS but is still (as of 11-07-11) in beta so if you use it make sure you thoroughly test it first.

And please let me know any thoughts or suggestions that you may have if you give it a whirl at the beta release page. Thanks.