使用动态生成的内容创建灯箱？

Question

我正在构建一个 Twitter 获取器，通过使用原型，我意识到由于一些大图像，滚动非常笨拙。我想像 Twitter 在这里那样限制我的图片：

但我不太确定该怎么做。我知道我需要构建我的灯箱，以便将具有特定 class 的图像添加到其中，然后通过 JS 附加 class。有没有更简单的方法来解决这个问题？

截至目前，我可以正常使用此功能，除了单击图像时，我似乎无法将其关闭。我希望它是 "click anywhere to close"。现在我正在使用一个按钮来关闭它，但这似乎被打破了。

这是我的 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 = '';
  });

});

这里还有一个Working CodePen

感谢您的帮助，谢谢大家！

Answer 1

联系一位同事并找到了解决方案。首先它涉及重写我的灯箱覆盖，现在而不是使用 HTML，灯箱是动态生成的。

灯箱和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();
  });

通过这种方式构建，它允许我将点击事件绑定到 any 和 all future divs .lightbox 的名称或在这种情况下，.lightbox 是我图像上的 <a> tags 包装器，其定义如下：

通过 Twitter 提取器生成图像

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++;
        }
      }

我的主要问题是我在 element 生成之前调用它，重写会系统地清理并阻止我的代码执行此操作。总而言之，它有效，here is the prototype.

使用动态生成的内容创建灯箱？

Creating a lightbox using dynamically generated content?

javascript

jquery

html

css

lightbox