Question

我之前从未使用过灯箱，但最近开始考虑在我的网站上使用类似的功能。我发现了大量的jquery库和各种附加组件，但我非常喜欢编写自己的代码。当我开始查看引擎盖时，我很惊讶地发现它似乎只是一个隐藏的html元素，在触发Javascript事件监听器时显示。我这是对的吗？是否有更多的眼睛？

只是想知道它是如何工作的。提前感谢您的考虑。

更新

很棒的答案！我选择了Ana的回应，因为关于设计的其他考虑因素不言而喻。就机制来说，它确实看起来确实是一个非常低调的设备。感谢所有阅读，评论和回复的人......

Answer 1

不，真的没有更多。但是，除非你不想在你的灯箱中使用JavaScript，否则我从一开始就没有真正意识到将HTML元素放在那里的意义，我不认为这是从你的标签判断出来的情况。我不喜欢在真正的项目中使用，尽管我觉得它真的很酷。

如果您正在使用JavaScript以显示灯箱（这意味着如果禁用JavaScript，您的灯箱即使在那里也不会显示，从一开始就加载...所以为什么加载它如果你不能显示它？），那么只有当你第一次想要打开灯箱时，最好只创建灯箱元素（以及其中的所有内容，然后将其附加到页面上）。

我的意思是你将一个点击处理程序附加到链接上（实际上，我会将它附加到容器上，然后检查点击的内容，如果它是一个链接，看看它是什么链接并进一步）并检查您是否有灯箱元素。如果你不这样做，那么你就当场创建它。如果您已经这样做了，那么您只需将其显示在所需的任何内容中即可显示所单击的特定链接。

A basic lightbox example for an image gallery。

图库的 HTML 结构将是：

<section class='gallery' id='gallery'>
  <a href='images/large_0.jpg' class='thumb'>
    <img class='thumb-img' src='images/small_0.jpg'>
  </a>
  <!-- as many more as you wish -->
</section>

CSS ：

/* gallery with thumbnails */
.gallery { text-align: center; }
.gallery .thumb, .gallery .thumb-img {
  display: inline-block;
  width: 10em;
  height: 5.6em;
}
/* lightbox */
.lightbox {
  z-index: 999; /* some ridiculously large value to make sure it's on top */
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,.5);
  cursor: pointer;
  text-align: center;
}
.lightbox:before { /* strictly for vertical centering of large image */
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  content: '';
}
/* add/ remove this class to toggle display */
.hidden { display: none; }
.large { /* the large image */
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

JavaScript ：

var g = document.getElementById('gallery');

String.prototype.endsIn = function(suffixes) { /*just to check the extension*/
  for(i in suffixes) {
    if(this.indexOf(suffixes[i], this.length - suffixes[i].length) !== -1)
      return true;
  }
  return false;
};

g.addEventListener('click', function(e){
  var target = e.target, lnk, ext = ['.jpg', '.png'], lightbox, large;
  if(!target.classList.contains('thumb-img')) return;
  else {
    lnk = target.parentNode.href;
    if(!lnk.endsIn(ext)) return;
    else {
      lightbox = document.getElementById('lightbox');
      if(lightbox == null) {
        lightbox = document.createElement('div');
        lightbox.setAttribute('id', 'lightbox');
        lightbox.classList.add('lightbox');
        lightbox.innerHTML = "<img src='"+ lnk +"' id='large' class='large'>";
        document.body.appendChild(lightbox);
        lightbox.addEventListener('click', function(ev) {
          var target = ev.target, next, links = g.querySelectorAll('.thumb'), 
              len = links.length, large = document.getElementById('large');
          if(target.id == 'lightbox') lightbox.classList.add('hidden');
          else if(target.id == 'large') {
            for(var i = 0; i < len; i++) {
              if(links[i].href == large.src) {
                next = links[(i++)%len].href;
                while(!next.endsIn(ext)) next = links[(i++)%len].href;
                large.src = links[i%len].href;
                break;
              }
            }
          }
        }, false);
      }
      else {
        lightbox.classList.remove('hidden');
        large = document.getElementById('large');
        large.src = lnk;
      }
      e.preventDefault();
    }
  }
}, false);

灯箱 - ＆GT;引擎盖下有什么？

1 个答案: