I'm using the nivo-slider and im trying to make thumbnails but I cant get it to work.

Here is what I have:

Nino Slider Demo

Here is the tutorial on how to, but i cant get it to work.

Nive Slider Website

I hope some one can see what i do wrong

I'm using the nivo-slider and im trying to make thumbnails but I cant get it to work.

Here is what I have:

Nino Slider Demo

Here is the tutorial on how to, but i cant get it to work.

Nive Slider Website

I hope some one can see what i do wrong

• javascript
• jquery
• slider
• nivo-slider

4 Answers 4

I have found that the theme 'default.css' conflicts with the img styling (as noted in their tutorial). You need to ment out the css styles in default.css for the following classes:

.theme-default .nivoSlider img
.theme-default .nivoSlider a
.theme-default .nivo-controlNav
.theme-default .nivo-controlNav a
.theme-default .nivo-controlNav a.active

And, as noted in their tutorial, you need to add this styling:

#slider .nivo-controlNav {
    position:absolute;
    bottom:-70px; /* Put the nav below the slider */
}
#slider .nivo-controlNav img {
    display:inline; /* Unhide the thumbnails */
    position:relative;
    margin-right:10px;
}

I had trouble too with this, hope it helps someone.

I had lots of troubles finding where my thumbnails are as well. I finally found them by positionning them "absolute", and they finally appeared in the middle of the slideshow :)

But I don't really like the way they're displayed, so I made a quick fix which requires to edit the script a bit.

In jquery.nivo.slider.js, add this at the beginning of the file:

var thumbnails = $("#thumbnails"); // this is where your thumbnails will be

Then find this:

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    slider.append(nivoControl);

And replace with

//Add Control nav
if(settings.controlNav){
    var nivoControl = $('<div class="nivo-controlNav"></div>');
    thumbnails.append(nivoControl);

Find this:

$('.nivo-controlNav a', slider).live('click', function(){

Replace with:

$('.nivo-controlNav a', thumbnails).live('click', function(){

Then place a somewhre in your page, and you're done :)

Of course, lots of improvements can be done, but as I said it's a quick fix. That would be nice if next versions of Nivo slider had an option to place the thumbnails in a different location.

Hope this helped ;)

The Nivo site has a new demo that shows how the thumbnails work: http://nivo.dev7studios./demos/

The relevant example has the following CSS styling:

#slider3 {
    margin-bottom:110px;
}
#slider3 .nivo-controlNav {
    position:absolute;
    left:185px;
    bottom:-70px;
}
#slider3 .nivo-controlNav a {
    display:inline;
}
#slider3 .nivo-controlNav img {
    display:inline;
    position:relative;
    margin-right:10px;
    -moz-box-shadow:0px 0px 5px #333;
    -webkit-box-shadow:0px 0px 5px #333;
    box-shadow:0px 0px 5px #333;
}
#slider3 .nivo-controlNav a.active img {
    border:1px solid #000;
}

Note how both the a and the img tag in the .nivo-controlNav class use display: inline, that is key to making it work.

The other properties are for positioning the nav bar and adding drop shadows.

I had a great deal of difficulty getting image thumbnails to work properly myself. This worked for me. Full details at my blog entry.

Add this CSS styling as the last to load (include it in a LINK beneath the other core Nivo CSS sheets)

.nivo-controlNav a {
display:inline; /* Display the thumbnail link element */
}

#slider .nivo-controlNav img {
display:inline; /* Un-hide the thumbnail image element */
position:relative;
margin: 10px 10px 0 0; /* Provide some white space around the thumbs */
}

#slider .nivo-controlNav {
position: absolute;
top: 600px; /* 600px is the height of our images in the slider */
}

And don't forget to set these parameters when you call Nivo:

$('#slider').nivoSlider({
controlNav:true, /* Display the control navigation */
controlNavThumbs:true, /* Display thumbnails */
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */
});