Question

我正在构建一个twitter fetcher，并且从使用原型开始，我意识到由于一些大图像，滚动非常笨重。我想以与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，而是动态生成灯箱。

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

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

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

1 个答案: