янв
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!
});
}
Данный лайтбокс, вероятно, является самым простым, который только можно представить, однако этого вполне достаточно, чтобы показать, как он функционирует.