2

我有一组通过 php 动态创建的 div，这些 div 有一个名为“data-image-url”的属性，其中包含弹出式画廊的图像 url。当我单击 div 时，会弹出一个叠加层以及该 div 的 3 个图像库（类似于灯箱）。

我已经创建了叠加层和 div 以包含相关的画廊图像（永远只有 3 个）。但是，我不知道如何从属性“data-image-url”中获取值并将其作为 div 的背景图像。

这是我目前的工作，输出为 html 的 php 如下：

<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”属性（因为有几个图像），但我不知道如何针对我单击的图像定位特定的属性。

4

1 回答 1

3

尝试使用

$('.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/

于 2013-09-26T07:44:43.523 回答