Разработка сайтов на UMI.CMS
Знать UMI.CMS в совершенстве невозможно.
Даже сами разработчики знают о ней не все...

UMi

Ursa Minor

Слайдер изображений

Дата публикации: 05.10.2014

 

Предлагаю свой простой слайдер изображений на mootools. Приведена только клиентская часть. Для полноценной работы требуется серверная, отвечающая за генерацию списка показываемых изображений.  Прошу рассматривать как заготовку для последующей доработки.

Кодовое название uSlider (от umi)

Возможности

  • в автоматическом режиме прокручивает набор изображений;
  • позволяет переключаться между слайдами по их номерам; при этом прокрутка останавливается.
  • позволяет перемещаться по слайдам влево-вправо (стрелка при наведении на левый-правый край);
  • выводит подпись для каждого слайда;
  • центральная область (80%) - кликабельная ссылка на целевую страницу
  • внешний вид настраивается в css
  • подстраивается под размеры экрана (естественно, не бесконечно, потому что нумератор слайдов и область для текста делят одну площадь)
  • изображения загружаются поочередно, по мере необходимости в целях экономи трафика и ускорения первоначальной загрузки; заруженные однажды изображения кешируются и повторно не загружаются

 

uSlider

Ограничения

Ниже ИЕ8 не проверял.

В ИЕ8 работает с ограничениями:

  • не выводится полупрозрачный фон для подписи (может быть заменен рисунком в png, см. css)
  • не отображаются стрелки влево-вправо (есть хак в js)

 

Есть нюанс при задании размеров. Сохранение пропорций слайдера при изменении размера окна браузера сделано через padding-bottom в % от ширины содержащего контейнера. Возможно, не при любом соотношении сторон изображений удасться добиться идеального совпадения границ.

 

Примечание. Как известно, только изображения облажают свойством при изменении размера одной из сторон сохранять пропорции. Обычный блок в этом случае высоту сохранит. Обходной путь состоит в том, чтобы создать  вспомогательный блок-обертку. Для целевого блока задаем высоту auto. Блок обертку помещаем внутрь целевого, задаем ширину 100%, а высоту подбираем, задавая ему padding-bottom в %. При этом значение отступа будет рассчитываться от ширины родительского (целевого) блока.  Например, целевой блок имеет ширину 1000px. Блок обертка имеет padding-bottom: 40%. Суммарная высота всей конструкции будет 400px.  Очевидно, что если ширина внешнего блока задана в % от ширины окна, то мы получаем пропрциональное  изменение и высоты тоже.

Требования

Я использовал mootools 1.4.5, 1.5.1

Применение

Подключить скрипт слайдера и файл стилей:


 

В требуемом месте страницы добавить тег:

Слайдер получает данные от бекэнда в виде массива. Открыть файл slider.js, найти в нем строку

slider.php

и заменить на свой путь к скрипту, генерирующему данные. Скрипт должен возвращать массив вида:

var Images = new Array();

	Images[0] = new Array();
	Images[0][0] = {'src':'images/01.jpg', 'text':'Хорошо живет на свете Винни-Пух', 'href':'index.html'};
	Images[0][1] = {'src':'images/02.jpg', 'text':'Хорошо живет на свете Винни-Пух', 'href':'index.html'};
	Images[0][2] = {'src':'images/03.jpg', 'text':'Винни-Пух идет в гости', 'href':'index2.html'};
	Images[0][3] = {'src':'images/04.jpg', 'text':'Винни-Пух объелся меду', 'href':'index3.html'};
	Images[0][4] = {'src':'images/09.jpg', 'text':'Винни-Пух объелся меду', 'href':'index4.html'};
	Images[0][5] = {'src':'images/10.jpg', 'text':'Винни-Пух объелся меду', 'href':'index5.html'};
	

Здесь:

В строке Images[0] 0 - это порядковый номер слайдера, если их на странице несколько. Используется по умолчанию, если обращение к php идет без параметров.

Далее идет список изображений с указанием пути к картинке, подписи, целевой ссылки. Любой из параметров, кроме src, может быть пустым, но в массиве должен присутствовать.

Ткаже ваш скрипт должен отдавать правильный content-type и кодировку

header("Content-type: text/javascript; charset=utf-8");
	

Что можно улучшить

Добавить как настраиваемые параметры путь к бекэнду. Перейти от передачи данных как массива к json, это, например, позволит не гененерировать галерею на лету, а кешировать в файл.

Ссылки

Демо

Файлы

Новости

30.10.2016

Обновлено описание макроса для вывода всех элементов справочника UMI.CMS с учетом версии 14.

 

21.07.2015

Памятка по обновлению до debian 8.1. Приятно вкусить все плюшки PHP 5.6

11.11.2014

Как выполнить SQL-запрос из bash-скрипта. Памятка

11.11.2014

Как отследить нагрузку сайта на сервер.

06.11.2014

Заготовка для галереи изображений с прокруткой. Не знаю, когда дойдут руки довести ее до вида плагина, поэтому открываю как есть. Можно доработать.

05.11.2014

Выкладываю как заготовку свой слайдер изображений на mootools

Все обновления