This is the code I currently have:
HTML:
<head>
<title>JQuery demo</title>
<script type="text/javascript" src="scripts/jQuery.js"></script>
<script type="text/javascript" src="scripts/slider.js"></script>
<link rel="Stylesheet" type="text/css" href="styles/style.css"/>
</head>
<body>
<div id="slider">
<img class="image" src="images/image1.jpg" alt="image"/>
<div class="title">Title1</div>
<div class="bulletContainer">
<div class="bullet active"></div>
<div class="bullet"></div>
<div class="bullet"></div>
<div class="bullet" style="clear: right;"></div>
</div>
<div class="caption">Subtitle1</div>
</div>
</body>
CSS:
body {
font-family:Tahoma;
background-color: gray;
}
#slider {
width: 733px;
height: 395px;
margin: 50px auto 0 auto;
background-image: url("../images/billboards-bg.png");
background-repeat: no-repeat;
}
#slider > .image {
margin: 10px 6px 2px 6px;
}
#slider > .title {
float:left;
color: #5D5B5B;
margin-left: 7px;
font-size: large;
font-weight: bold;
}
#slider > .bulletContainer {
float:right;
width: 100px;
height: 20px;
margin-right: 7px;
}
#slider > .caption {
clear:both;
margin-left: 7px;
padding-top: 2px;
}
#slider > .bulletContainer > .bullet {
width:20px;
height: 20px;
background-image:;
margin: 2px;
float:left;
background-image: url("../images/billboard-pager.png");
background-position: 0 0;
}
#slider > .bulletContainer > .bullet:hover {
cursor: pointer;
background-position: 0 -20px;
}
#slider > .bulletContainer > .bullet.active {
cursor: pointer;
background-position: 0 -40px;
}
Lastly, the main issue I'm facing is:
$(document).ready(function() {
$(".bullet").click(function() {
$(".bullet.active").attr("class", "bullet");
$(this).attr("class", "bullet active");
setContent($(".bullet").index(this));
});
var images = ["images/image1.jpg",
"images/image2.jpg",
"images/image3.jpg",
"images/image4.jpg"];
var titles = ["Title1", "Title2", "Title3", "Title4"];
var subtitles = ["Subtitle1", "Subtitle2", "Subtitle3", "Subtitle4"]
function setContent(index) {
$(".image").fadeOut("fast", function() {
$(this).attr("src", images[index]);
$(".image").fadeIn("fast");
$(".title").text(titles[index]);
$(".caption").text(subtitles[index]);
});
}
});
I am looking for a way to update the titles and captions when changing the image, but I am unsure how to achieve this.