Skip to content

oduvanio/teremok

Repository files navigation

#Анимированное слайд-шоу

Установка через 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" }