Галерея изображений с наложением и html внутри не может накладывать правильное изображение. jquery

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

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

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

Кто-нибудь, пожалуйста, объясните мне, почему даже после изменения соответствующего отношения триггер всегда для элемента 1.

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

Вот сценарий

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

javascript jquery css jquery-tools
person Jules Martinez    schedule 29.05.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, по крайней мере, я наконец-то заработал .. теперь мне просто нужно создать кнопки NEXT и PREV. но я буду стараться, пока действительно не смогу, тогда я спрошу .. все равно спасибо .. вот код, если он соответствует чьим-то потребностям.

<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>
person Jules Martinez    schedule 29.05.2013