javascript Nivo滑块拇指
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5491874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nivo slider thumbs
提问by Sjmon
I'm using the nivo-slider and im trying to make thumbnails but I cant get it to work.
我正在使用 nivo-slider 并且我正在尝试制作缩略图，但我无法让它工作。
Here is what I have:
这是我所拥有的：
Here is the tutorial on how to, but i cant get it to work.
这是有关如何操作的教程，但我无法使其正常工作。
I hope some one can see what i do wrong
我希望有人能看到我做错了什么
回答by Nick Zinger
I have found that the theme 'default.css' conflicts with the img styling (as noted in their tutorial). You need to comment out the css styles in default.css for the following classes:
我发现主题“default.css”与 img 样式冲突（如他们的教程中所述）。您需要为以下类注释掉 default.css 中的 css 样式：
.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.
我也遇到了这个问题，希望它可以帮助某人。
回答by gingerbread
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:
在 jquery.nivo.slider.js 中，在文件开头添加：
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.
当然，可以进行很多改进，但正如我所说，这是一个快速修复。如果下一版本的 Nivo 滑块可以选择将缩略图放置在不同的位置，那就太好了。
Hope this helped ;)
希望这有帮助;)
回答by Marc Audet
The Nivo site has a new demo that shows how the thumbnails work: http://nivo.dev7studios.com/demos/
Nivo 站点有一个新的演示，展示了缩略图的工作原理：http: //nivo.dev7studios.com/demos/
The relevant example has the following CSS styling:
相关示例具有以下 CSS 样式：
#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 aand the imgtag in the .nivo-controlNavclass use display: inline, that is key to making it work.
请注意类中的a和img标签如何.nivo-controlNav使用display: inline，这是使其工作的关键。
The other properties are for positioning the nav bar and adding drop shadows.
其他属性用于定位导航栏和添加阴影。
回答by Patrick Moore
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)
添加此 CSS 样式作为最后加载（将其包含在其他核心 Nivo CSS 表下方的 LINK 中）
.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:
并且在调用 Nivo 时不要忘记设置这些参数：
$('#slider').nivoSlider({
controlNav:true, /* Display the control navigation */
controlNavThumbs:true, /* Display thumbnails */
controlNavThumbsFromRel:true, /* Source thumbnails from rel attribute */
});
