Smoothzoom / Улучшение / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Для Bootstrap: 3, 4

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

Язык: Английский

Вес файла: 1.07 Mb

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

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

Скачать бесплатно

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

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

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

Рейтинг: 4.8 / 5 - 4 голосов

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

Авторство: https://github.com/kthornbloom/Smoothzoom

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

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

Теги: Plugin, smoothzoom, галерея, gallery, Bootstrap

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

Добавлено: 2017-12-12 в 21:17

Метка: 1583087392

⇄ ⇅

<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/smoothzoom/smoothzoom.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2016/easing/jquery.easing.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/smoothzoom/smoothzoom.min.js"></script>

<div class="container"><div class="row"><div class="col-xs-12">

<div class="col-md-4"><a href="https://bootstraptema.ru/images/demo/1920x1080/demo20.jpg" data-smoothzoom="group1"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo20.jpg" class="img-responsive" alt="BootstrapTema demo image 1" /></a></div>
<div class="col-md-4"><a href="https://bootstraptema.ru/images/demo/1920x1080/demo21.jpg" data-smoothzoom="group1"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo21.jpg" class="img-responsive" alt="BootstrapTema demo image 2" /></a></div>
<div class="col-md-4"><a href="https://bootstraptema.ru/images/demo/1920x1080/demo22.jpg" data-smoothzoom="group1"><img src="https://bootstraptema.ru/images/demo/1920x1080/demo22.jpg" class="img-responsive" alt="BootstrapTema demo image 3" /></a></div>

</div></div></div>

<script>
 $(window).load( function() {
 $('img').smoothZoom({
 // Options go here
 });
 });
 </script>
 <script>
 $('img').hover(function() {
 $('img').not(this).css('opacity','.6');
 }, function() {
 $('img').not(this).css('opacity','1');
 });
 </script>