How to let images within slideshow resizing when windows resizing(layout flexible)?

I don't work that fast. Patience is key here. I think the jquery cycle module would have to support that somehow. I'm not sure how that would happen, but is definitely something I will look at in the future. It won't be supported in the 2.x version of views slideshow though.

Hello Shoufeng.xi,
You don't always get a response with in the same day from the community ;)

I believe the easiest way to accomplish what you are trying to do can be done with some CSS magic.

Lets say I have the following views_slideshow output in a block (the following lists off IDs & classes) and that block is contained within a *fluid* region on the page.

div #block-views-slideshow_main-block_1 .block
 div .block-inner
  div .content
   div .view view-slideshow-main view-id-slideshow_main view-display-id-block_1 view-dom-id-3
    div .view-content
     div #views_slideshow_singleframe_main_slideshow_main-block_1 .views_slideshow_singleframe_main views_slideshow_main viewsSlideshowSingleFrame-processed
      div #views_slideshow_singleframe_teaser_section_slideshow_main-block_1 .views_slideshow_singleframe_teaser_section
       div #views_slideshow_singleframe_div_slideshow_main-block_1_0 .views_slideshow_singleframe_slide views_slideshow_slide views-row-1 views-row-odd
        div .views-row views-row-0 views-row-first views-row-odd
         div .views-field-field-slide-img-fid
          a .ext
           img

Create some CSS for your slideshow (this is if you haven't created a template to override your Views Slideshow template)
Example CSS for the above structure

/* no margin or padding on any of the elements holding the slides */
#block-views-slideshow_main-block_1,
#block-views-slideshow_main-block_1 .block-inner,
#block-views-slideshow_main-block_1 .block-inner .content,
#block-views-slideshow_main-block_1 .block-inner .content .view,
#block-views-slideshow_main-block_1 .block-inner .content .view .view-content,
#views_slideshow_singleframe_main_slideshow_main-block_1,
#views_slideshow_singleframe_teaser_section_slideshow_main-block_1,
#views_slideshow_singleframe_teaser_section_slideshow_main-block_1 .views_slideshow_singleframe_slide,
#views_slideshow_singleframe_teaser_section_slideshow_main-block_1 .views_slideshow_singleframe_slide .views-row,
#views_slideshow_singleframe_teaser_section_slideshow_main-block_1 .views_slideshow_singleframe_slide .views-row div {
  margin:0;
  padding:0;
  width: 100%;
  position: relative;
  }

#views_slideshow_singleframe_teaser_section_slideshow_main-block_1 .views_slideshow_singleframe_slide .views-row div.views-field-field-slide-img-fid img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 600px; /* what is the biggest width you would want the image scaled to? */
  height: auto;
  }

Note: I've tested this through Web Developer Toolbar on a Drupal 6 Views Slideshow and the slideshow did scale when changing the block's width.

I've also found some posts on Drupal about scaling slideshows. These posts about full screen slideshows may help.

• Full screen - http://drupal.org/node/1208546#comment-4693038
• Supersized - http://drupal.org/node/1312332

Reference
Full Screen jQuery slideshow - http://www.buildinternet.com/project/supersized/

@GreenSkunk thank you for helping out and responding.

I have been working on this problem for my own site over the last couple days. Just a word of advice for anyone else trying to make a fully scalable slideshow: use Firebug or similar (I personally like using the "inspect element" in google chrome), and search for any element above the img tag that is generating absolute positioning and fixed widths and heights, then write css codes to override them.

