Window resize problem

[baccano77]

Hi, here's the issue: I have a gallery with percentage height and width. When i resize the browser, the gallery resizes as well but here's the problem: If i shrink the browser, the images also shrink but in the transition they take the same amount of gap as if they were larger, the opposite problem occurs if i enlarge the browser's window, when the next image starts to come in it overlaps the previous one. How can i fix this problem? Here's the config code:

$("#imagegallery").cycle({ timeout: 0, fx: 'scrollHorz', next: '#next', prev: '#prev', containerResize: true, fit: true, aspect: true, scaling: false, slideResize: false

});

Thank you in advance.

[ghost]

The only solution I've found is to destroy jquery cycle and recreate it every time the window is resized. It's super-jerky and eats a TON of CPU though.

[daltonrooney]

I would love to know about this too. It's no problem for the fade transition, but it makes the scrollHorz transition a bit ugly.

[vwoohu]

I was thinking of using the jquery plugin Flexslider for a project because it has a feature that allows the carousel to resize and stretch to different window sizes. However, it's limited on animation options (vertical and horizontal scrolls).

One solution I thought in your case, is to pause the transition when window resizes and resume after resizing is complete.

Might work, but the animation might be ugly... I'll test it tomorrow and let you know.

Vincent

[fuddl]

The drupal cycle module has a routine for this.

      if (options.reset_on_resize) {
        $(window).bind('resize', function() {
          _this.drupalCycle('reset', options);
        });
      }

it also keeps in mind the current slide and uses it as the starting slide in the reinitialisation process. I can't say its a performance problem.