Coding the slideshow

This is what i 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;
}

And at last the main thing:

$(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");
        });
    }
});

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.

Answers


Here: http://jsfiddle.net/ubfLe/

Change the function setContent:

function setContent(index)
{
    $(".image").fadeOut("fast", function()        
    {
        $(this).attr("src", images[index]);
        $(".title").html(titles[index]);
        $(".caption").html(subtitles[index]);
        $(".image").fadeIn("fast");
    });
}

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.