In my own case, I found that simply coding "position:relative" (in reference to GreenSkunk's ex. above) was not enough because, initially, the first slide would follow this rule, but would revert back to position:absolute and a fixed width and height based on the viewport dimensions when I clicked one of the pager buttons. So I had to add !important to position:relative, width, and height:

[autogeneratedelement] {

positon: relative !important;
width: 100% !important;
height: auto !important;

}

As of this moment, it's working in everything I've tested, but I'll add more if I find new solutions to new problems.

@tigerfist, could you post a link to the working slideshow as mine is being a pain in the a**e! Was responsive and fine, now is not.

One thing as well, are you using the advanced json2 options for yours?

Thanks if you can.

Sam.

wow, #7 saved the day, thank you tigerfist!. Expanding upon this, I have uploaded a screen capture to illiustrate where the fix needed to be and the CSS I implemented.

/* -- note these two are in the code in the screen capture */

/** the block slideshow block itself which defines pixel widths **/
#views_slideshow_cycle_teaser_section_home_page_slider-block_1,
/** and the views row which also defines pixel widths **/
.views-slideshow-cycle-main-frame-row
{
    positon: relative !important;
    width: 100% !important;
    height: auto !important;
} 

Note that the above code is not perfect, I ended up taking out height: auto !important; and then assiging various heights to my media query CSS as my theme was getting messed up otherwise.

Has anyone got a working example of a fully responsive views slideshow? The css to get this working is driving my nuts! I want a pager underneath the slideshow (3 slides), preferably centered. I use views results counter to get the numbered pager.

When I resize (decrease) broswer width I get one of either:

(a) a big gap appears between the image and the pager
(b) the pager disappears completely

In both cases, the image resizes fine but getting that pager to stay next to the slider is a mystery.

I can get it working perfectly with the pager above the slideshow but not below probably because of height issues or the pager is not clearing the image properly. Been at this for days! Does the lack of google results means not many have got this working well?

If someone could help before my (what's rest of my) hair falls out, that would be superb! Help here or even a private msg is fine, I can send you a link.

Sam.

Hair in one piece again! I was styling the .skin-default div with a height which caused the pager to disappear in decreasing resize. When styling only the divs around the image, and leave the pager to float down naturally on its own, everything is good again. So far... I will post again if anything breaks.

/*get a horizontal scrollbar on resize unless this bit is in there - wraps the entire slideshow including pager - this example has a views result counter as pager underneath*/
.skin-default {
width:100%;
overflow:hidden;
position:relative;
}

#views_slideshow_cycle_main_featured_slider-block,
.views-slideshow-cycle-main-frame-row {
positon: relative !important;
width: 100% !important;
height: changes-for-each-stylesheet.px; /*includes an extra 10px height to account for border 5px*/
}

#views_slideshow_cycle_main_featured_slider-block .slider-image {
width: 290px; /*changes for each stylesheet*/
positon: relative !important;
height: auto !important;
/* optional background image to transparent slides ----
background: url(../images/feature-bg.jpg) repeat-x;
background-position: left top;
*/
border: 5px solid #fff;
border-radius: 5px;
}

/* rewrite result counter to include a span with class 'displace' around [counter] - plus output as link ahref #slider so you get an actual link to style */

.displace {
position: absolute;
left: -5000px;
}

/* add space between bottom of slide image and counter */
.views-slideshow-controls-bottom {
padding-top: 10px;
}

/* uses a small circle as a counter */
.views-content-counter a {
display: block;
float: left;
margin-right: 8px;
height: 12px;
width: 12px;
background: url(../images/pager-bg.png);
background-position: 0px 0px;
}

.views-content-counter a:hover {
background-position: -12px 0px;
}

.active .views-content-counter a {
background-position: -12px 0px;
}

...also adder another media query for landscape mobile so my slide exists in 4 states. Normal > narrow > landscape mobile > portrait mobile.

Works ok in IE7/8/9, FF, Chrome and on my mobile. Will test further to make sure. Thanks for the replies above.

Sam.

following. Thanks Sam

If anyone wants any more help with this, feel free to PM me, I can't keep updating the css. :)

I have a few of these slideshows working live on different sites and they all resize nicely and use different pagers.

Sam.

Hey Sam,

would you mind posting the URLs of these slideshows? I am struggling to get it to work, and having a look at your slideshow might help me find the issue.

Thanks!

Hey Sam,

would you mind posting the URLs of these slideshows? I am struggling to get it to work, and having a look at your slideshow might help me find the issue.

Thanks!

Hi dready2011,

Emailed you the links.

Sam.

I need the links too sam. Thanks

Sent :)

Sam.

Hi Sam,

thanks for your quick reply!
I was stuck in some other projects in the meantime, but now was able to work on this one again.

In the end, i ended up resizing the images using my own jquery scripts, cause I wasn't able to get a css solution working for both the width and height of the window.

Thanks again...
Stefan

Thanks @tigerfist, @highrockmedia, and @samwillc! This works beautifully.

However, anyone who's copying and pasting this CSS should note that there's a typo that has persisted through all the comments above, and your code will work better if you put two "i"s in "position." =:) Here's the corrected code:

/* -- note these two are in the code in the screen capture */

