Cycle.js override image sizes

Question

I am using cycle.js, but the site is responsive.

I'd like to be able to use a large image (big enough for the full screen version) and then use max-width:100% on the image to reduce it's width based on the screen size.

Problem is that cycle.js overrides with inline styles based on whatever size the image is. So if it's 800x600 then it will always display at that size, regardless of whether the containing div's width is 100px or 1000px

Code:

<div id="rightCol">
            <div class="slideshow">
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
                <img src="http://4.bp.blogspot.com/-PGEqrdJBKmc/T_xe7hoz0yI/AAAAAAAAA0w/vKDMnf-5p7o/s1600/cat+5.jpg" />
            </div>
        </div>

rightCol{

width:72.5%;
float:right;

}

slideshow {

width:100%

}

slideshow img{

max-width:100%;

}

Answer 1

Have a look at the internal working of cycle.js

// apparently a lot of people use image slideshows without height/width attributes on the images.
// Cycle 2.50+ requires the sizing info for every slide; this block tries to deal with that.
var requeue = false;
options.requeueAttempts = options.requeueAttempts || 0;
$slides.each(function() {
    // try to get height/width of each slide
    var $el = $(this);
    this.cycleH = (opts.fit && opts.height) ? opts.height : ($el.height() || this.offsetHeight || this.height || $el.attr('height') || 0);
    this.cycleW = (opts.fit && opts.width) ? opts.width : ($el.width() || this.offsetWidth || this.width || $el.attr('width') || 0);

    if ( $el.is('img') ) {
        // sigh..  sniffing, hacking, shrugging...  this crappy hack tries to account for what browsers do when
        // an image is being downloaded and the markup did not include sizing info (height/width attributes);
        // there seems to be some "default" sizes used in this situation
        var loadingIE   = ($.browser.msie  && this.cycleW == 28 && this.cycleH == 30 && !this.complete);
        var loadingFF   = ($.browser.mozilla && this.cycleW == 34 && this.cycleH == 19 && !this.complete);
        var loadingOp   = ($.browser.opera && ((this.cycleW == 42 && this.cycleH == 19) || (this.cycleW == 37 && this.cycleH == 17)) && !this.complete);

it needs to get the height width attribute of the image elements. So write a simple helper function in JS which can provide this when the window is resized. Should not be very hard with a little bit of googling.

jquery cycle automatically fit to window width on resize

Jquery Cycle Resize

Answer 2

I managed to create a fix for this when I used Cycle.js but needed it to be responsive.

I had to add a transparent dummy.gif image with a fixed width and height before the other images.

e.g.

<div id="slider-wrapper">

     <div id="slider">

        <img src="images/dummy.gif" width="960px" height="300px">

        <img  src="images/image1.jpg" />

        <img  src="images/image2.jpg" />

        <img  src="images/image3.jpg" />  

        <img  src="images/image4.jpg" />

    </div>
</div>

The css to go with it was:

#slider
{
    width:100%;
    height:auto;
    min-height:300px;
    max-width:960px;
}
#slider img
{
    max-width: 100%;
    height: auto;
    width: auto; 
}

There is an example here: http://jacobhammond.co.uk/ - please note the website is not finished and is kind of just an experiment. I'm currently working on my actual site.