jquery Лайтбокс события не стреляют

Я разрабатываю лайтбокс с эскизами, это для процесса обучения. У меня возникают следующие проблемы с моим кодом:jquery Лайтбокс события не стреляют

События не срабатывают после появления наложения. который имеет контент, добавленный к нему через jquery. (было бы здорово, если бы вы могли объяснить также, почему он не запускает обработчики событий).
1. Есть ли аналогичный простой лайтбокс, хорошо подходящий для обучения.

Вот код:

$(function(){ 
 

 
    var thumbCode = $('.thumbnails').clone() //getting thmbnails html 
 

 
     ,closeBtn = "<span class='closeBtn'>&times; 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>

источник

2017-02-15 corefragments

Я знаю простой способ создания лайтбокса с помощью CSS, только если вы хотите? – AymDev

Прошу, поделитесь ссылкой с ним. – corefragments

Я отвечу с ним, это будет проще объяснить;) – AymDev

Вы можете сделать простой лайтбокс с CSS только (, если он соответствует вашему проекту):
Вам необходимо создать 2 блока:

#normal { 
 
     max-width: 50%; 
 
     height: 200px; 
 
    } 
 

 
    #lightbox { 
 
     /* First, we hide the lightbox block */ 
 
     display: none; 
 
     position: absolute; 
 
     z-index: 999; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
\t  background: rgba(0,0,0,0.9); 
 
\t  text-align: center; 
 
    } 
 
    
 
    #lightbox img { 
 
     max-width: 80%; 
 
\t  max-height: 75%; 
 
\t  margin-top: 5%; 
 
    } 
 

 
    /* When the lightbox is the target of a link, we display it */ 
 
    #lightbox:target { 
 
     display: block; 
 
     outline: none; 
 
    }

<a id="normal" href="#lightbox"> 
 
     <img src="https://cdn.meme.am/cache/instances/folder965/500x/55103965.jpg"> 
 
    </a> 
 
    <a id="lightbox" href="#_"> 
 
     <img src="https://cdn.meme.am/cache/instances/folder965/500x/55103965.jpg"> 
 
    </a>

Это пример, есть много способов сделать лайтбоксы и это очень настраиваемый. Я фактически использую этот метод для большого проекта, он работает очень хорошо, включая комментарии в лайтбокс (аналогично тому, что делает facebook со своим лайтбокс).
A Codepen which use this
MDN - CSS :target selector

источник

2017-02-15 09:18:24 AymDev

jquery Лайтбокс события не стреляют

ответ

Смежные вопросы