/** the block slideshow block itself which defines pixel widths **/
#views_slideshow_cycle_teaser_section_home_page_slider-block_1,
/** and the views row which also defines pixel widths **/
.views-slideshow-cycle-main-frame-row
{
    position: relative !important;
    width: 100% !important;
    height: auto !important;
} 

Should css code be commited to project?

Actually, now that I've posted the correction, I've found if you do have { position: relative; } on the Views row element, the slideshow doesn't behave properly — you get a flash during slide transitions where you can see both the current and upcoming slide one above the other (because you're overriding the absolute positioning which is essential to the slideshow operation). So I put position: relative only on the slideshow block itself, although I can't tell that that is having any effect, positive or negative.

So what I need is a different way to determine the height of the slideshow — because the slides are absolutely positioned, { height: auto; } causes the slideshow container to have no height, so a subsequent block of text falls underneath the slide. If I take out the { height: auto !important; } line, then the height is generated properly for the size of the initial viewport, but when you resize the window, the slide itself changes height but the space allotted for it does not, leaving a big gap between the slideshow and subsequent text as the window gets smaller, and overlapping the text as the window gets bigger.

How are other people handling this?

having the exact same issue...and its driving me crazy trying to figure out.

Anyone?

UPDATE: If I edit the CSS for the containing div for the slideshow element (the display id of the views slideshow, in my case #views_slideshow_cycle_main_frontpage-attachment_3) to the following:

#views_slideshow_cycle_main_frontpage-attachment_3{
	position: relative;
	width: 100%;
}

and then remove the position:relative properties from the row and slide classes, the slideshow transitioning goes back to normal. However, if I resize the page the image size remains the same until the page is refreshed.

As a sanity check, it looks like this altogether:

.views-slideshow-cycle-main-frame-row{
	width: 100% !important;
	height: auto !important;
}

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

#views_slideshow_cycle_main_frontpage-attachment_3{
	position: relative;
	width: 100%;
}

This worked for me: http://drupal.org/node/1510526#comment-6075772

I agree with msti/#26 at http://drupal.org/node/1510526#comment-6075772. That fix does 95% of what I want but @djbucci your code doesn't re-scale my images.

@msti I'm about to look at this again but the one thing that doesn't fix for me is the height of the container divs. It's hard to tell which of them is causing the problems but effect is that the image res-scales great (when you re-size the browser) but the nested divs stay at the same height before resizing (either cropping off the image or leaving additional whitespace below the image.

I'm using FlexSlider on other projects meantime which seems to have the whole thing sorted - but has less configuration options than a Views slideshow (1.x series that is).

Q

Hey Sam, can you send me the link?
Thanks

The code I posted in #4 is for D6 but I have some Drupal7 Views Slideshow CSS for you. We have one site that does a fullscreen scalable slideshow using just the following:

.views_slideshow_cycle_main,
.views_slideshow_cycle_main div {
  margin:0 !important;
  padding:0 !important;
}
.views_slideshow_cycle_main,
.views-slideshow-cycle-main-frame,
.views-slideshow-cycle-main-frame-row {
  position:relative;
  width:100% !important;
  height:auto !important;
  z-index:1;
}
.views-field-field-image-slide img {
  max-width:100%;
  height:auto;
}

When comparing the CSS from http://drupal.org/node/1510526#comment-6075772 to the above I see several additions and differences between the two. I do not have the time to create a test between both at this time but my interest is piqued.

@quantos Yes, I have a problem with the height of the container as well.

Hi Folks,

I found this solution worked for me (D7): http://drupal.org/node/1510526#comment-6075772

Cheers
Brendan

#4 works excellent, thanks!

Hi everyone, just my two pennies worth.

I have gone the css route before and it is infuriating! Yes it can be done and I managed it on a few views slideshows but I found by far the easier method is to use:

http://drupal.org/project/flexslider

PM me if you want a link to my site which uses it as a featured slider. All you do is set up a views slideshow and choose 'flex slider' (i.e. uses the jquery flexslider library) in views instead of 'cycle' in the dropdown and away you go, styling is pretty simple too. I am not 100% if it as flexible as views slideshow (i.e. with 'cycle' library) and custom fields as my usage is more straightforward.

Works a charm though.

Sam.

Hey guys,
excellent stuff :) and working for me except for one small problem... I have a bottom pager which contains images and I can't get those images to resize and maintain appearance, instead they move from displaying horizontally to displaying vertically :(

any ideas for css magic?

you can also use this css

.views-slideshow-cycle-main-frame{max-width:100%;width: 100% !important}