Анимация смены картинок с помощью 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. Остальное вполне очевидно.

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

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

Отправка HTML писем из Drupal 7

Август 27, 2015 г.

В семерке поменяли кое что в плане отправки писем, и то что работало в 6ке, в 7ке уже «не катит». Разберем два аспекта отправки писем: HTML формат ...

Читать

jQuery плагин для ввода диапазона значений

Февраль 22, 2017 г.

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

Читать

 

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

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



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