oduvanio / teremok
Анимированный background
Installs: 279
Dependents: 1
Suggesters: 0
Security: 0
Stars: 1
Watchers: 3
Forks: 1
Open Issues: 1
Language:JavaScript
Requires
- infrajs/access: ~1
- infrajs/ans: ~1
- infrajs/config: ~1
- infrajs/imager: ~1
- infrajs/load: ~1
- infrajs/path: ~1
- infrajs/router: ~1
README
#Анимированное слайд-шоу
Установка через composer.json
{ "require":{ "oduvanio/teremok":"~1" } }
Использование
Добавить в head
<script src="teremok.js"></script> <link rel="stylesheet" href="teremok.css" />
В любом месте html страницы добавить блок с классом teremok в котором будет анимация. Обязательный атрибут data-src до папки с картинками относительно корня проекта.
<div class="teremok" data-src="vendor/oduvanio/teremok/images/" style="height:400px"></div>
Запустите скрипт, добавив в конце страницы:
<script> Teremok.init(); </script>
Требования
- composer
- php >= 5.4
- jquery
Описание работы
- Достаточно указать путь до папки
- С серверным кэшем, по умолчанию в корневой папке проекта /cache, создаётся автоматически
- Автоматическое изменение размера иллюстраций infrajs/imager
- Оптимальная исходная ширина картинки для показа на весь экран 2500px из расчёта что экран 1920px и для приближения ещё 30% запаса
Использование с infrajs
Поддерживается конфигурация .infra.json
- count:5 - ограничение на количество картинок в ротации
- indicators: true - индикаторы для смены картинок
Поддерживается загрузка javascript в одном файле
С помощью infrjs/collect
Добавление кнопки-ссылки к слайду
Для добавления кнопки необходимо: 1. В структуре HTML файла в контейнер
добавить:<a class="btn btn-info buttonTeremok" href="" infra="true">""</a>
2. В папке со слайдами создать одноименный файл с расширением .json, который обязательно должен содержать следующую информацию:
title - надпись на кнопке
href - ссылка на которую нужно перейти при клике по кнопке
styleBtn - стиль кнопки (класс)
Пример:
{ "title": "Подробнее", "href": "/certificate", "styleBtn": "btn-info" }