Responsive slideshow

Yes! +1 for this feature.

Spicy
+1

Would love to see this too!

I am willing to look into contributing a patch to fix this, only if it will be accepted by the maintainer to be included into the module?

Patch are always welcome, and needed!
(I'm working in a full-time position now, so no so much time to write them myself)

Looking into this further, it looks like we just need to add/modify in the options of the jQuery Cycle Plugin:

containerResize: 1, // resize container to fit largest slide

Unfortunately, I don't think this is a good solution.
I was using this option when I began coding this module, but the problem is that the resize happens only when the DOM is fully loaded… So when the page is loading, the layout of the page is not always right, you sometimes see all the slides, and then only when everything is loaded (and this time can be long, because a slideshow by nature, has many images to load, and even longer if imagecache needs to resize them on the fly), the slideshow is resized. Not very pretty.

Where did this get to?

We looked at Flex http://flex.madebymufffin.com/
Got it all plugged into Views Slideshow too. But I think other solutions exist and are coming online.

RE: Jdanthinne's post I think this is a FLOUT like issue. Himerus identified this as an issue, the solution being to use small calls and then get the @media call to cut in.

TBH haven't tried it (hence the naughty Flex method). But if you can elaborate on the DOM would be great!

I think slideshows with lots of images will always suffer this in responsive. But I think good UX now suggests that fewer and more concise (minimalist) slideshow is best. Realistically how many users are going to be hanging around on your homepage and above the fold (yes I know this is subjective - but as a rule of thumb) before clicking on a CTA?

If the slideshow has 4 or 5 images that might be 50-70k per image, which doesn't add up to much on the first DOM run at a small mobile first size, then launches the large image sizes.

Could something like Nginx or APC also help here?

Bit muddled now on this, no clear path - anyone recommend anything?

Please have a look at http://drupal.org/node/1323658 which also contains a link to a second sandbox. flexslider already works pretty well with views_slideshow...

Atm the integration work doesn't work out of the box with field_slideshow. However the module in development is structured in such a way that field_slideshow should be able to make good use of it.

There has just to be somebody to code the integration. ;)

I've attached a patch to integrate with a patched Adaptive Image module (http://drupal.org/node/1355420#comment-5306096) to output proper slideshow dimensions when using an image style with an Adaptive effect. (In the patched Adaptive Image module, an image style eg. 'medium' with an Adaptive effect returns resolution-dependent styles eg. medium_960, medium_740. However as it stands the Field Slideshow module returns dimensions of the original style, 'medium' in this case. This patch returns the proper dimensions of the style actually used in the window's resolution).

NB This doesn't scale the slideshow continually during a window resize - only at certain breakpoints defined under Adaptive Image.

UPDATE: changed the patch so it simply scrapes any width/height info from the $image_output if already present (saving a second getimagesize() call).

Useful for Adaptive Image module where the dimensions of outputted (resolution-adapted) image may not match the dimensions of the called image style.

bgilhome,

I tested your patch running the 7.x-1.3 version of Adaptive Image, but it failed with the 7.x-1.5 version of Field Slideshow. Are you planning on resubmitting the patch to accommodate the recent updates?

jdanthinne, is there any possibility of an updated patch of this type being committed?

Any more movement on this? The only real slideshow I use because of it's integration with Colorbox, but unfortunately it's not playing ball with Omega and the above adaptive image solution ain't working even though I've rolled back to an earlier version.

subscribing. Very important feature this. You can easily get images to rescale using CSS and/or the Adaptive Image module but finding a way to get the slideshow object dimensions to rescale when the browser does would be absolutely optimal. Would help if I could.

This may prove useful to some as an interim solution, I've used this Jquery snippet to resize the parent div to match the child imagine contained within it.

This functions fine so far in my responsive layout:

(function ($) {
$(function() {
$(document).ready(function(){
$(window).resize(function() {
$('.responsive-layout-mobile .field-slideshow').css('height',$('.responsive-layout-mobile .field-slideshow-slide img').height());
});
});
});
})(jQuery); 

I've set the following css on the slideshow image:

.field-slideshow-slide img {
    height: auto;
    position: relative;
    width: 100%;
    }

And I've set the following css on the slideshow image container:

.field-slideshow, .field-slideshow-slide {
    width: auto !important;
    }

Thanks Tony, btw. Haven't had chance to test this as * embarrassed * not sure where you would place the Jquery function?

You can place it in the head region of the html.tpl.php file

Hey! It's fine work with firefox, but image hidden in chrome =( Any fixes?

