Пропоную свій простий слайдер зображень на mootools. Наведено тільки клієнтська частина. Для повноцінної роботи потрібно серверна, що відповідає за генерацію списку показуються зображень. Прошу розглядати як заготовку для подальшого доопрацювання.
Кодова назва uSlider (від umi)
можливості
обмеження
Нижче ІЕ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, знайти в ньому рядок
і замінити на свій шлях до скрипту, що генерує дані. Скрипт повинен повертати масив виду:
У рядку Images [0] 0 - це порядковий номер слайдера, якщо їх на сторінці кілька. Використовується за замовчуванням, якщо звернення до php йде без параметрів.
Далі йде список зображень із зазначенням шляху до картинки, підписи, цільової посилання. Будь-який з параметрів, крім src, може бути порожнім, але в масиві повинен бути присутнім.
Ткаже ваш скрипт повинен віддавати правильний content-type і кодування
Що можна поліпшити
Додати як настроюються параметри шлях до бекенду. Перейти від передачі даних як масиву до json, це, наприклад, дозволить не гененеріровать галерею на льоту, а кешувати в файл.