• 1981
  • 0
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Сегодня Bootstrap применяется на многих сайтах,но многие пытаются поставить Лайтбокс на такой шаблон и не всегда удачно.Сегодня расскажу о лайтбокс для Bootstrap.
Итак приступим
1. Там где хотим наблюдать наши фото с эффектом добавляем

Код:
<div class="container">
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="/6111422887_ddd199179a_b.jpg" alt="demo 1">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="/9213448127_51823f78c8_b.jpg" alt="demo 2">
</a>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="/" alt="" />
</div>
</div>
</div>
</div>
2.Добавляем в файл стилей стиль нашего лайбокса
Код:
#lightbox .modal-content {
display: inline-block;
text-align: center;
}
#lightbox .close {
opacity: 1;
color: rgb(255, 255, 255);
background-color: rgb(25, 25, 25);
padding: 5px 8px;
border-radius: 30px;
border: 2px solid rgb(255, 255, 255);
position: absolute;
top: -15px;
right: -55px;
z-index:1032;
}
3.Ну и какой лайтбокс без скрипта,в любой файл js вашего шаблона добавляем этот код
Код:
$(document).ready(function() {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function(event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({'width': $img.width()});
$lightbox.find('.close').removeClass('hidden');
});
});

Можешь почитать и вот эту статейку "Изменяем scrollbar без использование javascript"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Какие темы вам интереснее?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element