#18's solution works great for my purposes, except it leaves a gap at the bottom of the slideshow in smaller viewports (the height of the largest viewport's image). Just as a warning to anyone else implementing #18 (which is pretty great, I am not advising against it).

Yes, this happens if you specify height of div. But if doesn't specify it in Chrome it flattens to 0 pixels and not displayed.

I'll look into it on the current site I've used it on, I've noticed a few issues (resizing incorrectly) with Chrome but not a full collapse.

Ok so the following seems to work cross browser (well ones that support HTML5 and media queries).

First the jquery

(function ($) {
$(function() {

	$(".field-slideshow").prepend("<img class='placeholder-image' src='insert transparent image here that is the same aspect ratio as your image, e.g.  2px  x 1px expands to 10 x 5, 100 x 50 etc etc ' width='100%' height='auto' />");

});
})(jQuery); 

Next include the following CSS

.field-slideshow-wrapper img.placeholder-image{
   /* for IE9 */
   height: 100%\9 !important ;
    }

.field-slideshow-slide img {
    height: auto !important;
    width: 100%;
    }

.field-slideshow-wrapper,
.field-slideshow,
.field-slideshow-slide {
    height: auto !important;
    min-width: 100%; /* Required by Chrome */
    width: auto !important;
    }

This appears to be working in FF12, Chrome 18 and IE9. I will perform further testing tomorrow

Any patch with a good solution in the near future?
Maybe with Adaptive Image module?

work fine except IE9 =(

I've tidied the CSS a little:

.field-slideshow,
.field-slideshow-slide {
    height: auto !important;
    min-width: 100%; 
    width: auto !important;
    }
	
.field-slideshow-slide img {
    height: auto !important;
    width: 100%;
    }

.ie9 .field-slideshow-wrapper img.placeholder-image{
    height: 100% !important ;
    }

If you are having issues in IE9 you have to do one of the following

Use the IE9 hack (not recommended) below (\9)

.field-slideshow-wrapper img.placeholder-image{
    height: 100%\9 !important;
    }

Or implement the following code in your HTML.tpl.php header section

<!--[if IE 9 ]> <body class="<?php print $classes; ?> ie9"> <![endif]-->

This will add a class of .ie9 onto your body tag, then all you have to do is prefix your css with that class to make it IE9 specific, like below.

.ie9 .field-slideshow-wrapper img.placeholder-image{
    height: 100% !important ;
    }

This way is better as it is not a hack and will validate.

It's work very strange in IE9, from 5 image it show 5 image, then one blank div with small thumbs...

@Tony Finlay
Any chance to test it also with older ie versions?

Hi Johnny, it collapses in IE6, 7 + 8.

I never bothered targetting those browsers as they do not support media queries and I will probably set up specific CSS for them.

I can see why you might need the functionality in those browsers if you have a fluid site, I'll look into it further when I've finished debugging my current site.

I do some tests with gridless. It's a nice base layout with cross browser support. Browsers which haven't media queries support use JavaScript, but also looks ok without media queries and deactivated JavaScript.

So with JavaScript media queries shouldl be supported from ie 6+, but a acceptable fallback (maybe simple a non responsive slideshow like it is at the moment...) woould be great.

Have someone tested that module?
http://drupal.org/project/resp_img

look like it's requirement install omega theme for worked...

Requirements
None

Haven't tested it... Tried FlexSlider instead. Works fine as a flexible and responsive slider, but without colorbox support.

Yeah! Nice module (FlexSlider) thx!

What about something like this patch?

The only remaining task I see would be to add this library as a dependency: https://github.com/desandro/imagesloaded
This would allow to call the rebuild_max_height function when images have been loaded. Another solution would be to call this with some interval but it not ideal.

edit: Hmm, with modules like resp_img the images can change at some breakpoint, so the imagesloaded might not be enough in this situation. The interval would solve this but I hope to find a more elegant fix. Any idea welcome : )

@idflood, thanks for the patch! It works for me for the latest dev. But I've patched manualy file field_slideshow.js, because during patching I've: Hunk #2 FAILD at 113. Only in Internet Explorer 8 current slide doesn't stretch.

to #38:
My solution for IE 8, which also works in all browsers:
.field-slideshow {
overflow: hidden;
max-width: 100%;
padding:0 !important;
}
.field-slideshow-slide, .field-slideshow-slide a, .field-slideshow-slide img {
max-width: 100%;
height: auto !important;
width: 100% !important;
}

@khiminrm: Thanks for the feedback and little fix : ) I will try to continue to work on this issue as soon as possible.

