Nivo滑块大拇指
我使用的nivo滑块和im试图缩略图,但我不能让它工作。Nivo滑块大拇指
以下是我有:
Here is the tutorial on how to,但我不能让它的工作。
我希望有人可以看到我做了什么错
的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
,这是使其工作的关键。
其他属性用于定位导航栏并添加阴影。
我有一个很大的困难,让我的图片缩略图正常工作。这对我有效。全部细节在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 */
});
我发现主题'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;
}
我很难过有了这个,希望它有助于某人。
我有很多麻烦发现我的缩略图以及。我终于找到了他们,将他们定位为“绝对”,并且他们终于出现在幻灯片中间:)
但我不是很喜欢他们显示的方式,所以我做了一个快速修复,编辑一下脚本。
在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滑块可以选择将缩略图放在不同的位置,那将会很不错。
希望这有助于;)
我有编辑CSS,但缩略图仍然不露面:S – Sjmon 2011-03-31 11:40:44
我检讨NIVO的网站后,我的答案更新。 – 2011-03-31 12:09:30