Hi all,
Just updated to try the new 3.x version of Nivo Slider's plugin, with the hopes of getting my slider to be responsive. Currently, I cannot choose beyond the current 2.x release in Views. Every time I select it (and without any styling), the view is automatically just rendered as 2.x instead, which isn't responsive at all, causing size problems on different layout configurations. The option is always reset back to its original setting after applying the View.
Any ideas as to getting the responsive version to work? I have the correct version of the library installed in my sites/all/libraries folder, is there some voodoo magic that I still need to work somewhere?
Comment | File | Size | Author |
---|---|---|---|
#8 | views_nivo_slider-default_version_does_nothing-1713210.patch | 886 bytes | mrded |
Comments
Comment #1
vincer CreditAttribution: vincer commentedThis is how I make Views Nivo Slider responsive in Drupal...
Note that the view IDs used below are specific to my install, and you would have to modify to match your setup.
.theme-default .nivoSlider {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
margin-bottom: 0px;
}
.views-nivo-slider-view {
overflow: hidden;
position: relative;
}
#views-nivo-slider-home_slideshow-block_1 {
overflow: hidden;
width: 100% !important;
height: auto !important;
}
.nivo-box > img,
.nivo-slice > img {
opacity: 0;
}
#views-nivo-slider-home_slideshow-block_1 img {
width: 100% !important;
height: auto !important;
}
.nivo-controlNav {
position: absolute;
z-index: 500;
bottom: 14%;
left: 46%;
}
Comment #2
dddave CreditAttribution: dddave commentedThought I were mad, "glad" to see it is a bug.
Comment #3
dddave CreditAttribution: dddave commentedI made sure to have the correct version in the correct folder yet in the view settings all that sticks is v2.7 and the according settings which of course are mostly useless with v3.x. I am going to test on another vanilla install tonight but I suspect still that there is something broken in a major way.
Comment #4
BoySherman CreditAttribution: BoySherman commentedTop man xenowing, your CSS workaround did the trick. I too thought I was losing it....
Comment #5
Sinan Erdem CreditAttribution: Sinan Erdem commentedit also happens to me on a fresh install. i select 3.x, but after saving, it goes back to 2.7
Comment #6
dddave CreditAttribution: dddave commentedThanks @xenowing for providing this amazing workaround. Awesome!
Comment #7
Sinan Erdem CreditAttribution: Sinan Erdem commentedAn alternative module for responsive layouts: http://drupal.org/project/flexslider
Comment #8
mrded CreditAttribution: mrded commentedPlease, check my patch.
Comment #9
mrded CreditAttribution: mrded commentedit's very simple fix, because of this it can be applied without serious testing :)
Comment #10
Dmitriy.trt CreditAttribution: Dmitriy.trt commentedYou can't mark your own patch with RTBC.
Comment #11
jerryitt CreditAttribution: jerryitt commentedPatch from #8 applies ok.
It sets the default version of Nivo Slider to 3.x but allows for changing back to 2.7.x
Looks like it does exactly as designed.
Comment #12
mrded CreditAttribution: mrded commentedComment #13
alviSic CreditAttribution: alviSic commentedCSS workaround provided by xenowing works great!
I applied patch provided by mrded. It allows to set the version to 3.x, but slider is still not responsive. What other setup is needed to make slider responsive?
Comment #14
dddave CreditAttribution: dddave commentedre #13
Just to make sure: You are using the complementary library after switching to 3x?
Comment #15
alviSic CreditAttribution: alviSic commentedI noticed that there are problems with pretty image change when using all of the CSS code, so actually this part is doing the trick:
#views-nivo-slider-home_slideshow-block_1 {
overflow: hidden;
width: 100% !important;
height: auto !important;
}
Comment #16
alviSic CreditAttribution: alviSic commentedSorry, but what you mean by "using the complementary library"?
How can I use it/change it?
Thanks
Comment #17
dddave CreditAttribution: dddave commentedThis module needs the nivo slider plugin. Either 2.7 or 3.0. You would need both in your libraries folder if you want so switch or just one depending on your preference. If you only have 2.7 installed switching to 3.0 won't do anything.
Comment #18
flatfeat CreditAttribution: flatfeat commented#8 works great for me.
Comment #19
retrodans CreditAttribution: retrodans commented#17 Hi, I think I am having the same issue. Patch is applied, and as far as the form is concerned, I now have 3.0 selected and saved. The library I put in the libraries folder for nivo is the 3.0 version from the url. yet, when I go to my page with the gallery on, and resize my browser to a width thinner than the gallery, it does not resize as expected. I have not applied any of the css over-rides in this post, as from the dialogue, believe the module should do this.
Have I missed an obvious step when configuring this module and view?
Thanks,
Dan
Comment #20
ScottLozier CreditAttribution: ScottLozier commentedDan you need to add the CSS from #1 to your own theme or the default folder in the library.
You actually only need these few lines that are from your view:
// CHANGE TO VIEW NAME
#views-nivo-slider-home_slideshow-block_1 {
overflow: hidden;
width: 100% !important;
height: auto !important;
}
// CHANGE TO VIEW NAME
#views-nivo-slider-home_slideshow-block_1 img {
width: 100% !important;
height: auto !important;
}
Adding some of the other css broke the animation for us.
Comment #21
tpainton CreditAttribution: tpainton commentedWhat's the status of this? I have same problem. Selecting 3.0 and saving does not hold. revers back to 2.X branch.. given that the only available library now to download is 3.X, I would say this is now critical. Slider just doesn't work for me.
Comment #22
brandy.brown CreditAttribution: brandy.brown commentedI'm not sure why this is marked as reviewed and tested. Perhaps the problem lies in that the original post proposed two problems. While the responsiveness was addressed, the problem of 3.0 not sticking still persists.
I am having this problem as well.
Comment #23
JayShoe CreditAttribution: JayShoe commentedHello,
I have now tested this patch. It works for me. And using the css mentioned in comment #1 I am able to get a responsive image! Cool!
However, I did need version 3.0 of the nivo slider. And this doesn't seem to be working on chrome? Any advice on a fix for that? I'd like it to be responsive but I need ti to be usable on chrome too.
Thanks for your help.
Jay
Comment #24
chris.jichen CreditAttribution: chris.jichen commentedI have tested the patch on #8, it works. And the #1 doesn't work on my situation.
Here is my configuration:
version 7.x-3.x-dev of Views Nivo Slider
Nivo Slider 3.2 js library
And this is how i make my slider responsive in css:
//change to your views id.
#views-nivo-slider-custom_content-block_1{
width: 100% !important;
height: auto !important;
}
//not setting up the width for it.
#views-nivo-slider-custom_content-block_1 img{
height:auto !important;
}
The full detailed how to is here:
http://www.webis.ca/blog-entry/how-make-drupal-7-views-nivo-slider-respo...
Comment #25
JayShoe CreditAttribution: JayShoe commentedChris,
The information you've provided is great. But still, does Nivo Slider 3.2 js library work with Chrome? I tested with version 3.2 and it didn't work for me. Flexslider seemed to be the right choice for now. It's responsive, and it works in Chrome.
Jay
Comment #26
MXTPatch in #8 works great for me and resolve the original issue of this thread: 3.x version is now setted, so this can be RTBC.
The missing responsiveness is another issue and should be opened another dedicated thread for this.
Comment #27
podarok#8 commited pushed to 7.x-3.x
Thanks!!!
Comment #28
MXTI discovered the reason why nivo-slider is not RESPONSIVE using 3.x. (as it should be)
See: https://drupal.org/node/2112921