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

Question

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

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

截至目前，我可以正常工作，除了单击图像时，我似乎无法将其关闭。我希望它是“点击任意位置关闭”。现在我正在使用一个按钮将其关闭，但这似乎已损坏。

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

通过以这种方式构建它，它允许我将我的点击事件绑定(bind)到任何和所有 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.