2

これまでライトボックスを使用したことがありませんでしたが、最近、自分の Web サイトで同様の機能を使用することを考え始めました。大量の jquery ライブラリとさまざまなアドオンを見つけましたが、独自のコードを書くことの大ファンです。内部を調べ始めたとき、Javascript イベント リスナーがトリガーされたときに表示される単なる非表示の html 要素のように見えることに驚きました。私はこれについて正しいですか？目に見える以上のものはありますか？

それがどのように機能するのか疑問に思っています。よろしくお願いいたします。

アップデート

素晴らしい答えです！デザインに関する他の考慮事項は言うまでもないので、私はアナの応答に行きました. メカニズムに関する限り、それは本当に素晴らしく控えめなデバイスのように見えます. 読んでくださった方、コメントしてくださった方、返信してくださった方…

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 に答える