янв
08
2016

Изучаем jQuery. Обычный лайтбокс

Зачем нужно создавать собственный лайтбокс? Прежде всего, нам изначально требовалась возможность просматривать базовое изображение без каких-либо наворотов, которые занимают лишние килобайты. Мы также заглянем внутрь и посмотрим, как реализуется функциональность подобного рода.
Наш лайтбокс будет крайне прост: при щелчке кнопкой мыши на любой ссылке, которая обладает классовым именем class в виде lightbox, на экране будет появляться изображение, на файл с которым указывает ссылка. Данное изображение будет располагаться по центру экрана, а окружающие его области окажутся деактивированы и затемнены, что послужит визуальным индикатором.
index.html
...
<p>
 <a href="img/big-pic-1.jpg" class="lightbox">
  <img src="img/small-pic-1.jpg">
 </a>
 ...
</p>
...
script.js
$(document).ready(function(){
  $('a.lightbox').click(function(e) {
    // $('body').css('overflow-y', 'hidden'); // hide scrollbars!
    
    $('<div id="overlay"></div>')
      .css({
        'top':'0',
        'opacity':'0'
      })
      .animate({'opacity': '0.5'}, 'slow')
      .appendTo('body')
      .click(function(){
        removeLightbox();
      });
      
    $('<div id="lightbox"></div>')
      .hide()
      .appendTo('body');
      
    $('<img>')
      .attr('src', $(this).attr('href'))
      .load(function() {
        positionLightboxImage();
      })
      .click(function() {
        removeLightbox();
      })
      .appendTo('#lightbox');
    return false;
  });
});

function positionLightboxImage() {
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  $('#lightbox')
    .css({
      'top': top,
      'left': left
    })
    .fadeIn();
}

function removeLightbox() {
  $('#overlay, #lightbox')
    .fadeOut('slow', function() {
      $(this).remove();
      // $('body').css('overflow-y', 'auto'); // show scrollbars!
    });
}
Данный лайтбокс, вероятно, является самым простым, который только можно представить, однако этого вполне достаточно, чтобы показать, как он функционирует.