Анимация смены картинок с помощью jquery

Ещё одна типовая задача, для которой найдено приличное решение. Типично суть задачи состоит в следующем. Есть набор изображений, которые демонстрируются поочередно в некотором контейнере. Ставится задача по анимации периодической смены этих картинок средствами javascript.

Самая простая реализация — это управление стилем display. Сложные варианты включают в себя последовательное изменение позиции изображения, смена стилей прозрачности и т.п. Венчает весь этот список самоделок варианты с использованием плагина для jquery — nivo slider. Не будем рассматривать промежуточные варианты, сразу перейдем к вершине.

Nivo Slider

Итак, у нас есть библиотека со спец-эффектами. Возникает множество вопросов — пределы её применения, совместимость с браузерами, что она может, как её использовать и сколько она «весит»? У меня нет задачи провести какие то масштабные тесты, тем более демонстрация возможностей и описание пределов применения, её совместимость — все это описано на сайте разработчика. Мне хотелось бы просто познакомить вас с этой замечательной (по моему мнению) библиотекой-плагином.

Так что же она может?

Она позволяет реализовать несколько типовых задач:

  1. Анимация смены изображений. В текущий момент доступен набор из 16-ти эффектов.
  2. Реализация управления слайдером. К плагину прилагается несколько готовых тем для стрелочек и «точечек», которыми можно листать картинки или переходить от картинки к картинке в произвольном порядке.
  3. Цикл смены изображений. Все упаковано в одну функцию. Нужно только перечислить картинки в контейнере, подключить плагин, доп. файл со стилями плагина и сделать всего один вызов ф-ции в javascript для начала анимации.

Как подключить этот плагин?

На странице разработчика nivo.dev7studios.com/support/jquery-plugin-usage было подробное описание. Несмотря на то что оно «подробное», занимает оно всего пару страниц. Для тех, кто с английским не в ладах, перечислю основные пункты.

Для работы надо три вещи — jQuery (естественно, так как nivo slider — это плагин к нему). При этом, хватает «штатной» версии jquery, которая встроена в drupal 6 (jquery v1.2.6). Вторая вещь — это сам плагин, текущая версия которого в оптимизированном состоянии занимает всего 12к (это к вопросу — сколько «весит»). Ну и последнее, что понадобится, но не в последнюю по важности очередь, это набор каскадных стилей для плагина (скачивается в комплекте с плагином, весит 2к).

Далее вам нужно, чтобы ваши картинки были перечислены в одном контейнере (как то так, как это приводит в своём примере разработчик):

Здесь мы, правда, наблюдаем два облегающих контера (.slider-wrapper и .nivoSlider). Первый может служить для позиционирования, создания фоновой рамки и т.п., а второй уже является собственно тем контейнером, который содержит картинки и служит для создания анимации. Внутри него скрипт создаст дополнительные контейнеры и т.п.

Осталось только запустить скрипт. Можно сделать это так, используя параметры по умолчанию.

Запуск прицеплен к окончанию загрузки данных окна браузера. А вот все возможные параметры запуска:

Не понятно чем отличаются обработчики — slideshowEnd и lastSlide. Остальное вполне очевидно.

Написать комментарий

Мало букафф? Читайте есчо !

Делаем эффект параллакса для заднего фона на сайте

Октябрь 19, 2015 г.

Очень простая мулька, но выглядит при соответствующем фоне потрясающе. Сделаем так, чтобы при скроллинге страницы, фон двигался вдвое медленнее, создавая что то вроде эффекта параллакса. Этот кусочек скрипта привязывает нас к событию onscroll окна. ...

Читать

Вставляем объект views в нужное место шаблона средствами PHP

Сентябрь 9, 2016 г.

Мощный, всепоглощающий, великий и ужасный модуль VIEWS. Очень коварный, он толкает программиста с пути "только хардкор" и разработки на PHP на скользкую ...

Читать

 

Комментарии к «Анимация смены картинок с помощью jquery»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: