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)
        {

score 2 · Accepted Answer · answered Aug 04 '13 at 06:20

2

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);

answered Aug 04 '13 at 06:20

omma2289

54,161
8
64
68

Ok i tried but i think , its destroying the h4 and p tags cause i cant see them anymore, i guess cause the CSS is just working for h4 and p there. http://jsfiddle.net/SmW3F/6/ – Jules Martinez Aug 04 '13 at 06:25
@JulesMartinez you didn't correct the id attributes, make sure you change those to classes – omma2289 Aug 04 '13 at 06:28
Oh!! i didnt understand quite well the first time.. i think i do know – Jules Martinez Aug 04 '13 at 06:30
sorry to ask this, do you have any idea of why if i turn the thumb into a link (wrap the image in a tag) the hover stop working.. i think is something with the classes, (thumb 1 is a link http://jsfiddle.net/SmW3F/9/) – Jules Martinez Aug 04 '13 at 06:50
solved used onclick http://stackoverflow.com/questions/8536653/onclick-on-a-image-to-navigate-to-another-page-using-javascript – Jules Martinez Aug 04 '13 at 06:59
@JulesMartinez why did you need on click? If you wrap the img in a link then you would need to change the siblings selector to get the siblings of the parent so `$(this).parent().siblings('.tbtit');` Also I suggest you remove the line in your CSS where you set the cursor to default on `.scrollable .active` – omma2289 Aug 04 '13 at 07:04
cause i need the thumb and main image redirect to the product,. I told my client this is not the best , i dont like it, but he want its that way :S – Jules Martinez Aug 04 '13 at 17:06

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

1 Answers1