Slideshow height not wrapping responsive images [#1785666]

I can create a views slideshow using a standard image style and the initial page load of the slideshow renders correctly. However if I use a responsive style set then the initial page load renders like the attached screenie. Once the slideshow transitions to the next slide it gets redrawn correctly.

Any ideas what may be causing this or how to correct it?

views slideshow responsive initial page load

Comment	File	Size	Author
	views_slideshow_responsive_initial_load.png	417 KB	caschbre

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

attiks CreditAttribution: attiks commented 15 September 2012 at 19:08

What module(s) are you using for the slideshow?

Comment #2

caschbre CreditAttribution: caschbre commented 15 September 2012 at 19:56

I'm using views_slideshow. I've included the json2.js library for advanced jquery slideshow configurations that were necessary to get the slideshow responsive. Here are some of the settings I've configured / changed...

Make the slide window height fit the largest slide: unchecked
height: auto
width: auto
containerResize: 0
slideResize: 0

I'm going to be writing up how to use resp_img 2.x and am hoping to also add how to use it in a slideshow. This last bit appears to be the only thing holding me up on the slideshow piece.

Comment #3

caschbre CreditAttribution: caschbre commented 15 September 2012 at 19:58

One thing I will say is that if I'm using views_slideshow w/o the responsive image style set the slideshow appears to redraw itself after the page has loaded. When using a responsive style set, that redraw doesn't seem to happen until the first slide transition. I could be completely off in that speculation, that's just what looks like is happening.

Comment #4

attiks CreditAttribution: attiks commented 16 September 2012 at 08:32

Problem is caused by how to slideshow is setup by views_slideshow.js, we had a similar problem in the 7.x-1.x branch and added some extra javascript to handle it.

For slideshows we mostly use flexslider (module or directly). Even better would be to use something like responsive carousel

AFAIK to only way to solve this problem is by adding javascript similar to http://drupalcode.org/project/resp_img.git/blob/refs/heads/7.x-1.x:/resp...

Comment #5

caschbre CreditAttribution: caschbre commented 20 September 2012 at 16:08

I finally got flexslider to work once I realized that I needed the v1.8 library and not the v2.0. I'll get a write-up for that as well.

Where flexslider struggles as a "content" slider is that it really focuses on just an image... and a single image slide at that. It tries to put any text content into a "caption" so if you want a slider with a title, teaser, image, etc. side-by-side as a slide then it's not quite as flexible as views_slideshow. I should be able to work around that issue with the flexslider template file I think. I'll have to test that out.

The other reason I want to try and get views_slideshow working with this module is that it can render multiple slides together. So for example, I may have 10 total slides but I render three at a time.

Those are more advanced responsive slider examples though. Let me get the instructions written up for the easier ones first. Then I may need to ping you for more help. :)

Comment #6

caschbre CreditAttribution: caschbre commented 20 September 2012 at 19:41

Oh, I also wanted to know if there is a "responsive carousel" plugin / module for Views? I'd be interested in giving that a shot if you find it a better option than flexslider.

Comment #7

attiks CreditAttribution: attiks commented 21 September 2012 at 06:51

#5 flexslider can handle any div, but the flexslider project is indeed only image, title and caption.

AFAIK flexslider (the js library) can show multiple items at the same time as well. The problem with the views_slideshow is that the javascript code contains a lot of try ... catch blocks, which triggers firebug most of the time.

#6 I would love to see an implementation of http://filamentgroup.com/lab/responsive_carousel/ in Drupal, but I don't have the time right now.

If you need any more help/info feel free to ping me.

Comment #8

caschbre CreditAttribution: caschbre commented 21 September 2012 at 15:49

One question I do have now is how does responsive carousel compare to flexslider (library, not module) when it comes to responsive slides? Or compared to any of the other responsive slider libraries out there?

Comment #9

attiks CreditAttribution: attiks commented 21 September 2012 at 17:03

I didn't do a full comparison of both, but the carousel has support for touch devices. No idea how they handle the responsive part, but I guess they use a polyfill

Comment #10

Lukas von Blarer

he/him

CreditAttribution: Lukas von Blarer commented 5 November 2012 at 23:48

Project:	Responsive images and styles	» Views Slideshow
Version:	7.x-2.x-dev	» 7.x-3.x-dev
Category:	support	» feature

views_slideshow is a widely used javascript slideshow for Drupal because of it's flexibility. What needs to be done to support views_slideshow? What is flexslider doing that views_slideshow doesn't do?

These two modules are a really powerful combination and we should definitely integrate them! Moving this over to views_slideshow...