Платформа: любая
Сегодня я хочу предоставить вашему вниманию замечательный jQuery-скрипт, позволяющий легко и быстро создать так называемый Слайдрион – совмещение слайдера изображений и вертикального аккордеона. Красиво, удобно, компактно, стилизуемо – а, главное, при должной фантазии позволит вам сделать все, что душе угодно: от фотогалереи с описаниями фотографий до новостной секции с иллюстрациями. Мне кажется, такой скрипт обязательно пригодиться форумам творческой направленности.
Размещение контента:
HTML
Итак, как же это ставить. Для начала подключаются два плагина, позволяющие работать нашему слайдо-аккордеону.
JS (самый верх html-низ или самый верх контейнера страницы)
Файлы js-скриптов залиты на форум-полигон, при желании вы можете скачать их (открыть ссылку -> меню браузера -> файл -> сохранить как…) и пересохранить в собственное хранилище форума (администрирование -> файлы)
Дальше у нас идут стилистические изыски. Все с комментариями, в коде есть лишь один сложный момент, который описан ниже.
CSS (верхний html-контейнер, контейнер страницы или без тегов в css-окна)
Как вычислить высоту #accordion .content:
Берем высоту контейнера (#accordion height), вычитаем из него помноженную на число вкладок высоту заголовка (#accordion .header height) и делим полученное число на количество вкладок.
И напоследок самое сладкое – инициализатор скрипта. А у него, как у хорошего скрипта, есть чудесное свойство – опции! Вы можете сами настроить автосмену позиций, способ смены картинки и некоторые другие вещи. Но для начала:
JS (html-низ или контейнер страницы)
Список опций:
autoPlay: 'true' | Автоматическая смена слайдов включена |
autoPlay: 'false' | Автоматическая смена слайдов отключена |
effect: 'fade' | Смена изображений через выцветание |
effect: 'slideLeft' | Смена изображений замещением слева |
effect: 'slideRight' | Смена изображений замещением справа |
effect: 'slideDown' | Смена изображений замещением сверху вниз |
effect: 'slideUp' | Смена изображений замещением снизу вверх |
effect: 'overLeft' | Смена изображений наползание слева |
effect: 'overRight' | Смена изображений наползание справа |
effect: 'overDown' | Смена изображений наползание сверху вниз |
effect: 'overUp' | Смена изображений наползание снизу вверх |
hoverPause: 'true' | Пауза проигрывания при наведении курсора мыши включена |
hoverPause: 'false' | Пауза проигрывания при наведении курсора мыши выключена |
interval: число в миллисекундах без кавычек! | Задержка перед сменой изображения |
speed: число в миллисекундах без кавычек! | Время смены одного слайда, то есть скорость анимации |
Пожалуйста, будьте внимательны! После каждой опции, кроме последней, ставьте запятую, это важно!