Галерея Nivo Lightbox Bootstrap / Элементы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Элементы

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 14.6 Kb

Уникальный ID: 1962

Количество символов:

Посмотрели: 7457 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-1962-20

Скачали бесплатно: 232 раз

Прокомментировали: 0 раз

Рейтинг: 4.3 / 5 - 7 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: Responsive, галерея, gallery, nivo-lightbox, Bootstrap, element

Поделился: BootstrapТема

Добавлено: 2017-04-12 в 22:24

Метка: 1566192673

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2017/nivo-lightbox/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/nivo-lightbox/script.js"></script>

<style>
.work-grid {
 padding: 1.5px;
}
.work-grid img:hover {
 opacity: 0.6;
}
</style>

<div class="container"><div class="row">

<h1 class="text-center">Галерея Nivo Lightbox Bootstrap</h1>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid">
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk8.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk8.jpg" class="img-responsive" alt="1"/> 
 </a> 
 </div>
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid"> 
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk7.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk7.jpg" class="img-responsive work-img-wid" alt="2"/> 
 </a> 
 </div> 
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid">
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk6.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk6.jpg" class="img-responsive work-img-wid" alt="3"/> 
 </a> 
 </div>
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid">
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk5.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk5.jpg" class="img-responsive" alt="4"/> 
 </a> 
 </div>
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid">
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk4.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk4.jpg" class="img-responsive" alt="5"/> 
 </a> 
 </div>
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid">
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk3.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk3.jpg" class="img-responsive" alt="6"/> 
 </a> 
 </div>
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid">
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk2.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk2.jpg" class="img-responsive" alt="7"/> 
 </a> 
 </div>
 </div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 work-grid">
 <div class="nivo-lightbox"> 
 <a href="https://bootstraptema.ru/portfolio/2017/torque/images/wrk1.jpg" data-lightbox-gallery="gallery1"> 
 <img src="https://bootstraptema.ru/portfolio/2017/torque/images/wrk1.jpg" class="img-responsive" alt="8"/> 
 </a> 
 </div>
 </div>

<script>
 $(document).ready(function(){
 $('.nivo-lightbox a').nivoLightbox({ effect: 'fade' });
 });
</script>

</div></div>