Support for responsive layouts (dynamic size)

[Superbs]

It would be nice if the cycle followed its parent element size, so the slides have dynamic size.

[matthewmcvickar]

The cycle isn't a fixed width; you can set the container and the elements inside of it to any size you like in CSS. For a responsive design, you could, for example, set the max-width of the cycle above a certain viewport width using media queries in CSS, then make its width 100% once hitting a certain viewport width.

[joeworkman]

I have to disagree that Cycler can work in Responsive layouts. The plugin adds inline styles to every slide and the slide wrapper with width and height. Even if I style something to be responsive, the inline styles win.

Please tell me that I am wrong because I have been at this for a while. Do you have an example of Cycle being responsive?

[joeworkman]

Here is what I had to do in order to force this to be more responsive for me. Please tell me if i coudl do something better.

1. Set the width attribute of Cycle to "100%".

2. Override the width & height settings for each slide using CSS !important.

   .quickpic{width:100% !important;height:auto !important;}

3. I had to create a jquery function that would rebuild the Cycle plugin after the browser resized.

   $(window).bind('load', build_gallery).bind('resize', build_gallery);

   function build_gallery() {
   $('.quickpics_wrapper').height($('.quickpics_wrapper img').first().height()); $('.quickpics_wrapper').cycle({fx:'fade', pause:true,width:'95%'}); };

[matthewmcvickar]

@joeworkman I played with this a bunch and discovered that you're right--the height issue is a hard one to get around. Since all of the elements in the cycle are absolutely positioned, the container for the cycle has no height until you give it one. And as you pointed out, that height stays constant unless you constantly adjust it to fit the contents as the window is resized.

I hadn't run into this before because I was adjusting the height with media queries at five or six steps of viewport width along the way. I still think this is an adequate solution, but I could see why you'd want a truly height-flexible cycle.

Check out https://gist.github.com/3059505 (and load it up locally to see how it works) for my stab at this. I used CSS for the width adjustment and your JS for the height. It's buggy, though. The JS can get zero heights when the slides are being changed, and so the content beneath the cycle ends up underneath it. I played with the containerResize and slideResize options, but had no luck.

I think your solution of binding the resize event is a good one, but you'd need to make sure you were always grabbing the height of a visible slide to avoid 0s (and maybe pause the slideshow as resizing is happening? I don't know how you'd do that.).

@malsup, any thoughts?

[blowsie]

If someone could prove that this pplugin works responsively Id love to see it. Ive written some code that just about does the job but its not very elegant. See my SO question related to this isue here http://stackoverflow.com/questions/12508960/clearing-a-responsive-jquery-cycle

[malsup]

Give Cycle2 a try: http://jquery.malsup.com/cycle2/

[blowsie]

@malsup ooo cycle2!

Winning!

Thankyou!

http://jsfiddle.net/blowsie/HuNfz/49/

[malsup]

This is exactly the kind of thing that Cycle2 solves. Please take a look at the demos. It's not a drop in replacement for Cycle.

On Wed, Sep 26, 2012 at 10:00 AM, blowsie [email protected] wrote:

@malsup https://github.com/malsup ooo cycle2!

unfortunately it still doesn't fix the height / clearing issue for me, any suggestions on the setup? http://jsfiddle.net/blowsie/HuNfz/48/

— Reply to this email directly or view it on GitHubhttps://github.com/malsup/cycle/issues/117#issuecomment-8890672.

[edelmoral]

Same Issues @malsup .... Cycle don't let me solve the responsive issue and Cycle2 don't let me change the timeout and in a dynamic way...