I've been working on this off and on the last couple days. There are a few issues I've found and have a new patch in the works but need to do some more testing before I post it here.

Here's a patch that corrects the issues I found, which are listed below. Please test.

I included the option to use the imagesLoaded plugin for the efficiency of having the slideshow finish resizing immediately after the images load and before the rest of the page has finished loading.

Testing both with and without the ImagesLoaded plugin is appreciated.

The instructions for the adding ImagesLoaded plugin are, as found on the status report page.

For best results, you should download the JQuery ImagesLoaded plugin and move the downloaded js file(s) into the sites/all/libraries/jquery.imagesloaded folder of your server.

I tested on Firefox and Chrome on Windows, Mac, and Android 4.0. Safari on Mac, iPhone, and iPad. IE8 & IE9 on Windows. Ice Cream Sandwich on Android 4.0.

Issues on #37 patch:

1. Using the img tag means it doesn't incorporate captions when they're included. On resize, the slide collapses to the image height and captions below the image are hidden.
2. If you have multiple instances of field slideshow on the same page, when rebuilding the height, the variable slideshow always references the last instance. Only the container height on the last instance is changed. The slideshow containers of the other instances keep the original height.
3. Without detecting and manually setting the slide height at load, on iPhone the height of the slide container isn't resized.
4. Changing the CSS position on the slide between "absolute" and "relative" can make the slide briefly visible in the "absolute" state during the transition. When the slideshow images are smaller than the slideshow's parent container and the caption with text runs longer than a single line the width of the image, this causes a momentary flash where the text fills the entire space of the slideshow's parent container.

