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?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

vincer’s picture

This 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%;
}

dddave’s picture

Priority: Normal » Major

Thought I were mad, "glad" to see it is a bug.

dddave’s picture

I 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.

BoySherman’s picture

Top man xenowing, your CSS workaround did the trick. I too thought I was losing it....

Sinan Erdem’s picture

it also happens to me on a fresh install. i select 3.x, but after saving, it goes back to 2.7

dddave’s picture

Thanks @xenowing for providing this amazing workaround. Awesome!

Sinan Erdem’s picture

An alternative module for responsive layouts: http://drupal.org/project/flexslider

mrded’s picture

Please, check my patch.

mrded’s picture

Status: Active » Reviewed & tested by the community

it's very simple fix, because of this it can be applied without serious testing :)

Dmitriy.trt’s picture

Status: Reviewed & tested by the community » Needs review

You can't mark your own patch with RTBC.

jerryitt’s picture

Patch 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.

mrded’s picture

Status: Needs review » Reviewed & tested by the community
alviSic’s picture

CSS 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?

dddave’s picture

re #13
Just to make sure: You are using the complementary library after switching to 3x?

alviSic’s picture

I 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;
}

alviSic’s picture

Sorry, but what you mean by "using the complementary library"?
How can I use it/change it?

Thanks

dddave’s picture

This 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.

flatfeat’s picture

#8 works great for me.

retrodans’s picture

#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

ScottLozier’s picture

Dan 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.

tpainton’s picture

Priority: Major » Critical

What'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.

brandy.brown’s picture

Status: Reviewed & tested by the community » Active

I'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.

JayShoe’s picture

Hello,

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

chris.jichen’s picture

I 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...

JayShoe’s picture

Chris,

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

MXT’s picture

Status: Active » Reviewed & tested by the community

Patch 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.

podarok’s picture

Status: Reviewed & tested by the community » Fixed

#8 commited pushed to 7.x-3.x
Thanks!!!

MXT’s picture

I discovered the reason why nivo-slider is not RESPONSIVE using 3.x. (as it should be)

See: https://drupal.org/node/2112921

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.