Nivo滑块大拇指

Question

我使用的nivo滑块和im试图缩略图，但我不能让它工作。

以下是我有：

Nino Slider Demo

Here is the tutorial on how to，但我不能让它的工作。

Nive Slider Website

我希望有人可以看到我做了什么错

Answer 1

的NIVO网站上有一个新的演示，显示缩略图是如何工作的：http://nivo.dev7studios.com/demos/

相关的例子有以下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; 
} 

注意如何既a和img标签.nivo-controlNav类使用display: inline，这是使其工作的关键。

其他属性用于定位导航栏并添加阴影。

Answer 2

我有一个很大的困难，让我的图片缩略图正常工作。这对我有效。全部细节在my blog entry。

添加这个CSS样式作为最后加载（包括它在LINK其他核心NIVO CSS表下方）

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

而且不要忘记，当你调用NIVO设置这些参数：

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

Answer 3

我发现主题'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 

而且，在他们的tutorial注意，你需要添加这个样式：

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

我很难过有了这个，希望它有助于某人。

Answer 4

我有很多麻烦发现我的缩略图以及。我终于找到了他们，将他们定位为“绝对”，并且他们终于出现在幻灯片中间:)

但我不是很喜欢他们显示的方式，所以我做了一个快速修复，编辑一下脚本。

在jquery.nivo.slider。JS，添加这个在文件的开头：

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

然后找到这个：

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

而且随着

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

替换找到这个：

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

更换与：

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

然后将其放置在您的网页somewhre，就大功告成了:)

当然，大量的改进可以做到的，但我说这是一个快速解决方案。如果下一个版本的Nivo滑块可以选择将缩略图放在不同的位置，那将会很不错。

希望这有助于;）