I recently updated the hole thing (nivo slider lib, librairies, nivo module)

Now I have a little thumbnail of the next image loading in the left up corner.

Is that normal?

See it here.
http://www.racineimagine.com/

Thanks

CommentFileSizeAuthor
#9 20130311-issue-1900590.jpg324.04 KBoli538
#4 nivo-small-image.jpg120.93 KBressa
#2 NivoSlider-problem-option-01.jpg78.85 KBalexandreracine

Comments

devin carlson’s picture

devin carlson commented
Component: Code » Miscellaneous
Category: bug » support
Status: Active » Closed (works as designed)

You can control thumbnail display and styling by toggling the "Use thumbnails for control navigation" setting and changing the slider theme on the options page.

alexandreracine’s picture

alexandreracine commented
Status: Closed (works as designed) » Active
StatusFileSize
new NivoSlider-problem-option-01.jpg78.85 KB

That's the problem, that option is off :(
See attached file.

Thanks.

alexandreracine’s picture

alexandreracine commented

And in the Navigation section "Use thumbnails for control navigation " is uncheck too.

ressa’s picture

ressa
he/him
commented
StatusFileSize
new nivo-small-image.jpg120.93 KB

I don't think the navigation is the problem, but the transition - there is none. The only thing that happens before a new image is shown, is that a little version of the image pops up in the upper left corner.

Nivo small image, no transition

alexandreracine’s picture

alexandreracine commented

Mmm, good point. I did not even looked at that!

Devin, is there something we can do to help you on that (I am not a coder, but can replace code if needed).

Thanks.

ressa’s picture

ressa
he/him
commented
Title: thumbnail of the next image? » Transition doesn't work
Component: Miscellaneous » Code
Category: support » bug

Updated title and category.

devin carlson’s picture

devin carlson commented
Status: Active » Closed (duplicate)

This is a duplicate of #1910550: Latest version of Nivo slider - demands jQuery v1.7.

alexandreracine’s picture

alexandreracine commented
Status: Closed (duplicate) » Active

Sorry Devin, watever I do , transition and the little thumbnail is still not working correctly event with the latest version since I do have jQuery v1.7/1.8.

Here is what I currently have.

Drupal 7.19
jQuery Update 7.x-2.3 (witch provide either jQuery 1.7 or 1.8, watever option does not change this bug)
Nivo Slider 7.x-1.9 (drupal module)
Libraries 7.x-2.0

NivoSlider 3.2 (but event with the NivoSlider 3.01, the bug was there too)

----------- CONFIGS -------

Configure slider options.
Nivo Slider
Theme [no options are available here]
Use image styles to generate slider images - [NO]
Use a random starting slide - [YES] - (working)
Effet - [SLICE DOWN] (watever option used, it does not work)
Slices Slices - [20]
Box columns Columns - [8]
Box rows - [4]
Animation speed [500] ms
Pause animation when hovering over the slide - [YES] - (working)
Display directional navigation - [NO]
Display control navigation - [NO]
Disable automatic slide transitions - [NO]
Pause time ms [5000]

---------------------------

The result is here http://www.racineimagine.com/

oli538’s picture

oli538 commented
StatusFileSize
new 20130311-issue-1900590.jpg324.04 KB

I had exactly the same issue as the one Alexandre reported on January 29 and as the one on the screenshot in reply #4 (February 5) for a new site that is not live yet. So I did some investigation and found the error to be related to "max-width" property for img in the CSS.

Apparently the nivo slider doesn't like the img tag to have the max-width set. If you disable it (either with Firebug - see attached 20130311-issue-1900590.jpg taken from Alexandre's site) or by removing that value in the CSS then the animations should be working again. It worked for me!

I don't know if this should be a patch in the Nivo Slider Drupal module or if it should be fixed in the JQuery plugin (I leave that to the maintainer of this module to decide...) but thought I shared back this fix to the community so it can help others...

Thanks!

ressa’s picture

ressa
he/him
commented

Nice catch oli538, thanks for sharing :)

Most new themes are responsive, so they include an img { max-width: 100%; } declaration, which is necessary for images to be dynamically resized, when the screen has a smaller width than the image. So we can't remove it.

One solution could be adding this CSS in the Nivo Slider Module, in a CSS file:

#slider img {
  max-width: none;
}
alexandreracine’s picture

alexandreracine commented
Status: Active » Reviewed & tested by the community

Hi all,

Great, this is working!

This should be the content of the sites/all/modules/nivo_slider/css/nivo_slider.css file:

.nivoSlider {
  position: relative;
}

.nivoSlider img {
  display: none;
  left: 0px;
  position: absolute;
  top: 0px;
}

.nivoSlider a {
  border: 0;
  display: block;
}


#slider img {
  max-width: none;
}

Devin, could you patch this? :) Like oli538 and Ressa, I don't know if this is the right solution, but it's sure a quick fix :)

gladiatorhl2’s picture

gladiatorhl2 commented
Issue summary: View changes

It happens because of your theme and block configuration (the same problem was encountered by me). Simply try another block area: banner top or slider block etc.

alexandreracine’s picture

alexandreracine commented
Status: Reviewed & tested by the community » Closed (works as designed)

This can be closed :)

MatthijsG’s picture

MatthijsG commented

Updating with some info; maybe the last code should be added?
Google's first result about thumbnails inside banner showed these page.

The theme Nucleus has in the responsive.css the following markup:
img { max-width: 100% !important;}
There are plenty of themes out there. NivoSlider should reset the possibility that the max-width is given. For me, i added the following lines in my own CSS-file

/* overriding img-class */
/* only affects img inside class nivoSlider */ 
.nivoSlider img {   max-width: none !important;  }