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

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

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

Можешь почитать и вот эту статейку "Делаем стильные radio кнопки"

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

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

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

Обновленное

Теги

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

Статистика

  • Caйту: 3297 дней
  • Новостей: 539
  • Комменты: 252
  • Зарегистрированно : 569
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.128сек
  • Потребление памяти: 4.932 Mb 
  •   яндекс.ћетрика