well I have been trying to get Nivo Slider to work almost all day. I finally figured out how to display the thumbnails, but now they're being squished together. I tried to add margin/padding to the images on .nivo-controlNav img but it's only pushing away the images together, and showing the bullets behind the thumbnails.

Here's a link to the site.

.html

The JS/options I have applied:

    $(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Also, the CSS for the nivo slider.

    /*
 * jQuery Nivo Slider v2.6
 * 
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * .php
 * 
 * March 2010
 */


/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

I really want the thumbails to be below the slider, and not just overlay the content that is under the slider also.

Please help.

well I have been trying to get Nivo Slider to work almost all day. I finally figured out how to display the thumbnails, but now they're being squished together. I tried to add margin/padding to the images on .nivo-controlNav img but it's only pushing away the images together, and showing the bullets behind the thumbnails.

Here's a link to the site.

http://dl.dropbox./u/31659128/pawforpaw/index.html

The JS/options I have applied:

    $(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: false, // Only show on hover
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: true, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});

Also, the CSS for the nivo slider.

    /*
 * jQuery Nivo Slider v2.6
 * http://nivo.dev7studios.
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource/licenses/mit-license.php
 * 
 * March 2010
 */


/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

I really want the thumbails to be below the slider, and not just overlay the content that is under the slider also.

Please help.

• javascript
• jquery
• css

Share Improve this question Follow edited Nov 15, 2011 at 2:44 nowayyy asked Nov 8, 2011 at 0:46 nowayyynowayyy 91711 gold badge1818 silver badges4545 bronze badges 1

• 1 There should be custom html/css for setting up your slider... can you include that as well? Might help. – Bryan Commented Nov 8, 2011 at 1:37

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2 +100

Not sure where you're trying to put those thumbnails in relation to the slider but I found out some of your problems:

Put these values in effect:

.nivo-controlNav {
width: 900px;
left: 40px;
}

Around line 35 of your default.css delete the height and width attributes

.nivo-controlNav a {
display: block;
width: 22px; //get rid of this
height: 22px; //get rid of this
background: url(bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 3px;
float: left;
}

Here's a sample of css to get borders on all the active thumb:

   .nivo-controlNav img {
        z-index: 11;
        height: 85px; 
        width: 165px; 
        display:inline;
        position:relative;
        margin-right:10px;
    }
     a.active img{
        -moz-box-shadow: 0 0 5px 5px #1a64ac;
        -webkit-box-shadow: 0 0 5px 5px#1a64ac;
        box-shadow: 0 0 5px 5px #1a64ac;
    }
.nivo-controlNav a.active {
    opacity: 1; 
    z-index: 10;
}
.nivo-controlNav a:hover {
background: none;
text-decoration: none; 
opacity: 0.9; 
}

So is this what you need? or further more?

#slider .nivo-controlNav {
    position: absolute;
    bottom: 0;
    width: 960px;
}

.theme-default .nivo-controlNav a {
    display:block;
    width: 126px;
    height: 92px;
    background:url(bullets.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:3px;
    float:left;
}

The Solution to you problem could be simply DTD format, you don't have any on your HTML tag simply adding any of the DTD format, maybe a transitional or strict Doctype could resolve the issue with the thumbnail...