How do I style the Nivo Slider thumbnails?


Tags: javascript,jquery,css

Problem :

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.

enter image description here

Here's a link to the site.

http://dl.dropbox.com/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.com
 *
 * Copyright 2011, Gilbert Pellegrom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/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.



Solution :

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

    CSS Howto..

    How to disable css Animation keyframes in opera?

    How to modify css to show slider text

    How to wrap an div with another div - jQuery Wrap

    How can i make div shape like this with css? [duplicate]

    How to resize parent div while keeping dynamic child divs 100% height

    How to align a HTML definition list (
    ) horizontally without limiting term or definition in height?

    How can I stop my CMS’s CSS affecting my content?

    How can I attach a method to an object to change CSS

    How to create centered image slideshow behind website content

    How to control the CSS of the contents that loaded dynamically into iframe?

    How to adjust the opacity of CSS background image instead of radio button with an icon overlay

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    how to achieve this effect with css html?

    How to change CSS property before element is created?

    How to make the page to fit screen width on mobile device?

    How can I hide the extra list items that don't fit within a fixed-height box?

    How Can I get my DL to style properly?

    How to extend a CSS/HTML content box to the bottom of browser/viewport window when other elements above it push it down?

    How can I delete this “a” space under the images using CSS?

    How do I set the height of an iframe with the min-height property in the body?

    How to create nested diamond shape using CSS?

    show/hide will not load

    How to bring all elements down with a header slide up/down?

    How can I disable my css sprite nav bars hover state for a section while it is active?

    How to position an element just off the top of the browser viewport using only css?

    How to make CSS menu stay on top

    How to add more bars to this Animated JQuery, CSS and HTML Bar Graph

    How to know where to use css, less and Sass? [closed]

    CSS: How to change spacing between radio button and it's text?

    how to set shadow for round image(css)