Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
How do i create views slide-show for responsive design. any help will be appreciated
Comment | File | Size | Author |
---|---|---|---|
#52 | views-slideshow-cycle-responsive.patch | 2.1 KB | John Franklin |
Comments
Comment #1
mrcorbtt CreditAttribution: mrcorbtt commentedI do it using CSS:
Unfortunately this doesn't help it resize vertically (the images do but the div doesn't) - but it works to a point.
Comment #2
pixelsweatshop CreditAttribution: pixelsweatshop commentedSupport requests are never critical. This is also a duplicate of #1146566: Can't remove the height/width of the slide container
Comment #3
Kristen PolThanks for the starter CSS. I found I needed to tweak it slightly so I'm adding my version here:
in case it helps someone else.
Comment #4
scoflo CreditAttribution: scoflo commentedHelped me, thanks!
Comment #5
mstiThis worked for me too.
Comment #6
sioux CreditAttribution: sioux commentedThis works on my slideshow, but only when I reload the page. Is there a way to force it to resize automatically?
Comment #7
BrendanP CreditAttribution: BrendanP commented#3 worked a treat for me, thanks @Kristen Pol
Comment #8
Pere Orga@sioux although far from ideal, I've come up with a solution (in combination with @Kristen Pol's fix) using a jquery script:
Comment #9
pixelsweatshop CreditAttribution: pixelsweatshop commentedThere is no need to create your own solution or hack to get views slideshow to be responsive. As per my comment in #2, the solution is found at #1146566: Can't remove the height/width of the slide container
Comment #10
Pere OrgaI had an issue with #3: Sometimes the horizontal scroll appeared when window was resized.
Using
instead of
seems to fix it.
Comment #11
Pere OrgaOk, then I'm sorry for the second post :)
Comment #12
Lukas von Blarer#3 and # 8 worked perfectly! Thanks for sharing!
Comment #13
danabel CreditAttribution: danabel commentedI've just developed the javascript from #8 (thanks @netol). It now supports having more than 1 slide show on a page and doesn't depend on an image being the height of the slide. Hope it helps someone.
Comment #14
bodyblueprinter CreditAttribution: bodyblueprinter commentedHi...I'm not a themer and tried inserting #3. Not getting the resize effect, but I think it is related to id? Sort of stuck, any help is appreciated.
here is a link to the page: http://dev.toadalfitness.com/home_show
Thanks!
Comment #15
Kristen Pol@bodyblueprinter - I checked and it appears that the CSS is in there.
You might want to instead try the javascript from #13. You would need to put it in a .js file in your theme and make sure your theme loads it.
Comment #16
dadderley CreditAttribution: dadderley commented@Kristen Pol
Thanks for the css
Comment #17
jorisx CreditAttribution: jorisx commentedWorks nice !
The image is now fixed at the top left.
Any idea how I could scale the image from center?
Comment #18
markusa CreditAttribution: markusa commentedGreat css in #3 and jquery in #13....this is a good working solution.
Using with adaptivetheme
What about slideshow overlays?? The overlay appears fine for whatever configuration the page is loaded in....whether it be for tablet portrait, tablet landscape or desktop css versions from the media queries...
But if I am using a desktop browser the views overlay is not changing size or position relative to the slideshow as I make the browser window's width smaller. This is not a huge deal since the overlay will display fine when a tablet user loads the page...but it would be nice if my video slideshow solution w/overlay was tight all around. I suppose I need to do this in the jquery but I just don't know exactly what to do.
Comment #19
Katy J CreditAttribution: Katy J commentedThanks guys. #3 worked for me on it's own.
Comment #20
PolComment from Kirsten Pol (#3) and script from Danabel are the best solution for me !
Thanks you both :-)
Comment #21
Anonymous (not verified) CreditAttribution: Anonymous commentedThanks to all who offered solutions here. Making Views Slideshow responsive was a lifesaver for me.
I do have some questions however.
My application of the slideshow is this:
1) Each page of the slideshow consists of a a smallish left-floated graphic.
2) And a paragraph of text.
On wide screens, the graphic has a greater height than the text.
On the smallest mobile screens, the text has a greater vertical dimension than the graphic.
I implemented the css solution in #3. That works pretty well.
What it doesn't do is dynamically resize the slideshow area as you decrease and increase the size of the browser window.
In the case of decreasing from a larger to much smaller-sized window, the dimensions of the slideshow don't dynamically adjust. The text floods into the footer region of the page.
However, when you reload the page, everything gets re-adjusted nicely.
I am grateful that this slideshow is now responsive at all, but is there no fix for this?
--
I've also implemented the #13 javascript fix in addition to the css fix.
I don't find any performance difference.
Could the reasons for implementing the .js fix be explained in greater detail by someone?
Thanks.
Comment #22
pixelsweatshop CreditAttribution: pixelsweatshop commentedFor those that are still trying to hack away at making views slideshow responsive try using something like Flexslider http://drupal.org/project/flexslider or Views Slideshow Liquid Slider http://drupal.org/project/views_slideshow_liquid_slider instead. View slideshow, more specifically jquery cycle 1, was built well before responsive design was even a "thing". You are going to find that it takes hack upon hack just to get something that eventually is just sort of responsive. When views slideshow leverages jquery cycle 2 http://jquery.malsup.com/cycle2/, then we will be laughing. Until then, do yourself a favor and use a module and a library that was built from the ground up to support responsive designs. See #1801332: Support Malsup's Cycle2 Plugin for more info.
Comment #23
Anonymous (not verified) CreditAttribution: Anonymous commentedThanks. I took your advice.
I'm new to Drupal (after running just static html sites), so everything I do seems encompassed within a fog of confusion.
I ended up using Liquid Slider. I failed with implementing FlexSlider both last week and again today. Liquid Slider installed in conjunction with Views SlideShow, so it implemented quite easily for me.
I was hesitant to use it because so few sites do (possibly it's new just this year, 2013?). I was also hesitant to use it because the demo showed it resizing each slide's height. Getting a static height (across all slides) turned out just to be a toggle.
Comment #24
nattyweb CreditAttribution: nattyweb commented#3 worked perfectly for me - thanks @KristenPol!
Comment #25
Collins405 CreditAttribution: Collins405 commentedUsing #3 and #13, the slider resizes, but it leaves a big gap on the page between the bottom of the slider, and any content in blocks below it. The opposite is also true, that when the browser window is full screen, the slider overlaps the text.
I added the js to a .js file, and referenced it from my .info file in my subtheme, and its loading. But I haven't noticed any difference since adding it.
Anyone else not managing to get the height to adjust properly?
Comment #26
sargismarkosyan CreditAttribution: sargismarkosyan commentedI am using this script, it updating sliders width and height when resizing window
Comment #27
petrovichby CreditAttribution: petrovichby commented[#26] worked for me. Thanks sargismarkosyan!
Comment #28
kirtan-1 CreditAttribution: kirtan-1 commented[#26] Where and how to add this script!
Comment #29
ruthiehallarsis CreditAttribution: ruthiehallarsis commented#3 Worked for me. thank you.
Comment #30
mohrizmus CreditAttribution: mohrizmus commentedIf we want to center the image, the code #3 sholud be modified as below.
The image styles should be resized to 1024px by 350px and scaled to 1024px by 350px. But the position of control bottom pager still maintain. I had tried using Omega 3 them, it worked for me.
Comment #31
jorisx CreditAttribution: jorisx commentedhmm #13 would stop resizing after my slideshow changed images?! not sure why..
I've changed #8 in a minor... which works for me;
Edit:
This works perfect in combination with css of #3:
Comment #32
thushad CreditAttribution: thushad commentedI tried this in so many ways. Views slide show is the best in category. But i think in terms of responsive design, BX Slider doing a pretty good job. You can add it manually to drupal and works very well.
Comment #33
i25 CreditAttribution: i25 commentedThe code in #30 works great. The only issue I'm having is that when the browser window is shrunk (width), it squeezes the image horizontally, so it becomes dis-proportioned. What changes can be made to this CSS code to fix that one problem?
Comment #34
elkz CreditAttribution: elkz commentedI'm working on a website with a (views) slideshow with multiple elements and the pager as filter (without transition delay, looks like it's not a slideshow). As default, each slide and the container take the size of the biggest slide.
This code below add the size of the active slide to the container when I resize my window or when I click on the pager/filter. (add some css transitions for effects)
views_slide_resp_detailtech_click(); ==> DOCUMENT READY
views_slide_resp_detailtech(); ==> WINDOW LOAD & WINDOW RESIZE
CSS :
hope this help
Comment #35
HAKLO CreditAttribution: HAKLO commentedI tried all these but none of them working work the Frame Height. Am I missing something?
Comment #36
Internet CreditAttribution: Internet commented#3 worked for me, thanks.
Comment #37
cscott5288 CreditAttribution: cscott5288 commentedI've tried all of these too - none of them worked. I'm supposing the people they worked for are using an older version of views slideshow.
I think this is just absurd that one of the most popular modules for slideshows on drupal doesn't have basic responsive support ... it's as simply as allowing an option to set the image with to 100% instead of a fixed pixel width.
Comment #38
maxplus CreditAttribution: maxplus commentedHI Thanks,
a combination of #3 for the width and #13 for the height works for me.
But in some cases after scaling down my window, I do need a page refresh to let the JS of #13 fix my height.
Comment #39
granularsound CreditAttribution: granularsound commentedI scooped up Kristen's, (Comment #3).
Worked out of the box.
Want to thank her for providing that.
I was porting my static site over and already did that legwork once of making it responsive!
Comment #40
FuXXz CreditAttribution: FuXXz commentedNo CSS will make this Slideshow responsive. You sill load the big images for mobile devices. This sites are ugly where i have to load a very big image on my phone which is only scale down with css.
One Solution is Flexslider with breakpoints and picture module until cycle 2 is implemented
Comment #41
timme77 CreditAttribution: timme77 commented#26 worked for me! Thanks
Comment #42
NIKS_Artreaktor CreditAttribution: NIKS_Artreaktor commentedHere is another way to do image backstretch underground - without JS !!!
Download
https://www.drupal.org/project/image_url_formatter
(we can output image like href to image.)
In views image field display - change URL formatter and check "Full Url"
Change views field tpl of image like this
Add in css style add code
That all!
With background-position: ***; we can change align of background image.
You can use css in #3 for
.views_slideshow_cycle_main {}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {}
.views_slideshow_cycle_main .field-content {}
===========================
The example of main idea here
http://jsfiddle.net/gerritvanaaken/gFJs9/2/
Comment #43
NIKS_Artreaktor CreditAttribution: NIKS_Artreaktor commentedThere is SECOND way to make it with jquery.backstretch.js
http://srobbin.com/jquery-plugins/backstretch/
But there is problem with width. Script detect wrong width of slide.
I was trying to change width every time after "cycle slide" change, but didn't get result.
And only way I could beat it - make it slideshow cycled.
I added in views Content:NID field
then
In views image field tpl change output
In that way I make backstretch slideshow cycled very fast, even you change window size.
Used css something like #3
If somebody can help to beat width of backstretched image after slide change- please write.
It could help to not use cycled backstretch slideshow... Only use simple backstretch effect.
Comment #44
jorisx CreditAttribution: jorisx commentedAnyone here know if the advanced settings help in creating a responsive views slideshow?
i've seen this article http://drupal.stackexchange.com/a/64608/18626 (which actually refers to here), but couldn't get it to work properly either ...
Under FORMAT slideshow settings in the view, scroll "jQuery Cycle Custom Options" and under advance options set
(you have to set these manually one by one)
Comment #45
naczus CreditAttribution: naczus commented#3 worked also for me. Thanks for sharing your css!
Comment #46
scott.browne CreditAttribution: scott.browne commentedFor horizontal, responsive and centered use this. It doesn't shrink your images, you could probably use adaptive images for that. But it tiles your pictures so they are responsive that way. Great for logo banners or small stuff.
#views_slideshow_cycle_main_product_line_card-block .views-row-even,
#views_slideshow_cycle_main_product_line_card-block .views-row-odd {
position: relative;
margin:auto;
display:inline-block;
text-align:center;
}
.views_slideshow_cycle_main {
text-align:center;
width: 100%;
display:inline-block;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame {
width: 100% !important;
height: auto;
}
.views_slideshow_cycle_main .views-slideshow-cycle-main-frame-row {
width: 100% !important;
height: auto;
}
.views_slideshow_cycle_main .field-content {
max-width: 100%;
width: 100%;
}
.views_slideshow_cycle_main .field-content img {
max-width: 100%;
width: 100%;
height: auto;
margin: 0;
padding: 0;
border:1 white solid;
}
Comment #47
yuseferi CreditAttribution: yuseferi commentedI had this problem,I try some of your solution but not worked :(, finally I use flexSlider, it is great :D
Comment #48
BeatnikDude CreditAttribution: BeatnikDude commented#3 worked for me
Comment #49
bienybarato CreditAttribution: bienybarato commented#3 and #13 worked for me. thank you for this great input!
Comment #50
nikitas CreditAttribution: nikitas commentedFor dynamic responsive page resize solution #27 (https://www.drupal.org/node/1510526#comment-7865577) worked for me just fine.
thanx!
Comment #51
John Franklin CreditAttribution: John Franklin commentedA combination of @Kristen Pol's CSS from #3 and @sargismarkosyan JS from #26 worked best. With only #3, Firefox wouldn't resize, but Chrome and Safari would; With only #26, other elements would not properly reflow around a resized slideshow, sometimes leaving large gaps with neighboring elements, sometimes slipping underneath a slideshow.
Patch combining #3 and #26 attached.
I'm reopening this because this issue has 48 more comments since it was closed as a duplicate (and the duplicate has 48 more comments since it was closed as "fixed", without a patch), it's clearly not fixed.
Comment #52
John Franklin CreditAttribution: John Franklin commentedOoops... bad patch file. Fixed one attached.
Please be sure to credit @Kristen Pol and @sargismarkosyan in the commit.
Comment #53
naomisl CreditAttribution: naomisl commentedI'm trying to get a views slideshow to span the page at 100% width.
I applied the patch (thank you for working on it!), but ran into this error:
patch unexpectedly ends in middle of line
patch: **** malformed patch at line 67:
Line 67 is almost at the end, so I thought perhaps it would still have applied what I needed, but it doesn't seem to have changed anything.
I've also tried messing with the css as people have described above (#3, etc). This changes the width on the image at the node level, but not in the slideshow block, which is ultimately the goal.
Another thing I've tried is the "width" option under advanced jquery options (a tactic suggested on the other thread discussing this issue), and it seems to set a pixel width for the frame, but does not do percentages or change the image size at all, even with "fit" set to true.
Still working on finding something that does work...any help would be much appreciated.
Comment #54
mcriecken CreditAttribution: mcriecken commented#31 worked great for me (CSS + JS). I added "height: inherit !important" to the .views-slideshow-cycle-main-frame-row so that it would stay the same size as the frame. Not sure this matters all that much (slideshow was rendering properly w/out it), just something I noticed.
Comment #55
mandymeng CreditAttribution: mandymeng commentedHello everyone,
I am working on a video slideshow. The problem I have with the css and js above is that the video screen is but in half horizontally.
Have any one done the video slideshow? And how did you make the iframe window a full screen and be responsive?
Thank you all very much!
Solved -
I used the #3's css basically but made changes on the last two elelements (the css for the two elements are from css-tricks)
And #13's javascript worked for me:
Hope it will help someone.
Comment #56
sjpagan CreditAttribution: sjpagan commentedHello everyone,
@John Franklin I applied your patch, but the console I get the following error : TypeError: cycleElements is undefined, it reference at this :
cycleElements.elements[i].cycleW = tmp_img_width;
i'm using the next cod to show value
and the result is undefinied.
I also used hook_js_alter for change order of js
do you have any idea?
Comment #57
francescosciamanna CreditAttribution: francescosciamanna commentedNo patches needed, the module Adaptive image is enough to solve this issue.
Comment #58
TrevorBradley CreditAttribution: TrevorBradley commentedI dunno if anyone is having a similar issue on Drupal 8, but here's the code I went with that seems to get everything just right. Feel free to adapt it as requried:
LESS:
JS:
Comment #59
Estefan CreditAttribution: Estefan commentedI was experiencing this problem in Drupal 8 - and could solve it partly with #58. Thanks!
The width of the slideshow now adapts neatly, still I'm having issues with the height of the slider: The height of the div only rezises correctly on reloading the page. The js works insofar as it assures that there is enough space between the box I placed the slider in and the next divs.
Comment #60
Estefan CreditAttribution: Estefan commented#59 worked fine with me and Drupal 8. Thanks!
The height of the div does however only resize only on refreshing the page - not automatically. Would be great if someone could come up with a solution.
Comment #61
Estefan CreditAttribution: Estefan commentedHere is what seems to work for my Drupal 8 website. The code readjusts the height - without reloating. The padding-top element is important. The value 55% seems to work by coincidence. I am far from being professional and worked things out more or less by trial and error. Would be great if someone could confirm this.
.views_slideshow_cycle_teaser_section {
width: 100% !important;
height: 100% !important;
padding-top: 55%;
border: 9px solid white;
}
.views_slideshow_cycle_slide {
width: 100% !important;
height: auto !important;
}
.views-field-field-photos img {
width: 100% !important;
}
Comment #62
KrypticBit CreditAttribution: KrypticBit commentedHELP!
I've got the same problem the views slideshow won't stay within the "secondary" sidebar (it goes off to the right WAY to much) I've tried some of the code on here and a few of my own but it doesn't seem to want to work....
What am I doing wrong? How to i Adjust the width so it stays in the Sidebar?
FYI I'm using Drupal 8
Comment #63
xaxan CreditAttribution: xaxan commentedNeed to change #58 solution
Update javascript with this new code and will fix height issue.
Comment #64
Bebop-n-Rocksteady CreditAttribution: Bebop-n-Rocksteady commented#52 Drupal 7: Makes the slideshow responsive, but the images will not cycle nor when you click next or previous.
Comment #65
ludovic.agathe CreditAttribution: ludovic.agathe as a volunteer commentedThis worked for me:
Originally from this YouTube video
It's also the same way you make YouTube iframes responsive. Note that the padding-bottom: 9% is actually the ratio of the height to the width of images. Mine happened to be 9%, but you should change this.
Comment #66
drupalfriend123 CreditAttribution: drupalfriend123 commentedI used this code. Did not fix the issue.
Comment #67
drupalfriend123 CreditAttribution: drupalfriend123 commentedI used this code. Did not fix the issue.
Comment #68
chrisss CreditAttribution: chrisss commented#63 worked perfectly for me in D8. Thanks!
Comment #69
renenee CreditAttribution: renenee commentedCSS from #58 and JS from #63 worked famously in D8. Thank you!
Comment #70
NickDickinsonWilde7.x-3.5 is a lot better than earlier but still missing one line of css to be mostly functional. Adding that. However due to lack of automated tests I'm no doing those JS changes at this time.
7.x-3.6 will be released tonight is much better. There are some aspects of the jQuery.Cycle library that are not mobile friendly and those won't be changed in 7.x-3.x (probably) There is a sandbox module that may work, but I haven't tested it. 7.x-4.x if it ever happens would have that change as a primary to do.
Comment #71
NickDickinsonWildeComment #72
NickDickinsonWildeComment #74
drupalfriend123 CreditAttribution: drupalfriend123 commentedThank you.
-D -
Comment #75
Frogtown CreditAttribution: Frogtown commentedMaybe it is the constraints I have in other CSS I've added, but if it's simply max-width: 100%; without the height: auto; I am getting images that only change their width.
Also, why is display: none; being applied to all of the controls? I suppose that can be overridden in local css, but it seems that it now ignores the configuration settings for Slideshow in the view, as far as which widgets are displayed.
Comment #76
TrevorBradley CreditAttribution: TrevorBradley commentedJust hit this again on another new site. I agree my original JS was flawed. CSS from #58 and JS from #63 appears to be the correct, final answer. Let's consolidate this all in once place:
CSS:
JS:
What's the best way to get this fixed for views_sideshow 8.x? Is it time to start another issue thread?
Comment #77
TrevorBradley CreditAttribution: TrevorBradley commentedAck, never say "final answer".
I found a flaw in my stylesheet. It appears that views-slideshow can glitch out when you take a window and start dragging it back and forth. The Slideshow JS appears to get confused about the slide height and put in false information. You need to really wail on it, dragging it back and forth to cause the problem.
I believe this SASS/LESS is superior to my original #58. It appears to make the problem go away:
Comment #79
JimBehr CreditAttribution: JimBehr as a volunteer commentedI encountered a situation where the height of the items in the slideshow varied in height so I needed a way to obtain the maximum from the tallest of them. I also had two different slideshows on the main page. Here's the JS that worked for me (using ideas from here):
Comment #80
bcobin CreditAttribution: bcobin commentedThank you so much for this - #76 with #77 is working like a charm! (#79 wasn't needed in that I'm resizing the slides first.)
I generally use Flexslider, but just discovered that you can't implement it more than once; if you create a second Flexslider, the first one breaks.
(I found this out the hard way. This is for a multisite where each site needed its own slideshow.)
Anyway, this is much more configurable, so with the mods, it's a much better solution overall, IMO.
Update: I had originally added the js in the theme .info file - but in that case, the js affects all uses of slideshow on the page. Better to create a new view and inject the js into the specific view using the "For Drupal 7" method described here:
https://www.drupal.org/forum/support/post-installation/2010-10-27/add-ja...
Thanks again!
Comment #81
maxplus CreditAttribution: maxplus commentedHi thanks,
for me in the D8 version the pager was only in correct position after a page reload.
Now I have added some js like described above and my pager is now always on the correct position, even after window resize
Comment #82
auxiliaryjoel CreditAttribution: auxiliaryjoel commentedI think there is way too many issues with this module for correctly dealing with responsive content,
certainly there are some workarounds that "fix"(to 90% staisfaction) what you're trying to achieve but I found it never works 100% without various tweaks to views and css and twigs. All through trial and error rather than guided documentation.
If more precise documentation can't be provided without having to scrawl through comment threads of issues then I think this module is unusable in the current responsive web age we're in.
Comment #83
rwilson0429 CreditAttribution: rwilson0429 commentedWhile I was able to get to an acceptable responsive results in D7 using this module, I've not been able to find an acceptable solution in D8. Ironically, 7 years later...#22 is still right on target. As a number of these post suggest, Flexslider takes all the headaches out of getting a responsive slideshow. Install it, enable it, whip up a View with a Flexslider display, done. No additional custom css or js needed to have a responsive slideshow. In this era of responsive design requirements, the Views Slideshow module better days may be a thing of the past without some needed attention.
Comment #84
shoebob CreditAttribution: shoebob commentedHow do I get the JS to work when using "behaviours" and "context"?#81 worked - I used this code outside of the jquery behaviour container
Comment #85
aiphesJS patch need to be updated for D9 because classes have changed. Here a starting point, but I don't find the right classes to avoid the automatic size given to:
Architecture look like:
views_slideshow_cycle_main >> views_slideshow_cycle_teaser_section >> views_slideshow_cycle_slide
Thanks for help