Я потратил 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 я добавил эти 2 класса, которые описания должны использовать для показа или не самих себя;
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>