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

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

Переадресация на основной домен в Drupal

Июль 17, 2023 г.

Данный подход скорее полезен как демонстрация инструментария, чем действительно реализация редиректа на основной домен. Потому что лучше это делать средствами сервера, а не ПО, чтобы уменьшить нагрузку на сервер. Drupal 8 работает на базе симфонии, ...

Читать

Error: Class 'Aws\S3\StreamWrapper' not found (Drupal 7)

Август 29, 2022 г.

При обновлении модуля s3fs с ветки 7.x-2.x -> 7.x->3.x друпалу не удаётся найти указанный класс. Все необходимые шаги по апгрейду сделаны, как описано в readme.txt модуля. Это проблема инициализации библиотеки awssdk в s3fs_libraries_info(). Drupal ...

Читать

Подключаем yandex cloud как s3 в Drupal

Апрель 3, 2025 г.

Облачные файловые хранилища Яндекса можно подключить и использовать в вашем проекте на drupal через модуль s3fs. А именно, хранить там т.н. юзерфайлы, ...

Читать

Когда jQuery.find может не работать

Декабрь 8, 2012 г.

Обычно, "проблема" возникает с данными, получаемыми через асинхронные запросы (ajax-запрос). Вы пытаетесь выполнить jQuery.find() для полученных данных, а функция возвращает пустой объект. В примере ниже, мы пытаемся извлечь содержимое HTML контейнера ...

Читать
 

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

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



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