The only problem I have is that the slideshow div (in this case #test) doesn't have a width and height property anymore and since the slides inside are absolute positioned by the script the slideshow div collapses.
First of all thanks for the quick reply and the great plugin.
The problem with a fixed height is that below 400px (for mobile phones) I'd like to have a fluid layout thus I'd like to declare only width: 100% and have the height calculate automatically.I know it's an edge case and I can certainly live with the slideshow fixed starting from a certain window size.
I realise it's a bit late in the day, but in case this helps anyone...
@frankalnzkie - I gave the dummy .gif file the same dimensions as the original slide size (i.e. the maximum size they're going to be shown at). For some reason I had to reference it using the absolute URL for it to get picked up.
And yes, visibility: none is set in the CSS .loading class.
This is the code that works for me (I'm using thumbnails as nav, so a little more complicated):
One additional note that might be helpful for folks who are cycling divs (or other containing elements) rather than imgs directly: I found that if you only give your div cycling elements a width of 100% it will be over-ridden in the CSS flow by that element's inline width declaration (in pixels) as assigned by jQuery Cycle. However, giving each div a declaration of width: 100% !important; will over-ride that and give you the result you're after.
Without the additional !important assigned to the cycling divs width, the slideshow works correctly on various screen widths when it loads but the images do not resize when the browser is resized. (Actually, the first one still does for some reason, but the second and following images don't.)
I've been keeping track of this forum as it deals with an issue I have with reactive web design and the cycle plugin. I've done everything mentioned here and now the images are finally fluid... however I seem to have a problem with the container as now it has a height of 0 at all times unless there is something to fill up the page on which it was posted then it just floats over that content also the images seem to overflow out of the container. Any way to fix this and keep it dynamic? I don't want to set a fixed height for the container as it is supposed to be presented on mobile devices. Here is the code:
Now if there is some text on the page enough to fill a whole page then container jse31 will float over the text obstructing it, if there is no text and the div is inside an empty rwd element then the pictures will look like they are being cut off at the bottom and only like 10px height of the images will be shown, the width however will shrink and expand fluidly without any problems resizing the rwd element.
Edit: Nevermind found it I forgot to enter the placeholder image, but I wonder why does it make a difference? Is it because that image isn't processed and therefore sets the attributes for the container?
Leave a comment on icarusv2x's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic