Адаптивная галерея вращающийся 3D куб | Bootstrap

Галерея вращающийся 3D куб

Адаптивная галерея для сайта с установленным плагином bootstrap, картинки в галерее поворачиваются с 3D эффектом куба, создано описание по установке галереи и её настройке, а так же демо работы.

Подключение и установка галереи 3D куб & Bootstrap

Подключение стилей CSS

Стили галереи можно разместить в любом месте на странице с подключенной галереей.

@import url('//atmpl.ru/design/galleries/2015/rotatingCube/rotatingCube.css');

Подключение внешнего скрипта JS

Сделано две версии внешнего скрипта галереи, для вращения изображений в правую или левую стороны, подключать рекомендуется выше скрипта запуска настроек и ниже HTML кода (см в демо примере).

Подключение скрипта JS для вращения изображений вправо

<script src="//atmpl.ru/design/galleries/2015/rotatingCube/rotatingCubeRight.js"></script>

Подключение скрипта JS для вращения изображений влево

<script src="//atmpl.ru/design/galleries/2015/rotatingCube/rotatingCubeLeft.js"></script>

Подключайте только один из внешних скриптов для направления движения картинок галереи.

Установка HTML кода bootstrap

Вы должны сами определить конструкцию кода исходя из ситуации в расположении элемента галереи в вёрстке с подключенным плагином bootstrap.

<div class="container">
 <div class="row">
 <div class="col-md-offset-2 col-md-8 rotatingCube" id="cubeshow"></div>
 <div class="clearfix"></div>
 </div>
</div>

Установка скрипта запуска настроек галереи

Установка скрипта настроек производится ниже всех компонентов галереи.

Описание настроек галереи

fxduration: 1000
Скорость попорота галереи
pause: 1000
Пауза перед началом следующего поворота
images: [
['//atmpl.ru/baner/gif/atmpl-650x480.gif', '//atmpl.ru'],
//atmpl.ru/baner/gif/atmpl-650x480.gif - Адрес изображения
//atmpl.ru - Адрес для перехода

Скрипт запуска настроек

<script>
// Запуск галереи
var cubeshowvar

jQuery(function($){

// Настройки галереи
cubeshowvar = new rotatingCube({
id: 'cubeshow', // Идентификатор блока
fxduration: 1000,// Скорость поворота блока
pause: 1000, // Пауза перед поворотом блока
images: [
['//atmpl.ru/baner/gif/atmpl-650x480.gif', '//atmpl.ru'],
['//atmpl.ru/baner/gif/atmpl-650x480.gif', '//atmpl.ru'],
['//atmpl.ru/baner/gif/atmpl-650x480.gif', '//atmpl.ru']
]
})

})
</script>

Демо примеры работающей галереи

Для просмотра демо результата нажмите на Кнопка выполнения кода html & css & javascript в редакторе. Вы можете внести изменения в код, чтобы проверить поведение галереи при изменении настроек.


Рейтинг: 5.0/5 из 1



Добавлено Автор Ник Источник Просмотров Комментариев Теги
29-05-2015 Михаил Меренков aTmpl © 666 0 responsive, адаптивная, Галерея, bootstrap