Bootstrap Thumbnail Slider
Готовый сниппет Bootstrap Thumbnail Slider из категории Слайдеры под идентификационным номером 1116 и индивидуальной меткой 1465501895. Добавлен 2016-06-09 вебмастером BootstrapТема в 22:51, этот сниппет смотрели 585 человек. Сниппет Bootstrap Thumbnail Slider представляет собой готовый HTML код для установки.
Категория: Слайдеры
Для Bootstrap: 3, 4
Для CMS: HTML, Drupal, Joomla, uCoz, WordPress
Язык: Русский
Уникальный ID: 1116
Количество символов:
Посмотрели: 585 раз
Прокомментировали: 2 раз
Рейтинг: 5.0 / 5 - 2 голосов
Тип лицензии: CC BY 4.0
Авторство: http://bootstraptema.ru/stuff/snippets_bootstrap/sliders/bootstrap_thumbnail_slider/28-1-0-1116
Поделился:
Добавлено: 2016-06-09 в 22:51
Метка: 1465501895
Всего комментариев: 2
avatar
0
2
Сделан дополнительный эффект для Bootstrap Thumbnail Slider.
Используется плагины:
ElevateZoom
Magnific Popup
Смотрите демо код в редакторе:
Bootstrap Thumbnail Magnific Elevate Slider
avatar
0
1
Если Вам нужно добавить увеличение большой картинки в открывающемся модальном окне, добавьте html код модального окна и скрипт запуска ниже предоставленного кода в редакторе:


Код
<div class="modal fade bs-example-modal-lg" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"  
aria-hidden="true">  
    <div class="modal-dialog modal-lg" role="document">  
      <div class="modal-content">  
        <div class="modal-header">  
          <button type="button" class="close" data-dismiss="modal"  
aria-label="Close"><span  
aria-hidden="true">×</span></button>  
          <h4 class="modal-title" id="myModalLabel">Изображение в модальном окне</h4>  
        </div>                
        <div class="modal-body">  
          <img src="" class="imagepreview" style="width: 100%;" />  
        </div>  
      </div>  
    </div>  
  </div>  

  <script>  
  $(function() {  
     $('.item').on('click', function() {  
        $('.imagepreview').attr('src', $(this).find('img').attr('src'));  
        $('#imagemodal').modal('show');     
     });          
  });  
  </script>

Полный демо код в редакторе:

Bootstrap Thumbnail Slider & Modal
avatar