将描述添加到jquery Nivo Slider(不是默认标题)
Add descriptions to jquery Nivo Slider (not the default caption)
我花了4个小时试图解决这个问题,但到目前为止还找不到解决方案。基本上,我想做的是为幻灯片中的每张图片添加一个描述。因此,当图片切换时,描述也必须切换。到目前为止,我已经尝试了很多东西,但似乎没有什么能引发变化。这就是我现在所做的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" id="foto1" />
<a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" id="foto2" /></a>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" id="foto3" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" id="foto4" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
</div>
</div>
<!-- my Code -->
<div class="descriptionOff" id="first">
Description 1
</div>
<div class="descriptionOff" id="second">
Description 2
</div>
<div class="descriptionOff" id="third">
Description 3
</div>
<div class="descriptionOff" id="fourth">
Description 4
</div>
<!-- :::::::::::::: -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<script type="text/javascript" src="scripts/andri.js"></script>
所以,我放了一些带有描述的div,并在图片上添加了一些ID;
.Description{
display:block;
}
.descriptionOff{
display:none;
}
在css中,我添加了这两个类,描述必须使用它们来显示或不显示它们自己;
if($("#foto1").hasClass("nivo-main-image")){
$("#first").toggleClass("Description");
}
这是我在js(的另一个文件)中添加的一行简单代码:基本上,如果第一张照片的类为nivo main image(即在幻灯片中显示图片的类),它应该切换第一个描述的类以显示它(if语句不完整,当然我对其他描述也会这样做)。但什么都没发生,班级没有转换。所以,我请求你的帮助,或者如果你有任何其他解决方案,如果你分享,我将不胜感激。
我还没有真正测试过这一点,但你是否尝试过将滑块图像包装在跨度中,并在其中添加标题(在img之后)?
像这样:
<div id="slider" class="nivoSlider">
<span><img src="slide1.jpg" /><p>This is my non-default caption!</p></span>
<img src="slide2.jpg" />
<img src="slide3.jpg" />
</div>
相关文章:
- 用嵌套函数和默认函数定义函数
- CSS-如何定位内容数据标题
- 如何使用铁流星与流星的默认路线
- 防止Alt+Shift默认操作或检测多种操作系统语言的Javascript
- 在PHP中使用javascript更改页面标题'if'
- Brightcove获取/显示HTML中的当前视频标题和描述
- CKeditor:更改对话框中的默认选择选项
- 在不阻止默认行为的情况下检测IE10中的缩放
- React组件-设置页面标题
- 将描述添加到jquery Nivo Slider(不是默认标题)
- RadWindow默认标题为目标页面
- 如何在“挖空.js”中单击后显示选项默认标题
- 如何更改默认工具提示的位置和标题
- 切换列表,h4标题被更改为默认<李>
- Geogebra Javascript - 如何为在图形视图中创建的每个数学对象默认没有标题
- 如何在selectpicker中删除默认标题
- 如何隐藏新版本的fanybox默认的标题?
- 从链接中隐藏默认的标题框(工具提示)
- 如何改变默认的facebook页面的描述/标题/图片时,共享一个页面
- 将所有标题的默认工具提示替换为jQuery工具提示