1

私は現在、自分のウェブサイト (www.slatewerner.com) にカスタムのライトボックスのような機能を作ろうとしています。これまでの私の方法は、クリック時に画像を div でラップし、コンテンツ フローの外側に絶対位置に配置し、半透明のグレーの背景にすることです。ランディング画像/状態以外のすべての画像は、AJAX 経由で読み込まれます。私が直面している問題は、「ライトボックス」機能で新しく読み込まれた画像にアクセスできないことです。

私の試みはここでライブで見つけることができます: http://www.slatewerner.com/index_3.1

ブラウザー、jQuery、または必要なものに、これらの新しい画像が DOM にあることを認識させるにはどうすればよいですか? または、新しく読み込まれたコンテンツで有効になるように関数を書き直すにはどうすればよいですか?

私のjQuery（ライトボックスセクションのみ）：

$(document).ready(function(){
$('#content img').click(function(){
    var img = this;
    var width = img.clientWidth;
    var height = img.clientHeight;
    var imgWidth = -width/2;
    var imgHeight = -height/2;
    $(this).wrap('<div class="box"></div>');
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
    $('.box').css('margin-left', imgWidth);
    $('.box').css('margin-top', imgHeight);
});

$('.close').click(function(){
    close_box();
});

$('.backdrop').click(function(){
    close_box();
});

});

function close_box()
{
$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
    $('.backdrop, .box').css('display', 'none');
});
}

私のCSS（ライトボックスセクションのみ）：

.backdrop {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:#000;
opacity: .0;
filter:alpha(opacity=0);
z-index:50;
display:none;
}


.box {
position:absolute;
top:50%;
left:50%;
background:#ffffff;
z-index:51;
padding:10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:0px 0px 5px #444444;
-webkit-box-shadow:0px 0px 5px #444444;
box-shadow:0px 0px 5px #444444;
display:none;
}

.close {
float:right;
margin-right:6px;
cursor:pointer;
}

ありがとう、

-スレート

4

1 に答える 1

2

代わりに使用.onして、クリック イベント ハンドラーをバインドします。これにより、現在DOMにある要素と後で動的に挿入される要素にイベントがバインドされるようになります。

$('#content').on('click', 'img', function(){
    var img = this;
    var width = img.clientWidth;
    var height = img.clientHeight;
    var imgWidth = -width/2;
    var imgHeight = -height/2;
    $(this).wrap('<div class="box"></div>');
    $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
    $('.box').animate({'opacity':'1.00'}, 300, 'linear');
    $('.backdrop, .box').css('display', 'block');
    $('.box').css('margin-left', imgWidth);
    $('.box').css('margin-top', imgHeight);
});
于 2012-05-04T18:11:59.327 に答える