www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Карусель изображений jQuery Waterwheel
Один из интересных и красочных плагинов к бесплатной библиотеке скриптов jQuery - карусель изображений jQuery Waterwheel (Водяное колесо). Разработчик - Брайен Осборн (Brian Osborne), веб программист из университета Rowan University в штате Нью Джерси, США. Первую версию jQuery Waterwheel он создал в феврале 2009 года, затем постоянно её обновлял, добавляя новые функции, и к настоящему моменту (на май 2013 года) предлагает уже версию V.2.3.0. Пример использования этого плагина для шапки сайта рекомендую посмотреть на официальном сайте университета, где работает Брайен Осборн.
Установка карусели изображений jQuery Waterwheel
Для описания установки этого плагина на сайт будем использовать простой вариант такой карусели, показанный на рисунке (пример, как всегда, действующий):
Сначала создадим на сайте новую папку, назвав её carousel, затем скачиваем архив и распаковываем его в созданную папку. У нас получится в ней два скрипта jquery-1.8.3.min.js, и jquery.waterwheelCarousel.js.
Далее необходимо добавить в заголовок страницы с будущей каруселью внутрь тега <head>...</head> следующие строчки, указывающие пути к нашим новым файлам, и небольшой JavaScript для инициализации jQuery Waterwheel:
<script type="text/javascript" src="carousel/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="carousel/jquery.waterwheelCarousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#carousel").waterwheelCarousel();
});
</script>
<style type="text/css">
#carousel {
width:100%;
height:140px;
position:relative;
}
#carousel img {
display: hidden; /* скрывать картинки, пока галерея не загрузилась */
cursor: auto; /* pointer - если картинки являются ссылками */
}
</style>
Как видим, здесь есть и небольшое правило CSS, определяющее параметры области карусели изображений.
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
Необходимые изображения размещаем последовательно на странице в любом контейнере, указав для него id="carousel". В частности, для нашего примера - это тег абзаца <p align="center" id="carousel">. Естественно, любое изображение может являться ссылкой, если это необходимо.
После этого вы уже можете посмотреть созданную карусель, открыв страницу в браузере. Скорее всего, вас не устроит её функциональность, назначенная по умолчанию. Чтобы процесс установки стал хоть немного творческим, добавим возможность регулировки параметров.
Настройка параметров карусели изображений jQuery Waterwheel
Если вы немного знакомы с программированием на JavaScript, то легко найдете все настраиваемые параметры (функции) карусели в файле jquery.waterwheelCarousel.js, открыв его в редакторе или в Блокноте. Перечень параметров находится в самом конце файла и снабжен комментариями на русском языке. Изменяя их значения и просматривая результат в браузере, вы можете настроить карусель jQuery Waterwheel в соответствие с дизайном вашего сайта.
Если же вы не хотите связываться со скриптами, то просто замените исходный JavaScript, размещенный при установке в заголовке страницы, на новый. В нем можно "легким движением руки" менять основные настройки карусели:
<script type="text/javascript">
$(document).ready(function() {
$("#carousel").waterwheelCarousel({
startingItem: 1, // номер изображения в центре при открытии галереи
separation: 160, // расстояние между изображениями карусели
separationMultiplier: 0.7, // коэффициент изменения расстояния для дальних от центра картинок
horizonOffset: 0, // расхождение крайних изображений по вертикали
horizonOffsetMultiplier: 1, // перекрытие крайних изображений по вертикали
sizeMultiplier: 0.7, // размер изображений по краям
opacityMultiplier: 0.7, // прозрачность изображений по краям
horizon: 0, // выравнивание изображений по вертикали. О для авто
flankingItems: 2, // количество изображений, выводимых по обе стороны от главного
// анимация
speed: 1000, // скорость ротации изображений в миллисекундах
animationEasing: 'linear', // эффекты анимации
quickerForFurther: true, // true - ускорение движения в центр при клике по боковым картинкам
// misc
linkHandling: 2, // 0 - переход кликом по ссылке c любого изображения, 1 - запрет перехода, 2 - переход кликом по ссылке только c центрального изображения
autoPlay: 1000, // время в миллисекундах между ротацией, 0 - только по клику, oтрицательное значение - смена направления ротации
orientation: 'horizontal', // расположение карусели 'horizontal' или 'vertical'
imageNav: true, // клик по любому изображению перемещает его в центр
// preloader
preloadImages: false, // предварительная подготовка изображений да/нет
forcedImageWidth: 0, // выравнивание ширины
forcedImageHeight: 0, // выравнивание высоты
});
});
</script>
Здесь все основные пункты настроек карусели изображений jQuery Waterwheel также снабжены комментариями на русском языке, и вы можете экспериментировать, сколько душа пожелает. Показанные настройки соответствуют нашему примеру в начале статьи. Этот способ настройки карусели позволяет устанавливать разные параметры для каждой страницы.
О других программах создания каруселей изображения, фотогалерей и слайд-шоу на сайте смотрите в статьях о jQuery.
13.05.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru