Question

I’m using the jQuery Cycle plugin. The page in question is here:

http://harrisonfjord.com/folio/test.html

The menu on the left controls the content in the middle of the page using the Cycle plugin. Pretty straightforward. However, cycle is adding a bunch of styles to the slide boxes:

<div class="adSlideBox" id="asics" style="position: absolute; z-index: 8; top: 0px; left: 0px; display: block; width: 1020px; opacity: 1; ">

The offending code in question is the width attribute that’s being set; I’m building the site based on a fluid layout and the images are meant to resize when the window is resized. All works fine until Cycle adds that nasty width rule to each of my slides!

How can I get it to stop doing this? I’ve trued using containerResize: 0, but to no avail. Here’s the jQuery call:

$('#adSlideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0,  
    pager:  '#menu',
    containerResize: 0,
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#menu li:eq(' + idx + ') a'; 
    }
});

I’m using the full version of Cycle by the way, so toggling the containerResize option SHOULD work but doesn’t. Thoughts?

Is it possible to go into the cycle.js code and just rip this part of the function out?

EDIT: Ignore the fact that the right-side menu behaves weirdly when resizing the page, it’s actually meant to sit at the bottom but I’ve edited out the rest of the code for simplicity in this test site.

Answer 1

use slideResize: 0 in addition to containerResize: 0