2

我以前从未使用过灯箱，但最近开始考虑在我的网站上使用类似的功能。我发现了大量的 jquery 库和各种附加组件，但我非常喜欢编写自己的代码。当我开始深入研究时，我惊讶地发现它似乎只是一个隐藏的 html 元素，当触发 Javascript 事件侦听器时会显示该元素。我是对的吗？有没有更多的东西？

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

更新

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

4

1 回答 1

2

不，真的没有更多的东西。但是，除非您不想将 JavaScript 用于您的灯箱，否则我并没有真正看到从一开始就有 HTML 元素的意义，从您的标签来看，我认为这里不是这种情况，我我不喜欢在实际项目中使用，尽管我认为它可以做到真的很酷。

如果您仍然使用 JavaScript 来显示灯箱（这意味着如果 JavaScript 被禁用，即使它存在，您的灯箱也不会显示，从一开始就加载......所以如果可以的话为什么要加载它'不显示它？），那么最好仅在您第一次希望打开灯箱时才创建灯箱元素（以及其中的所有内容，然后将其附加到页面）。

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

图片库的基本灯箱示例。

画廊的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);
于 2012-09-29T08:44:12.413 回答