Resize jquery cycle slide show images on fly

Question

I'm using the jquery cycle plugin (slide shows) on my homepage using slightly modified code from: http://malsup.com/jquery/cycle/basic.html

I want to scale the images to fit the display (for mobile mostly, orientation-change handling would be cool too, but whatever) I was hoping to use jquery or css to do this but haven't been able to integrate it; any help with this would be appreciated.

I have tried changing slideResize and containerResize to every possible combination of zero's and one's without much change, and I have tried css to try both: "max-width:100%;height:auto;" and also: "width:100% !important; height:100% !important;" and many other permutations & combinations of the two; plus I have tried @media queries to resize as well for different screen sizes, but again it doesn't work on firefox, mobile safari, or android ICS browser. Everything either does not scale, or does scale on some devices but does not display the pictures except for brief random moments, or the div that holds the picture looses all height and the images float on top of my other elements (absolute's style ;p)

I have tried to get these jquery examples to work with my slide show, but I can't get them too (the slides just overlap into other div spaces, or create horizontal scrolling on mobile): jsfiddle dot net/nottrobin/9Pbdz/ & stackoverflow /questions/16140278/jquery-image-resize-when-window-is-resized & another one with a sun (can't find it now) that also worked perfectly...except it didn't work with the jquery cycle plugin code I'm using... any help is appreciated.

Here is the link to the jquery script (I copied and mini-fied it on my server):

http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js

Here is my jQuery code:

    $(document).ready(function() {

    $('.slideshow1').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
        delay: -4000 
    });
        $('.sls0').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
        delay: -4000 
    });
        $('.sls1').cycle({
        fx: 'turnDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc..
        delay: -2000 
    });
            $('.sls2').cycle({
        fx: 'shuffle', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        easing: 'easeOutBack', 
        delay: -2000 
    });
            $('.sls3').cycle({
    fx:    'curtainX', 
    sync:  false, 
        delay: -2000 
    });
                $('.sls4').cycle({
    fx:     'scrollDown', 
    easing: 'easeOutBounce', 
    delay:  -2000  
    });


                $('.sls5').cycle({
    fx:     'toss,fadeZoom,fade,blindX,cover,scrollUp,scrollDown,shuffle,turnDown,turnRight,turnLeft,scrollLeft,scrollRight,scrollHorz', 
timeout:700,
slideResize:   1,
containerResize: 1,
delay:  -2000  
});
});

Html code:

     <div id="logo">

            <center><div id="cycle_slide" class="sls5" style="">


             <img src="./slides/ring1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">

<img src="./slides/ring2.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 

<img src="./slides/amps1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">


            <img src="./slides/guitars1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;">
                        <img src="./slides/hand1.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 


<img src="./slides/gold-bars.jpg" alt="" title="" style="-moz-border-radius:20px;border-radius:20px;"> 
        </div></center> 

      </div>
      <div id="contentarea">
           This is example content for testing etc....
      </div>

Answer 1

Well this is the second time I have asked and answered my own question.

I found a few solutions while trying to solve another problem (stay tuned for that one!), and I thought I would share my findings.

ALL of these sliders are MIT (or duel MIT L/GPL) licensed, and they are adaptive to the display size (mobile friendly):

swipejs.com

photoswipe.com

www.idangero.us/sliders/swiper/

sequencejs.com

Hope this helps someone else too.