www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Вебдизайн с jQuery - это очень просто!
• Фотогалерея jQuery - просто и красиво!
• Фотогалерея jQuery со слайд-шоу
• Фотогалерея для интернет магазина
• Фотогалерея prettyPhoto
• Фотогалерея Fancybox
• Карусель изображений jQuery Waterwheel
• Простая карусель JCarouselLite
• Календарь в форме обратной связи
• Создание простого анимированного меню
• Создание слайд-шоу для сайта
• Zoomy - лупа для просмотра изображений
• Увеличение изображений. Плагин Nivo Zoom
>> смотреть все статьи о jQuery
Простая карусель изображений JCarouselLite
Плагин прокрутки слайдов JCarouselLite, построенный на основе бесплатной библиотеки скриптов jQuery, - простой и довольно популярный среди разработчиков сайтов вариант карусели изображений. Разработчик - Генеши Марваха (Ganeshji Marwaha), программист из небольшого городка Нашуа (Nashua) в штате Нью-Гэмпшир, США.
JCarouselLite имеет оптимальное количество настроек, обеспечивающих быструю и удобную адаптацию под любой дизайн сайта, и корректно работает в большинстве браузеров, включая ИЕ6 (must die!). Пример работы этой карусели показан на рисунке:
|
|
Управлять перемещением картинок можно кнопками вперед/назад или прокруткой колесом мыши. Есть и автопрокрутка, интервал которой можно менять или отменить совсем в настройках. Все изображения могут быть ссылками. В данном примере - это два изображения из четырех, а ссылки открываются в небольшом окне по клику. Кстати, если вы хотите делать изображения карусели ссылками, то делайте это для всех картинок, так как угадать, какое из изображений является ссылкой, можно только по изменению формы курсора. Для этого приходится прокручивать все изображения, кликая по стрелкам вперед/назад или колесом мыши. На нашем примере видно, что такой поиск картинок-ссылок неудобен.
Установка карусели изображений JCarouselLite
Сначала скачиваем архив. Затем, чтобы избежать путаницы, создадим на сайте новую папку, назвав её jcarousellite, и распакуем в неё скачанный архив. У нас получится папка с тремя скриптами jquery-1.8.3.min.js, jCarouselLite.js и jquery.mousewheel.min.js.
Далее необходимо добавить в заголовок страницы с будущей каруселью внутрь тега <head>...</head> следующие строчки, указывающие пути к новым файлам, и небольшой JavaScript для инициализации и настройки JCarouselLite. Кроме того, добавим несколько правил CSS для нашего конкретного варианта карусели. Естественно, вы можете устанавливать свои в соответствие с дизайном сайта.
<script type="text/javascript" src="jcarousellite/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jcarousellite/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jcarousellite/jCarouselLite.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".gallery").jCarouselLite({
btnNext: ".next", // класс кнопки перехода вперед, null для отключения
btnPrev: ".prev", // класс кнопки перехода назад, null для отключения
mouseWheel: true, //если false, то галерея не будет прокручиваться колесом мыши
auto: 4000, //шаг автопрокрутки в миллисекундах, null для отключения
speed: 400, //скорость прокрутки в миллисекундах
vertical: false, //если true, то галерея будет располагаться вертикально
circular: true, //true - прокрутка по кругу, false - только до последнего изображения
visible: 3, //количество видимых картинок
start: 0, //с какого элемента начинается галерея (первый элемент имеет значение 0)
scroll: 1 //количество элементов, которые одновременно прокручиваются при щелчке по кнопке
});
});
</script>
<style type="text/css">
#button {
float:left;
margin:50px 10px 0 10px; /* отступы для кнопок */
}
.gallery {
float:left;
background-color:#FFCC99;
border:solid thin #FF9933;
}
.gallery li{
margin: 3px; /* пробел вокруг изображений */
}
</style>
Теперь размещаем на странице сайта необходимые изображения, поместив их в тег <div class="gallery"> как элементы неупорядоченого списка. Если вам не требуются кнопки навигации и ссылки с картинок, то HTML-код получается таким:
<div class="gallery">
<ul>
<li><img src="images01.jpg" alt="" width="150" height="100" /></li>
<li><img src="images02.jpg" alt="" width="150" height="100" /></li>
<li><img src="images03.jpg" alt="" width="150" height="100" /></li>
<li><img src="images04.jpg" alt="" width="150" height="100" /></li>
</ul>
</div>
Для нашего варианта с кнопками прокрутки вперед/назад по бокам карусели и с двумя картинками-ссылками, открывающимися в отдельном окне (размер 480х335 в левом верхнем углу экрана), HTML-код будет немного посложнее :
<button class="next" id="button" ><<</button>
<div class="gallery">
<ul>
<li><a href="javascript:" title="Дома и дачи" onclick="window.open('images01_big.jpg','','width=480, height=335, left=0, top=0'); return true;"><img src="images01.jpg" alt="Дома и дачи" width="150" height="100" /></a></li>
<li><a href="javascript:" title="Дома и дачи" onclick="window.open('images02_big.jpg','','width=480, height=335, left=0, top=0'); return true;"><img src="images02.jpg" alt="Дома и дачи" width="150" height="100" /></a></li>
<li><img src="images03.jpg" alt="Дома и дачи" width="150" height="100" /></li>
<li><img src="images04.jpg" alt="Дома и дачи" width="150" height="100" /></li>
</ul>
</div>
<button class="prev" id="button">>></button>
На этом установка карусели закончена, и вы можете посмотреть свое творение, открыв страницу в браузере.
Настройка параметров карусели изображений JCarouselLite
Для простоты настройки карусели JCarouselLite основные параметры можно изменять в размещенном вверху JavaScript. Комментарии переведены на русский язык и не требуют, на мой взгляд, пояснений. Как всегда, лучше самим поиграть с установками и посмотреть результат. Заданные в скрипте настройки соответствуют нашему примеру в начале статьи.
Полный перечень доступных настроек с подробным описанием можно посмотреть в файле jCarouselLite.js, открыв его в любом редакторе или Блокноте. Естественно, самые любопытные могут изменять их на свой вкус и цвет.
В нашем примере для кнопок прокрутки использованы простейшие символы стрелок "<<... >>", но, конечно же, можно применить для этого любые изображения, поместив их на кнопку, или вообще отказаться от тега кнопок <button> и создать свой рисунок. Например, привожу один из вариантов левой кнопки для нашей галереи и её HTML-код:
<button><img src="images/city.png" width="22" height="22" hspace="3" border="0" align="left" /><strong><<</strong></button>
Если же вы хотите заменить стандартную кнопку другим изображением, то используйте вместо тега <button> другой, например, <div> с соответствующим классом (class) и идентификатором (id), в котором задайте нужные вам параметры.
Подробнее о создании различных кнопок смотрите в статье "Создание кнопок в форме обратной связи".
Важное замечание: если на вашем сайте используется несколько плагинов jQuery, то удобнее перенести файл jquery.js (желательно последней версии) в корневую папку, чтобы не загружать его несколько раз. В этом случае, строка обращения к нему будет выглядеть одинаково для всех плагинов. В частности, для нашего примера получается так:
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
Не рекомендуется использовать на одной странице несколько разных версий jQuery, чтобы они не конфликтовали друг с другом. При этом обязательно проверяйте работу плагинов с установленной версией jQuery, так как не все версии взаимозаменяемы.
О других программах создания каруселей изображения, фотогалерей и слайд-шоу на сайте смотрите в статьях о jQuery.
15.05.2013 г.
Copyright © 2008 - Марк Розенталь e-mail:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru