I've spent 4 hours trying to get through this, and I couldn't find a solution yet so far. Basically what I'm trying to do is add a description to each picture in the slide. So, when the picture switches, the description must switch as well. So far I've tryed a lot of stuff but nothing seems to trigger the changes. This is what i've done now
<!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>
So, I've put some div with the descriptions and added some ID on the pictures;
.Description{
display:block;
}
.descriptionOff{
display:none;
}
In the css I've added these 2 classes that the descriptions have to use to show or not themselves;
if($("#foto1").hasClass("nivo-main-image")){
$("#first").toggleClass("Description");
}
And this is the simple line of code I've added in (a different file of) js: basically, if the first photo has class nivo-main-image (which is the class that shows the pictures in the slide), it should toggle the class of the first description to show it (the if statement is not complete, of course I would have done the same for the other descriptions). But nothing happens, the class doesn't switch. So, I ask you for help, or if you have any other solution and if you share it, I would appreciate that a lot.
I haven't really tested this, but have you tried wrapping your slider images in spans and adding your caption inside it (after the img)?
Like so: