В этом уроке мы рассмотрим виджет - "Скроллер изображений" на jQuery. Подобных виджетов существует немало, этот отличается тем, что прокрутка начинает происходить самостоятельно, после загрузки страницы, но направление прокрутки пользователь сможет задавать сам. Для начала предлагаю ознакомиться с демкой.

ПРИМЕР

Теперь, когда цель ясна, можно приступить.

Прежде всего подключаем jQuery и таблицу стилей. Далее в нужном месте создаем HTML-код скроллера

Code

Как мы видим виджет состоит из нескольких вложенных div-контейнеров и картинок, которые "завернуты" в ссылки.

CSS

Code

/* js-disabled class - устанавливает размер изображений, чтобы они все всписывались в виджет */
.js-disabled img { width:100px; height:100px; display:block; float:left; margin:30px 0 0; }
#outerContainer { width:542px; height:202px; margin:auto; position:relative; } /* контейнер виджета */
#imageScroller { width:542px; height:202px; position:relative; background:#000000 ; }
#viewer { width:522px; height:182px; overflow:hidden; margin:auto; position:relative; top:10px; }
#imageScroller a:active, #imageScroller a:visited { color:#000000; }
#imageScroller a img { border:0; }
#controls { width:534px; height:47px; background:#000; position:absolute; top:4px; left:4px; z-index:10} /* Плашка под кнопками */
#controls a { width:37px; height:35px; position:absolute; top:3px; }
#controls a:active, #controls a:visited { color:#0d0d0d; }
#title { color:#ffffff; font-family:arial; font-size:100%; font-weight:bold; width:100%; text-align:center; margin-top:10px; }/* Кнопка вправо */
#rtl { background:url(images/rtl.png) no-repeat; left:100px; }
#rtl:hover { background:url(images/rtl_over.png) no-repeat; left:99px; }
#ltr { background:url(images/ltr.png) no-repeat; right:100px; }/* Кнопка влево*/
#ltr:hover { background:url(images/ltr_over.png) no-repeat; }

Большая часть кода - это просто стилевое описание для красоты и наглядности. Важным здесь является #viewer - он скрывает изображения, которые еще не показаны, либо уже прошли. И еще один класс на котором мы заострим внимание - это класс js-disabled img. Он устанавливает принудительно размер картинок (в примере 100х100 px) при выключенном JS или при загрузке страницы , пока не прогрузится скрипт (действительно при размещении нашего скрипта не между <head>, а в конце страницы). Это нужно, чтобы картинки не выходили за пределы виджета. Если изображений будет больше, чем в примере, размеры и отступы в классе js-disabled img нужно будет подкорректировать.

Вдыхаем в виджет жизнь
Подключаем jQuery (версия 1.3 и выше, с более ранней работать не будет) и скрипт carousel.js. Сделать это можно либо после HTML-кода виджета или до (между тегами <head>). Весь код carousel.js приводить не буду (т.к. он достаточно большой и в плане настроек там почти ничего нет), рассмотрим часть кода, который меняет скорость передвижения:

Code

var duration = $(".wrapper").length * 3000;

Формула высчитывает продолжительность анимации, расчет идет от количество_картинок*3000 милисекунд. Таким образом, меняя параметр 3000 на любой другой, мы можем регулировать скорость анимации. Можно написать так:

Code

var duration = 3000;

Тогда продолжительность анимации не будет зависеть от количества картинок.

Вот и все. Удачи

Категория: скрипты для ucoz сайта | Просмотров: 603 | Добавил: andrew | Рейтинг: 0.0/0

Всего комментариев: 3

Порядок вывода комментариев:

3 Avdla (10.07.2009 22:11)

Блин берите пример с меня я создал пробный сайт!!! и точто работает то что не работает мне пофиг!!!! wink

а то что понравится себе на сайт закидываю!!!!

2 vlas715 (06.07.2009 08:23)

после установки, отказалась работать форма входа, не возможно зайти на сайт ни под каким пользователем либо админом, как при локальной авторизации так и при глобальной. Скрипт формы входа просто не обробатывается до конца. В итоге вход на сайт - болт. И Вашим посетителям тоже. angry

1 vlas715 (05.07.2009 20:36)

бомба вещь, "+". Вот тока не могу вдуплить какие ссылки нужно ставить чтоб работал переключатель направлений в файле carousel.js

Вот этот кусок кода:

//show controls
($("div#controls").length == 0) ? $("<div>").attr("id", "controls").appendTo("div#outerContainer").css({ opacity:0.7 }).slideDown("slow") : null ;
($("a#rtl").length == 0) ? $("<a>").attr({ id:"rtl", href:"#", title:"rtl" }).appendTo("#controls") : null ;
($("a#ltr").length == 0) ? $("<a>").attr({ id:"ltr", href:"#", title:"ltr" }).appendTo("#controls") : null ;

Подскажите плиз, а то выкидывает на начало страницы. sad sad sad

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]