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

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

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

Программно устанавливаем значения настроек на страницах, созданных Config Pages

Ноябрь 22, 2018 г.

Модуль Config Pages позволяет создавать страницы конфигурации для вашего модуля, всего сайта, или может быть просто одного из разделов сайта. Потом эти значения можно читать из программы и использовать так, как вам требуется. Но API Config Pages не содержит ...

Читать

Грузим картинку в поле image в Drupal

Март 1, 2016 г.

Из кода программы на PHP мы попытаемся загрузить картинку в публикацию сайта на Drupal 7. Здесь описана логика и показан код всех операций. Постановка задачи Эта задача является частью задачи импорта статьи, извлеченной из HTML кода веб-страницы ...

Читать

 

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

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



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