Увеличиваем функционал сайта с помощью Nivo Slider

By | 06.12.2012

Сегодня я предлагаю познакомиться с замечательным jQuery-слайдером  Nivo Slider и научиться подключать его к сайту.

Этот плагин говорит сам за себя… Очень качественный, очень эффектный. Из JQuery слайдеров этот плагин самый простой в использовании.

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

Для слайдера доступны 3 темы оформления:

Default

79562525

Orman

Pascal

чтобы подключить слайдер на страницах своего сайта, нужно для любой из 3-х тем:

1. Подключить между тегами

следующие файлы стилей

для темы default дополнительно к первым двум файлам подключить файл стилей темы:

для темы orman дополнительно к первым двум файлам подключить файл стилей темы:

для темы pascal дополнительно к первым двум файлам подключить файл стилей темы:

2. В самом низу кода страницы, перед закрывающим тегом

для любой из выбранных тем оформления слайдера подключить скрипты:

3. В том месте, где вы планируете разместить слайдер изображений, вставляем код слайдера:

А для того, чтобы выбрать код слайдера определенной цветовой темы, нужно из этих трех строк выбрать одну нужную, соответствующую названию темы:

Например, если мы хотим выбрать оформление слайдера темой orman, то из этих 3-х строк останется одна:

Как видите, всё просто, главное проследите, чтобы пути к файлам стилей, скриптов и изображений были корректно прописаны. Всё необходимое для установки вы найдете в исходниках.

Немного об оформлении изображений в слайдере.

Чтобы добавить подпись к изображению, вам нужно всего лишь добавить для него атрибут title

Чтобы добавить подпись к изображению, содержащую HTML — элементы (например,ссылку), нужно для изображения в атрибуте title указать название ID элемента, содержащего подпись.

Например, имеем изображение

и имеем блок с ID с названием htmlcaption

Значит, чтобы у нашего изображения вывелась подпись из блока, нужно добавить ему атрибут title с названием ID этого блока

При этом для блока, содержащего подпись, обязательно должен быть применен класс «nivo-html-caption», а сам блок должен располагаться вне блока слайдера.

Дополнительно само изображение можно сделать ссылкой, выше мы говорили, что слайдер поддерживает ссылки для изображений:

Имеющиеся эффекты перехода изображений

sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse

Настройки параметров скрипта и опции

Как я говорил выше, для всех трёх тем оформления в конце кода страницы нужно подключать скрипт, в общем виде он выглядит, как мы его и указали:

Это «базовая» версия, расширенная же его версия с многочисленными параметрами и настройками выглядит следующим образом:

Источник
Перевод: PS-Studio.Info

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.