Coding the slideshow

This is what i have :


    <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"/>
    <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 class="caption">Subtitle1</div>


body { 
    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 {
    color: #5D5B5B;
    margin-left: 7px;
    font-size: large;
    font-weight: bold;
#slider > .bulletContainer {
    width: 100px;
    height: 20px;
    margin-right: 7px;
#slider > .caption {
    margin-left: 7px;
    padding-top: 2px;
#slider > .bulletContainer > .bullet {
    height: 20px;
    margin: 2px;
    background-image: url("../images/billboard-pager.png");
    background-position:  0 0;
#slider > .bulletContainer > .bullet:hover {
    cursor: pointer;
    background-position:  0 -20px;
#slider > .bulletContainer > {
    cursor: pointer;
    background-position:  0 -40px;

And at last the main thing:

$(document).ready(function() {
    $(".bullet").click(function() {
        $("").attr("class", "bullet");
        $(this).attr("class", "bullet active");
    var images = ["images/image1.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]);

The thing is i want to change titles and subtitles(caption) same when to change picture but i dont have a slightest idea how to do that.



Change the function setContent:

function setContent(index)
    $(".image").fadeOut("fast", function()        
        $(this).attr("src", images[index]);

Need Your Help

password_verify not matching after writing to database

php mysqli password-hash

I think my problem is environmental, but I have tapped everything I can think of to find it. The code was working fine 3 weeks ago, and suddenly stopped a few days ago. I haven't updated the O/S ...

JUnit weaving wrong Spring AOP Bean

java spring junit aop

I've run into a strange problem that I am having difficulty tracking down. I have an class (ServiceErrorInterceptor) defined as an @Aspect which is instantiated via XML configuration as a singleton

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.