Наша взаимовыгодная связь https://banwar.org/
Дата публікації: 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, це, наприклад, дозволить не гененеріровать галерею на льоту, а кешувати в файл.
посилання
демо
файли
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
