Хаки и Скрипты Next Generation CMS

Лайтбокс эффект для Bootstrap

irbees2008 irbees2008 Опубликовано - 25 - октября Диалоги и lightbox
4267 - 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');
});
});

Можешь почитать и вот эту статейку "Спрятать блок на мобилках"

Опрос

Ваше мнение

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

Последние комментарии

Теги

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

Статистика

  • Caйту: 4843 дня
  • Новостей: 616
  • Комменты: 257
  • Зарегистрированно : 763
  • Онлайн всего: [3]
  • Гости: [3]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 1.252сек
  • Потребление памяти: 6.473 Mb 
  •   Яндекс.Метрика