Erstellen eines Leuchtkastens mit dynamisch generiertem Inhalt?

Question

Ich baue einen Twitter-Fetcher und durch die Arbeit mit dem Prototyp habe ich festgestellt, dass das Scrollen wegen einiger großer Bilder ziemlich klobig ist. Ich möchte meine Bilder in der gleichen Art und Weise beschränken, dass Twitter hat sich hier:

Aber ich bin nicht ganz sicher, wie um dies zu realisieren. Ich weiß, dass ich meinen Leuchtkasten so bauen muss, dass Bilder mit einer bestimmten Klasse hinzugefügt werden, und dann die Klasse über JS anhängen. Gibt es einen einfacheren Weg?

Im Moment habe ich irgendwie funktioniert, außer wenn ich auf ein Bild klicke, kann ich nicht scheinen, es nah zu machen. Ich möchte es "irgendwo klicken, um zu schließen". Im Moment benutze ich einen Knopf, um es zu schließen, aber das scheint kaputt zu sein.

Hier ist mein HTML:

<!-- empty div for twitter fetch --> 
<div id="config"></div> 

<!-- lightbox popup modal --> 
<div class="lightModal"> 
    <div class="lightModal-inner"> 
     <button class="lightModal-close" role="button">&times;</button> 
     <h3 class="lightModal-title">Title here</h3> 
     <img class="lightModal-image" src="http://placehold.it/350x150" alt="Title here"> 
    </div> 
</div> 

JS

// light box 

// get all links 
var links = document.querySelectorAll('.lightCustom'), 
// make array 
arrayOfLinks = Array.prototype.slice.call(links); 
// loop 
Array.prototype.forEach.call(arrayOfLinks,function(obj,index){ 
    // open modal on click 
    obj.addEventListener('click',function(e){ 
    e.preventDefault(); 
    // if not title show no title 
    var title = (obj.title) ? obj.title : 'This not have title'; 
    // add class show 
    document.querySelector('.lightModal').classList.add('show'); 
    // add title in modal with title="" 
    document.querySelector('.lightModal-title').innerHTML = title; 
    // get href and add in image modal 
    document.querySelector('.lightModal-image').src = obj.href; 
    // add title in alt image 
    document.querySelector('.lightModal-image').alt = title; 
    }); 
    // close modal 
    document.querySelector('.lightModal-close').addEventListener('click',function(e){ 
    e.preventDefault(); 
    // remove class="show" 
    document.querySelector('.lightModal').classList.remove('show'); 
    // remove title 
    document.querySelector('.lightModal-title').innerHTML = ''; 
    // remove src 
    document.querySelector('.lightModal-image').src = ''; 
    // remove alt 
    document.querySelector('.lightModal-image').alt = ''; 
    }); 

}); 

Hier ist ein Working CodePen auch.

Schätzen Sie die Hilfe, danke Jungs!

Answer 1

Erreicht zu einem Kollegen und stieß auf eine Lösung. Zuerst musste ich mein Light Box Overlay umschreiben, jetzt wird die Lightbox nicht mehr mit HTML, sondern dynamisch generiert.

Lichtbox und Overlay JS

// light box 

var $overlay = $('<div id="overlay"></div>'); 
var $image = $("<img>"); 

//An image to overlay 
$overlay.append($image); 

//Add overlay 
$("body").append($overlay); 
type: "image" 

    //click the image and a scaled version of the full size image will appear 
    $(document).on("click", ".lightbox", function(event) { 
    event.preventDefault(); 
    var imageLocation = $(this).attr("href"); 

    //update overlay with the image linked in the link 
    $image.attr("src", imageLocation); 

    //show the overlay 
    $overlay.show(); 
    }); 

    $("#overlay").click(function() { 
    $("#overlay").hide(); 
    }); 

Durch es auf diese Weise bauen, es erlaubt mir meine Click-Ereignis jede und alle zukünftigendivs mit Namen .lightbox oder in diesem zu binden case, .lightbox ist meine <a> tags Wrapper auf meinem Bild, die wie folgt definiert ist:

Bildergenerationen über Twitter holen ihm

if (showImages && images[n] !== undefined) { 
      op += '<ul class="media">' + '<li>' + 
       '<a class="lightbox" href="' + extractImageUrl(images[n]) +'">' + '<img src="' + extractImageUrl(images[n]) + '" alt="Image from tweet" />' + '</a>' + '</li>' + '</ul>'; 
      } 

      arrayTweets.push(op); 
      n++; 
     } 
     } 

Mein Hauptproblem war, dass ich ein element rufe, bevor er erzeugt wurde, und Umschreiben würde meinen Code, dies zu tun systematisch aufzuräumen und zu verhindern. Alles in allem funktioniert es, here is the prototype.