Атрибут jQuery Grab для элемента в массиве

У меня есть набор div, которые динамически создаются с помощью php, у div есть атрибут с именем data-image-url, который содержит URL-адрес изображения для всплывающей галереи. Когда я нажимаю на div, появляется оверлей вместе с галереей из 3 изображений для этого div (аналогично лайтбоксу).

Я создал оверлей и div, чтобы содержать соответствующие изображения галереи (всего их будет только 3). Однако я не могу понять, как получить значение атрибута data-image-url и сделать его фоновым изображением для div.

Вот моя текущая работа, выведенный php как html выглядит следующим образом:

<div id="overlay"></div>

<div class="blank christmas">
    <div data-image-url="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas.jpg" class="gallery">
        <img src="img/grey.png" class="lazy" data-original="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Christmas-135x190.jpg" alt="" />
    </div>
 </div>

<div class="blank christmas">
    <div data-image-url="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Joy.jpg" class="gallery">
        <img src="img/grey.png" class="lazy" data-original="http://www.samskirrow.com/client-kateguest/wp-content/uploads/2013/09/Joy-135x190.jpg" alt="" />
    </div>
 </div>

Итак, как вы можете видеть, data-image-url — это то, что я пытаюсь использовать здесь в качестве фонового изображения моего div во всплывающем окне.

Вот мой jQuery до сих пор:

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div>');
});

$main_img_url = $('.gallery').attr('data-image-url').html();
$('.main_image').css("background-image", $main_img_url);

И JsFiddle, чтобы показать мою работу: http://jsfiddle.net/9d9sz/1/

Я думаю, проблема в том, что выведенный html имеет несколько атрибутов «data-image-url» (поскольку есть несколько изображений), но я не знаю, как настроить таргетинг на конкретный для изображения, на которое я нажал.


arrays html jquery append attr
person Sam Skirrow    schedule 26.09.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте использовать

$('.gallery').click(function() {
$('#overlay').fadeIn().append('<div class="main_image"></div>');
    $main_img_url = $(this).attr('data-image-url');
    $('.main_image').css("background-image", "url('" + $main_img_url + "')")
});

http://jsfiddle.net/9d9sz/2/

person ʞɹᴉʞ ǝʌɐp    schedule 26.09.2013
comment
блестяще - я знал, что это как-то связано с «этим», просто еще не совсем понял это! Спасибо - person Sam Skirrow; 26.09.2013