www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Nivo Slider - красивое слайд-шоу для сайта
Nivo Slider - популярный красивый слайдер, плагин бесплатной библиотеки скриптов jQuery. Он разработан компанией Dev7studios, создателем многих замечательных скриптов слайд-шоу, фотогалерей, зума и других эффектов для демонстрации изображений на сайте. О некоторых из них уже было рассказано ранее (см., например, статью Увеличение изображений. Плагин Nivo Zoom). Компания Dev7studios расположена в Шотландии, специализируется на веб-приложениях, её основатель и руководитель - Гилберт Пеллегром (Gilbert Pellegrom).
Количество предлагаемых переходов между слайдами в Nivo Slider одно из самых больших среди аналогичных скриптов, а их качество вполне удовлетворительное во всех браузерах, включая Internet Explorer. Пример реализации Nivo Slider (v2.4) со случайным выбором переходов показан ниже:
    |
Подробное описание разных вариантов Nivo Slider можно посмотреть на официальном сайте Nivo Slider. Мы же ограничимся показанным слайдером, которого, впрочем, достаточно для большинства применений.
Установка слайдера Nivo Slider
Как всегда, начинаем с создания на сайте новой папки, назвав её, естественно, nivo_slider. Затем скачиваем архив и распаковываем его в эту папку. У нас получится в ней два js-файла, два CSS-файла и папка images с вспомогательными изображениями.
Далее необходимо добавить в заголовок страницы с будущим слайд-шоу внутрь тега <head>...</head> следующие строчки, указывающие пути к новым файлам, и небольшой JavaScript для инициализации Nivo Slider.
<link rel="stylesheet" href="nivo_slider/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo_slider/nivo-slider.css" type="text/css" media="screen" />
<script src="nivo_slider/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="nivo_slider/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Теперь размещаем на странице сайта необходимые изображения, поместив их в тег <div id="slider">. Не забывайте, что все изображения должны иметь одинаковые размеры.
<div id="slider" >
<img src="images_01.jpg" alt="" />
<img src="images_02.jpg" alt="" />
<img src="images_03.jpg" alt="" title="Пример с надписью" />
<img src="images_04.jpg" alt="" />
</div>
Как видим, для третьего рисунка добавлена надпись (атрибут title), которая выводится внизу слайдера. Конечно, никто не запрещает вам сделать изображения ссылками.
На этом установка Nivo Slider закончена, и вы можете посмотреть созданное слайд-шоу, открыв страницу в браузере.
Настройка параметров слайдера Nivo Slider
Для настройки параметров Nivo Slider используются два файла:
- файл стилей style.css, в котором задаются размеры кнопок и их вид,
- файл jquery.nivo.slider.js для изменения глобальных настроек показа слайд-шоу.
Внесение изменений в CSS не имеет каких-либо особенностей, а для работы со скриптом jquery.nivo.slider.js откроем его в редакторе или в Блокноте и в самом конце найдем следующие строчки с русскими комментариями:
effect: 'random', //эффекты переходов между слайдами, см. перечень ниже
slices: 15, //количество квадратов разбивки изображения в эффектах slices
animSpeed: 500, //скорость смены слайдов
pauseTime: 3000, //время отображения слайда
startSlide: 0, //номер первого выводимого слайда
directionNav: true, //вывод кнопок вперед/назад
directionNavHide: false, //вывод кнопок навигации вперед/назад только при наведении мыши
controlNav: true, //вывод рамки с кнопками выбора слайда
controlNavThumbs: false,
controlNavThumbsFromRel: false,
controlNavThumbsSearch: '.jpg',
controlNavThumbsReplace: '_thumb.jpg',
keyboardNav: true,
pauseOnHover: true,
manualAdvance: false, //отключение автоматической смены слайдов
captionOpacity: 0.8, //прозрачность заголовка
Значения этих настроек, надеюсь, не требуют пояснений, и их можно менять "вручную", сразу просматривая результат в браузере. Показанные в скрипте настройки соответствуют нашему примеру в начале статьи.
Вид переходов между кадрами слайд-шоу определяется первым в списке параметром effect и может принимать следующие значения:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random - случайный выбор перехода
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse.
Выбор переходов в Nivo Slider также лучше всего определять при просмотре в браузере, установив нужное значение для effect (не забывайте перед просмотром сохранить изменения в файле jquery.nivo.slider.js).
Разработчики слайдера Nivo Slider постоянно совершенствуют его. К настоящему времени предлагается версия V3.6, которую можно скачать на сайте Nivo Slider. В ней добавлены новые темы оформления слайд-шоу и др. элементы. Установка новых версий выполняется аналогично описанной и не вызывает трудностей.
О других программах создания на сайте фотогалерей, каруселей изображений и слайд-шоу смотрите в статьях о jQuery и в разделе "Веб-дизайн и SEO".
24.08.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru