0
私はライトボックスをサムネイルで開発していますが、これはプロセスを学習するためのものです。私は自分のコードで次のような問題を抱えています。jquery Lightboxイベントが起動しない
オーバーレイが表示された後でイベントが発生しません。これはjqueryを介してコンテンツが追加されています（なぜイベントハンドラを起動しないのか説明できれば素晴らしいでしょう）。
- 同様の簡単なライトボックスが学習目的に適していますか？ここで
コードです：
$(function(){
var thumbCode = $('.thumbnails').clone() //getting thmbnails html
,closeBtn = "<span class='closeBtn'>× CLOSE</span>" // code for close button
,displayArea = "<div class='imgDisArea'><img class='fullImg'></div>"
,imgSrc
$('.thumbnail').on('click', function() {
var clickedThumbnailSrc = $(this).data('src'); // value of data-src of clicked thumbnail
$('<div class="bg-overlay"></div>').appendTo('body').fadeIn(300,drawContent(clickedThumbnailSrc));
});
// Creating display of light box;
function drawContent(disImgSrc) {
$('.bg-overlay').append(closeBtn).append(displayArea).append(thumbCode);
$('.bg-overlay img.thumbnail').removeClass('thumbnail').addClass('lb-thumb');
changeImgSrc(disImgSrc);
}
$('.lb-thumb').on('click', function() {
console.log('overlay thumbs clicked');
var clickedThumbnailSrc = $(this).data('src'); // value of data-src of clicked thumbnail
changeImgSrc(disImgSrc);
});
function changeImgSrc (disImgSrc) {
$('img.fullImg').attr('src',disImgSrc);
};
$('.closeBtn').on('click', function(){
console.log('close clicked');
$('.bg-overlay').remove();
});
});body {
position: relative;
padding: 0;
margin: 0;
}
/* lb container styles */
.lb {
width: 80%;
margin: 0 auto;
position: relative;
}
/* galery thumbnail styles */
ul.thumbnails {
width: 100%;
text-align: center;
margin:0 auto;
padding: 0;
background: #ccc;
list-style: none;
}
ul.thumbnails li {
display: inline-block;
}
ul.thumbnails li img.thumbnail {
opacity: 0.8;
}
ul.thumbnails li img.thumbnail:hover {
opacity: 1;
cursor: pointer;
}
/* backgournd overlay */
.bg-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.7);
transition: all 0.5s ease;
display: none;
z-index: 1090;
}
.closeBtn {
display: inline-block;
position: absolute;
right: 20px;
top:20px;
z-index: 2010;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.imgDisArea{
height: 80%;
overflow: hidden;
overflow-y: auto;
overflow-x: auto;
margin-bottom: 10px;
}
img.lb-thumb {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="lb">
<ul class="thumbnails">
<li><img class="thumbnail" src="_images/kofidasw1cc-nathan-anderson.jpg" data-src="_images/kofidasw1cc-nathan-anderson.jpg" width="100" height="100"></li>
<li><img class="thumbnail" src="_images/PK_Vivi_Gerusalemme_ora_TESTATA_1280x720_1.jpg" data-src="_images/PK_Vivi_Gerusalemme_ora_TESTATA_1280x720_1.jpg" width="100" height="100"></li>
<li><img class="thumbnail" src="_images/rk7z5yqmcko-james-sutton.jpg" dta-src="_images/rk7z5yqmcko-james-sutton.jpg" width="100" height="100"></li>
<li><img class="thumbnail" src="_images/xqv9qdgosas-timothy-meinberg.jpg" data-src="_images/xqv9qdgosas-timothy-meinberg.jpg" width="100" height="100"></li>
</ul>
</div>
私はあなたがしたい場合にのみ、CSSをライトボックスを作成するための簡単な方法を知っていますか？ – AymDev
リンクを共有してください。 – corefragments
私はそれに答えるでしょう、それは説明することがより簡単になります;） – AymDev