Галерея изображений с надписью и html внутри can not overlay правильное изображение. jquery

Question

Привет, я делаю галерею, где у вас есть большие пальцы, каждый выбирает основное изображение, если вы кликаете основное изображение, которое вы предположите, чтобы получить оверлей, внутри этого наложения есть изображение и некоторый дополнительный html.

Хорошо я почти достигнуть 90% этого кода здесь http://jsfiddle.net/s6TGs/5/

Im используя только jquerytools .. проблема, когда вы выбираете второй палец ... Наложение вы получите это Накладка для thumb1 .. Даже если я изменяю соответствующий (rel = "# target"). Так что я думаю, что я делаю или пропустил что-то еще.

Pls кто-то объясняет мне, почему даже после соответствующего rel, есть изменение, триггер всегда для item1.

Заранее спасибо.

Вот скрипт

$(function() { 
$(".scrollable").scrollable(); 

$(".items img").click(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 relo = $(this).attr("relo"); 

    // get handle to element that wraps the image and make it semi-transparent 
    var wrap = $("#image_wrap").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").attr("rel", relo); 

    }; 

    // 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").click(); 
}); 

// This makes the image Overlay with a div and html 

    $(document).ready(function() { 
     $("img[rel]").overlay(); 
    }); 

Answer 1

Хорошо, по крайней мере я, наконец, получить его работу .. Теперь я просто должен построить СЛЕДУЮЩИЙ и кнопку ПРЕД. но я постараюсь, пока я действительно не смогу, тогда я спрошу .. спасибо в любом случае .. вот код, если он подходит кому-то.

<script> 
$(function() { 
$(".scrollable").scrollable(); 

$(".items img").click(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", ""); 


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

    // 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); 
     wrap2.find("img").attr("src", url); 


    }; 

    // 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").click(); 
}); 


// This makes the image Overlay with a div and html 

    $(document).ready(function() { 
     $("img[rel]").overlay(); 
    }); 
</script>