Ещё одна типовая задача, для которой найдено приличное решение. Типично суть задачи состоит в следующем. Есть набор изображений, которые демонстрируются поочередно в некотором контейнере. Ставится задача по анимации периодической смены этих картинок средствами javascript.
Самая простая реализация — это управление стилем display. Сложные варианты включают в себя последовательное изменение позиции изображения, смена стилей прозрачности и т.п. Венчает весь этот список самоделок варианты с использованием плагина для jquery — nivo slider. Не будем рассматривать промежуточные варианты, сразу перейдем к вершине.
Nivo Slider
Итак, у нас есть библиотека со спец-эффектами. Возникает множество вопросов — пределы её применения, совместимость с браузерами, что она может, как её использовать и сколько она «весит»? У меня нет задачи провести какие то масштабные тесты, тем более демонстрация возможностей и описание пределов применения, её совместимость — все это описано на сайте разработчика. Мне хотелось бы просто познакомить вас с этой замечательной (по моему мнению) библиотекой-плагином.
Так что же она может?
Она позволяет реализовать несколько типовых задач:
- Анимация смены изображений. В текущий момент доступен набор из 16-ти эффектов.
- Реализация управления слайдером. К плагину прилагается несколько готовых тем для стрелочек и «точечек», которыми можно листать картинки или переходить от картинки к картинке в произвольном порядке.
- Цикл смены изображений. Все упаковано в одну функцию. Нужно только перечислить картинки в контейнере, подключить плагин, доп. файл со стилями плагина и сделать всего один вызов ф-ции в javascript для начала анимации.
Как подключить этот плагин?
На странице разработчика nivo.dev7studios.com/support/jquery-plugin-usage было подробное описание. Несмотря на то что оно «подробное», занимает оно всего пару страниц. Для тех, кто с английским не в ладах, перечислю основные пункты.
Для работы надо три вещи — jQuery (естественно, так как nivo slider — это плагин к нему). При этом, хватает «штатной» версии jquery, которая встроена в drupal 6 (jquery v1.2.6). Вторая вещь — это сам плагин, текущая версия которого в оптимизированном состоянии занимает всего 12к (это к вопросу — сколько «весит»). Ну и последнее, что понадобится, но не в последнюю по важности очередь, это набор каскадных стилей для плагина (скачивается в комплекте с плагином, весит 2к).
Далее вам нужно, чтобы ваши картинки были перечислены в одном контейнере (как то так, как это приводит в своём примере разработчик):
|
1 2 3 4 5 6 7 8 |
<div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </div> </div> |
Здесь мы, правда, наблюдаем два облегающих контера (.slider-wrapper и .nivoSlider). Первый может служить для позиционирования, создания фоновой рамки и т.п., а второй уже является собственно тем контейнером, который содержит картинки и служит для создания анимации. Внутри него скрипт создаст дополнительные контейнеры и т.п.
Осталось только запустить скрипт. Можно сделать это так, используя параметры по умолчанию.
|
1 2 3 |
$(window).load(function() { $('#slider').nivoSlider(); }); |
Запуск прицеплен к окончанию загрузки данных окна браузера. А вот все возможные параметры запуска:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
$(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // набор можно задать так: 'fold,fade,sliceDown' /* а это полный список эффектов, все же их не 16, а только 15, т.к. random - это случайный выбор sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpDown sliceUpDownLeft fold fade random slideInRight slideInLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse */ slices: 15, // для анимации, использующей "нарезку" (slices) boxCols: 8, // для анимаций, использующих "ящики" - число столбцов boxRows: 4, // ... число строк animSpeed: 500, // время анимации смены картинок в мс pauseTime: 3000, // время демонстрации каждого слайда startSlide: 0, // номер слада, с которого начинается анимация directionNav: true, // показывать кнопки "следующий" и "предыдущий" controlNav: true, // 1,2,3... навигация (т.н. точечки) controlNavThumbs: false, // использовать пиктограммы для управления pauseOnHover: true, // останавливать анимацию при наведении курсора manualAdvance: false, // Force manual transitions prevText: 'Prev', // свой текст для кнопки "предыдущий" nextText: 'Next', // <code>свой текст для кнопки "следующий" randomStart: false, // Запуск анимации со случайно выбранного изображения //зацепки событий beforeChange: function(){}, // запускается до начала очередной анимации afterChange: function(){}, // <code>запускается после завершения очередной анимации slideshowEnd: function(){}, // запускается когда были показаны все слайды lastSlide: function(){}, // запускается когда был показан последний слайд afterLoad: function(){} // запускается после загрузки слайдера }); }); |
Не понятно чем отличаются обработчики — slideshowEnd и lastSlide. Остальное вполне очевидно.