我如何設計Nivo Slider縮略圖？

Question

好吧，我一直試圖讓Nivo Slider幾乎整天工作。我終於想出瞭如何顯示縮略圖，但現在它們正在被擠壓在一起。我試圖在.nivo-controlNav img上的圖像上添加邊距/填充，但它只是一起推開圖像，並在縮略圖後面顯示子彈。

下面是該網站的鏈接。

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

的JS /選項我已經申請：

$(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 
    }); 
}); 

此外，CSS爲NIVO滑塊。

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

我真正想要的thumbails是滑塊下方，而不是隻覆蓋是滑塊還下的內容。

請幫助。

Answer 1

不知道你在哪裏試圖把這些縮略圖相對於滑塊，但我發現了一些你的問題：

在落實這些值：

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

周圍的default.css d的35線elete高度和寬度屬性

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

Answer 2

那麼這就是你需要的嗎？還是更多？

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

Answer 3

這裏的CSS的樣品拿到上所有活動的拇指邊界：

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

Answer 4

的解決你的問題可能是簡單的DTD格式，你沒有任何對您HTML標記 只需添加任何DTD格式，也許一個過渡或嚴格的DOCTYPE可能用縮略圖解決問題...