Javascript Slider title replace html for title just working on 1st item

Question

Hi im building a slider using jquery tools.. here is my code http://jsfiddle.net/SmW3F/5/

Anyway, the problem is when you over the image is updated (the Main image) so each thumb update the main image on hover.

The problem is the title is just working for 1st item.. all other items are not updating the title..

here is this part of the code

var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });

$(".items img").on("hover",function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");
    var tbtit = $("#tbtit").html();
    var tbdesc = $("#tbdescp").html();

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").stop(true, true).fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);
        wrap.find(".img-info h4").replaceWith(tbtit);
        wrap.find(".img-info p").replaceWith( tbdesc);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").trigger("mouseover");

var count = 0;
var scroll_count = 0;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){
        console.log(count);
        $(".items img").eq(count).trigger("mouseover");

        if(count % 5 === 0)
        {

Answer 1

I found a couple of issues with your script, but first you have invalid markup in your page since you have multiple <div> elements with the same ids of tbtit and tbdescp. Id attributes should be unique in a HTML page so should change those to classes instead.

Now in your script you need to change the part where you retrieve the values of the title and the description of the image that is hovered to reference the sibling elements:

//THIS
var tbtit = $("#tbtit").html();
var tbdesc = $("#tbdescp").html();

//SHOULD NOW BE THIS
var tbtit = $(this).siblings('.tbtit').text();
var tbdesc = $(this).siblings('.tbdescp').text();

Finally when you update the text for your main image you want to set the content for your <h4> and <p> tags and not replace them completely, so use .text()

//THIS
wrap.find(".img-info h4").replaceWith(tbtit);
wrap.find(".img-info p").replaceWith( tbdesc);

//SHOULD NOW BE THIS
wrap.find(".img-info h4").text(tbtit);
wrap.find(".img-info p").text( tbdesc);