jquery Lightbox Ereignisse nicht feuern

Question

Ich entwickle eine Lightbox mit Thumbnails das ist für Lernprozess. Ich habe folgende Probleme mit meinem Code:

1. Die Ereignisse Brennen sind nicht nach dem Overlay angezeigt. der Inhalt wird durch jquery hinzugefügt (es wäre großartig, wenn Sie auch erklären könnten, warum die Event-Handler nicht ausgelöst werden).

   2. Gibt es einen ähnlichen einfachen Leuchtkasten da draußen gut für Lernzwecke. Hier

ist der Code:

$(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>

Answer 1

Sie können einen einfachen Leuchtkasten tun mit CSS nur (wenn es Ihr Projekt passt):
Sie müssen 2 Blöcke erstellen:

#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>

Dies ist ein Beispiel, es gibt viele Möglichkeiten, Leuchtkästen und es ist hochgradig anpassbar zu machen. Ich benutze diese Methode tatsächlich für ein großes Projekt, es funktioniert ziemlich gut, einschließlich der Kommentare in der Lightbox (ähnlich wie Facebook mit seinem Leuchtkasten).
A Codepen which use this
MDN - CSS :target selector