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?

Files: 
CommentFileSizeAuthor
#8 views_nivo_slider-default_version_does_nothing-1713210.patch886 bytesmrded
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Comments

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

Priority:Normal» Major

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

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.

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

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

Thanks @xenowing for providing this amazing workaround. Awesome!

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

StatusFileSize
new886 bytes
PASSED: [[SimpleTest]]: [MySQL] 0 pass(es).
[ View ]

Please, check my patch.

Status:Active» Reviewed & tested by the community

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

Status:Reviewed & tested by the community» Needs review

You can't mark your own patch with RTBC.

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.

Status:Needs review» Reviewed & tested by the community

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?

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

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

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

Thanks

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.

#8 works great for me.

#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

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.

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.

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.

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

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

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

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.

Status:Reviewed & tested by the community» Fixed

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

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.