Development notes: (no need to read on if you're just testing)

1. This patch uses the the dimensions of the .field-slideshow div for resizing so the height of the caption text (if present) is included.
   
   
2. The resize handler is independent of the slideshow initialization. That way all instances are resized, and there's not repeat binding of the resize event handler to window for every instance of the slideshow.
   
   
3. The imagesLoaded plugin is to address the issue with image.load() not being reliable. I don't think that plugin is required in this case. imagesLoaded is necessary if you're changing the DOM and need to fire an event after the images have loaded, but since we're not adding images after page load, window.load should be fine. (I've been trying to research whether window.load() has the same reliability issue as image.load(), but haven't found anything that immediately addresses that. In my testing, window.reload was reliable.)
   
   But imagesLoaded is a better option than window.load() because it will trigger as soon as the images are loaded rather than waiting until after the entire page is loaded. I made the imagesLoaded plugin optional but use window.load() if the plugin isn't installed.
   
   
4. I took out the switch to "position:relative" on the active slide. It doesn't seem necessary, and it could change the display of existing slideshows on upgrade. (With images smaller than the width of the caption, the text runs past the image with the current "position:absolute". With "position:relative", the text extends only the width of the image. That could mess up existing slideshows for people who expect it to have that behavior.) If there's a good reason I've missed that makes "position:relative" important, we can find another solution.

@cristinawithout, great work! I've tested your patch. All works fine with and without JQuery ImagesLoaded, with image style preset and with original large images. But in IE 7 and IE 8 doesn't work until I change width: 100% !important; for .field-slideshow-slide img and add padding:0 !important; for .field-slideshow. I use browser mode in IE9 for testing IE7 and IE8

khiminrm, thanks for testing and the feedback.

What theme are you using? I'm hesitant to put that CSS into the module. The patch's CSS is all that should be necessary for IE8 responsive images. My own theme has no problem with IE8.

Using width:100% isn't going to work, because if the images are different widths, it stretches the smallest one to the full width of the slideshow. That will change the display of existing slideshows on upgrade.

I can look and see if there's something else we can do for IE8, but it might be something a theme's CSS should fix or tweak.

Thanks everyone for the info and discussion.

I am using Field Collections to create long, detailed captions and formatting the content using Field Slideshow. It's perfect, BUT, it's not adaptive, even when I select 'Adaptive' (using AIS Adaptive Images Module w/ Omega / D7).

So, the above patch should make that work? My image galleries will have anywhere from 8 to 40 images each.

I can achieve almost the same thing with Flexslider, which works great, but formatting the output has been a bit challenging. Field Slideshow seems to look good right out of the box.

Hi, cristinawithout. I am using a subtheme of Adaptive theme - 7.x-3.1 and Display suite 1.5 for my page display. I use layout with fluid regions. I hope this info will help to find solution in my case. Thanks for your response!

hello,

Patch #42 from cristinawithout works just fine with the 7.x-1.6 :)
Tested with/without imagesloaded. (on FF, chrome, IE. - below IE7 it seems not working)

ps: I use omega subtheme too.

Many thanks for the contribution Cristina !!

I am using:
field_slideshow 7.x-1.x-dev
Last packaged version: 7.x-1.6+25-dev
Last updated: September 11, 2012 - 16:28

I am using an Omega subtheme
I applied your patch to the module.
I have not set up the JQuery ImagesLoaded plugin yet.

The results are beautiful so far.
This is in all my Mac browsers (Safari, Firefox, Chrome, Opera) as well as my iPod touch.
Also, the slideshow field is in a node display taken over by a panel display.

Thanks, I will test more.

Just tested the patch and also took a look at the code. Here is a reroll without trailing-whitespace - else it looks fine. Also it seems to work against 1.x-dev instead of 1.1. RTBC!

torotil, dougzilla, Thanks for this - I've been spinning my wheels for many weeks on this and other solutions. Can't wait to try it and will report back with all specs.

Dan

This took a bit of doing, but I finally have it working on my local site, which unfortunately, has a large number of test gallery modules (makes things a little more confusing).

Patched the dev. module of field slideshow, and am using the AIS Adaptive Image module. Hoping I can duplicate it on my live site this week. I'm keeping notes as I work, and will be happy to format and share those as well, once I have a live, styled gallery. Thanks everyone, for all of the effort on this much-needed capability.

Dan

I have the the JQuery ImagesLoaded and jquery.cycle.all.js installed.

A couple questions, if anyone can answer:

Is there a way to have a clickable PAUSE button (text) between Prev and Next?
(The slides kept changing as I was inspecting elements in Firebug.) I know it's possible to set a longer delay, but I would like to have a Pause function.

Is there a way to center the image in the gallery window without also centering the captions (I'm using a field collection text field)? I can only seem to center them both at one time by using text-align: center.

Using a thumbnail navigation carousal, is there a way to keep the images from overlapping at the smaller screen sizes? Setting a smaller number of thumbnails displayed would work, but then when the gallery is displayed on larger screens, the thumbnails will be way too far apart.

Thanks! This is shaping up nicely.

OK, after a lot of experimentation, I was able to center both horizontal and vertical images using the css:
div.field-slideshow-slide {display: inline-block; background-color:green; text-align: center; width: 100% !important; }

But, when I resize the browser window, the page has to be reloaded to change the container size. If I start with a wide browser and shrink it, the container will overflow the right (only) sidebar (Omega).

Reloading the page resets the contaner to the new size and then it again fits perfectly.

Not ideal, but not a total deal breaker. Anyone have a suggestion?

I've tried adding classes through Display Suite (for the content type, not the field collection), but that didn't make a difference for this.

I strongly second the RTBC of this fabulous patch. This works nicely even without the additional library (using adaptivetheme). Thanks @cristinawithout and @torotil. This patch should get into a dev rather soon and any problems with it should be discussed in separate issues.

@muranod
Although I understand your wish to get a working solution for your problem please be careful not to devolve this issue into your personal support issue. The patch works as advertised on a vanilla install. That is important for now.
Side-note: Please make use of the fantastic Firefox feature under Webdevolper settings which allows you to watch your site under different device sizes (don't know how this feature is called in English as I am using the German FF). This provides you with much better results than resizing your browser window.

Thanks all, and especially @cristinawithout!

Commited: http://drupalcode.org/project/field_slideshow.git/commitdiff/0c9d178803e...

@dddave
Thanks for the side-note tip on FF.
I am just starting to do responsive themes. I did not know about this functionality and I have been using Firebug for years. D'OH!

thanks for your work but the instructions for the JQuery ImagesLoaded plugin, on the Status Report page don't work (all browsers also), do you know if that's the correct path/filename? - it's not clear from the project page how the plugin fits in/no mention that it's required. cheers :)

sorry to beat on a fixed issue.
maybe i am mistaken, but i didnt find a way to get the images to always display at 100% using only css (upscaling if necessary).

i did however by adding an option to the module as in the patch.

for this to work i also had to replace width:auto with width:100% in my themes css as so:

.field-slideshow-slide, .field-slideshow-slide a, .field-slideshow-slide img {
width: 100% !important;
}

did i overlook a way this was already possible (without reloading the page)?

here, i forgot to add the setting to function field_slideshow_field_formatter_info ...

+1 for comment #60. Need to be fixed the path or the instructions.

My question: this Jquery Image Upload would do the trick for responsive layout?

Thank you.

Any reason why we are calculating the height of the container (.field-slideshow-slide) instead of the height of the image in rebuild_max_height?