2

私は、php を介して動的に作成される一連の div を持っています。div には、ポップアップ ギャラリーの画像 URL を保持する「data-image-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 に答える