Пуристы Web-технологий различают следующие подвиды этой технологии:

* AJAX – Asynchronous JavaScript and XML, асинхронный Javascript и XML. В ответ на запрос с клиента сервер отвечает правильно сфоримированным XML-документом.
* AJAH – Asynchronous JavaScript and HTML, асинхронный Javascript и HTML. В ответ на запрос с клиента сервер отвечает уже сгенерированным HTML-документом или его частью.
* AHAH – Asynchronous HTML and HTTP, асинхронный HTML и HTTP. То же самое, что и AJAH.
* AJAJ – JavaScript and JSON, асинхронный Javascript и JSON. В ответ на запрос с клиента сервер отвечает правильной записью объекта Javascript в формате JSON (http://json.org).

jQuery предлагает реализацию всех трех подвидов технологии AJAX и еще один, AJAJs – все те же и Javascript. Теперь обо всем этом подробнее.

Базовыми функциями для работы с AJAX являются post() и get() (есть еще более низкоуровневая, ajax(), но мы ее не будем рассматривать):

$.post(url[, params[, callback]])
$.get(url[, params[, callback]])

Здесь:

* url – адрес страницы, на которую будет отправлен запрос;
* params – параметры, передаваемые в запросе в виде пар «ключ : значение»;
* callback – функция, которая будет вызвана в случае успешного завершения вызова.

Пример:

$.post(
‘/ajaxtest.php’,
{
type: "test-request",
param1: "param1″,
param2: 2
},
onAjaxSuccess
);
function onAjaxSuccess(data)
{
// Здесь мы получаем данные, отправленные сервером
alert(data);
}

А что же на сервере? Вызов страницы при помощи технологии AJAX ничем не отличается от простого вызова страницы, например, путем открытия ее в браузере. То есть передаваемые параметры будут доступны на этой странице так же, как если бы они были переданы стандартными методами get или post. На сервере у нас может существовать, например, вот такой ajaxtest.php:

<?php
// Если страница вызвана с помощью .post(), переданные значения будут,
// как всегда, доступны в глобальной переменной $_POST
// Если страница вызвана с помощью .get, переданные значения будут,
// как всегда, доступны в глобальной переменной $_GET

echo ‘text’;
?>

После того как ajaxtest.php отработает, в функцию onAjaxSuccess на клиенте будет передан текст «text». Обратите внимание на HTTP_X_REQUESTED_WITH. Этот HTTP-заголовок устанавливается jQuery во время запросов с помощью AJAX. Это помогает узнать, тип поступившего запроса и соответственно обрабатывать данные. Во всем остальном запрос через Аякс ничем не отличается от обычного запроса страницы у сервера.
ПРИМЕЧАНИЕ

В различных библиотеках, особенно использующих шаблон MVC, часто необходимо знать, как была вызвана страница – открыли ее в браузере или запросили через AJAX? При запросе с помощью технологии AJAX устанавливается HTTP-заголовок HTTP_X_REQUESTED_WITH со значением “XmlHTTPRequest”. Таким образом, в РНР, например, можно узнать, вызвана ли страница с помощью AJAX так:

if($_SERVER['HTTP_X_REQUESTED_WITH'] == ‘XMLHttpRequest’)
{
// выполняем соответствующий код
}

Теперь рассмотрим, как работать с четырьмя подвидами AJAX.
AJAX

Если сервер на запрос возвращает заголовок Content-Type: text/xml и правильно сформированный XML-документ, то в функцию onAjaxSuccess будет передан уже готовый к употреблению DOM этого документа, с которым можно будет работать, используя методы jQuery. Пример:
ajaxtest2.php:

<?php
header("Content-Type: text/xml; charset=utf-8″);
?>
<list>
<item id="1″>
Item 1
</item>
<item id="2″>
Item 2
</item>
</list>

Наш JavaScript:

// Функцию post опускаем, написать ее не составляет труда
function onAjaxSuccess(xml)
{
// Получаем коллекцию всех элементов item из пришедшего xml
items = $("item", xml);

// Извлекаем текст из элемента
alert(item2.html());
}

Как видите, работа с полученным с сервера ответов в виде XML ничем не отличается от работы с уже загруженным в браузер документом.
AHAH

Как уже было видно в первом примере с методом post(), если значение заголовка Content-Type – не «text/xml», ответ с сервера передается как есть, в текстовом виде. Поскольку обычно такой ответ сразу показывается на странице без дополнительной обработки, то нет смысла заводить отдельные функции вроде onAjaxSuccess. Для получения и отображения полученного с сервера HTML jQuery предоставляет метод load:

load(url[, params[, callback]]);

Этот метод прикрепляется к любому элементу на странице, в котором планируется показать ответ с сервера. После выполнения запроса ответ с сервера автоматически запишется в соответствующий элемент:

$("#mydiv").load("/ajaxtest.php");

Мы выполняем запрос к файлу из первого примера про AJAX. После выполнения запроса в элемент с id="mydiv" будет записано слово «text».
AJAJ

Многие разработчики, столкнувшиеся с технологией AJAX, не любят передавать на клиент XML. Объясняется это тем, что XML может быть довольно большим по размеру, и существуют дополнительные трудности при разборе его структуры на клиенте. Благодаря jQuery, разбор XML на клиенте не представляет никакой сложности. А если разработчики активно используют AHAH, то и размеры передаваемого документа перестают быть решающим аргументом.

И все же многие предпочтут использовать JSON. JSON – это способ записи данных, который позволяет прогнать эту запись через функцию eval() и получить полноценный Javascript-объект. Для работы с данными в таком формате jQuery предлагает метод $.getJSON:

getJSON(url, params, callback)

После выполнения запроса ответ с сервера прогоняется через функцию eval(), а полученный объект передается в функцию callback:
ajaxtest3.php

<?php
header(‘Content-Type: text/javascript; charset=utf-8′);
?>
{
params: <?php echo $_REQUEST['params']; ?>,
response: ‘Наш ответ Чемберлену’
}

$.getJSON(
‘/ajaxtest3.php’,
{params: "text"},
onAjaxSuccess
);
function onAjaxSuccess(obj)
{
alert(obj.params);
alert(obj.response);
}

AJAJs

Помимо трех вышеперечисленных способов получения данных с сервера jQuery предлагает еще один. С его помощью можно загрузить и выполнить любой сценарий Javascript с сервера. Для этого используется метод getScript:

getScript(url[, callback])

Пример:
script.js

$("a").css("color", "#0F0″);

Наш Javascript:

$.getScript(‘/script.js’);

После выполнения этого метода будет загружен и выполнен сценарий script.js, который окрасит все ссылки на странице в зеленый цвет.

* show([speed[, callback]]) – показать элемент;
* hide([speed[, callback]]) – скрыть элемент;
* fadeIn(speed[, callback]) – показать элемент путем изменения его прозрачности;
* fadeOut(speed[, callback]) – скрыть элемент путем изменения его прозрачности;
* slideDown(speed, callback) – показать элемент, спустив его сверху;
* slideUp(speed, callback) – показать элемент, подняв его снизу;

где

speed – скорость в миллисекундах или одно из "slow" (600 миллисекунд) или "fast" (200 миллисекунд);

callback – функция, которая будет вызвана после выполнения анимации.

Рассмотрим, например, реализацию функции show:

show: function(speed,callback){
// находим в переданной нам коллекции скрытые элементы (см. врезку)
var hidden = this.filter(":hidden");
// если нам передана скорость, то вызываем метод animate
if(speed)
{
hidden.animate(
{
height: "show",
width: "show",
opacity: "show"
},
speed,
callback
)
}
else
{
// иначе просто проходим по коллекции элементов и показываем их,
// меняя стиль display с none на block
hidden.each(
function()
{
this.style.display = this.oldblock ? this.oldblock : "";
if ( jQuery.css(this,"display") == "none" )
this.style.display = "block";
}
);
}
return this;
}

Скрытая мощь функции animate позволяет создавать поистине удивительные эффекты.

Необходимо также заметить, что все эффекты библиотеки jQuery применяются к элементам не сразу, а по очереди. То есть, предположим, что мы написали такой код:

for(i = 0; i < 10; i++)
{
$("#my-div").animate({height: "show"}, 300);
$("#my-div").animate({height: "hide"}, 300);
}

В результате мы получим не беспорядочное моргание, пока двадцать эффектов борются за право показать/скрыть элемент «my-div», а плавный показ, потом сокрытие, потом снова показ – и так 20 раз. Обратите внимание, что очередь эффектов составляется поэлементно. То есть эффекты, примененные к разным элементам одновременно, будут выполняться одновременно.

* params – свойства, которые участвуют в анимации в виде пар {ключ: значение}. Например: {height: "show"} или {opacity: 50, width: 100, height: 200}.
* speed – скорость в миллисекундах.
* easing – замедлениие анимации (замедляется ли к концу, "easein", или, наоборот, ускоряется, "easeout". Дополнительные типы доступны в модулях расширения).
* callback – функция, которая будет вызвана после завершения анимации.

Пример.

Пусть у нас есть элемент div с каким-нибудь текстом. Мы хотим скрыть этот текст, заменить новым, и показать обновленный текст.

$("#mydiv")
.animate({height: "hide"}, 300)
.text("Новый текст")
.animate({height: "show"}, 300);

Сначала потребуется только подключить библиотеку jQuery и файл query.autocomplete.js в разделе HEAD нужной страницы.
<script type="text/javascript" src="js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>

Учтите, что файл jquery.autocomplete.js использует имена классов (начинаются с ac_), но если Вы захотите по каким-то причинам изменить эти имена – это тоже можно будет довольно легко сделать.

Что касается HTML-кода, то естественно нужно описать поле для ввода текста:
<input id="example" type="text" />

А вот использовать jquery.autocomplete.js можно двумя разными способами.

Способ первый:
Если объем данных не очень большой, и данные не будут изменяться, то их можно поместить непосредственно на странице, как и сделано в примере в текстовом поле слева.
<script type="text/javascript">
$(document).ready(function(){
$("#example").autocompleteArray([
"Магадан",
"Магас",
"Магнитогорск",
"Майкоп",
........
"Муром",
"Мценск",
"Мыски",
"Мытищи",
"Мышкин"
],
{
delay:10,
minChars:1,
matchSubset:1,
autoFill:true,
maxItemsToShow:10
}
);
});
</script>

Способ второй:
Если данные большого объема, и/или часто изменяются, то необходимо предусмотреть обработку этих данных на сервере (для примера выбран PHP). jquery.autocomplete.js предусматривает отправку GET-запроса с параметром q, значением которого являются введенные символы. Именно так в примере работает текстовое поле справа.
<script type="text/javascript">
$(document).ready(function(){
$("#example2″).autocomplete("autocomplete.php", {
delay:10,
minChars:2,
matchSubset:1,
autoFill:true,
matchContains:1,
cacheLength:10,
selectFirst:true,
formatItem:liFormat,
maxItemsToShow:10,
onItemSelect:selectItem
});
});
</script>

В этих примерах, помимо данных (в первом случае) и URL обработчика (во втором случае) мы передаем некоторые опции. Список опций приведен ниже:

autoFill – когда Вы начинаете вводить текст, в поле ввода будет подставлено (и выделено) первое подходящее значение из списка. Если Вы продолжаете вводить текст, в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного Вами текста. (По умолчанию: false).

inputClass – этот класс будет добавлен к элементу ввода. (По умолчанию: «ac_input»).

resultsClass – класс для UL, который будет содержать элементы результата (элементы LI). (По умолчанию: «ac_results»).

loadingClass – класс для элемента ввода, в то время, когда происходит обработка данных на сервере. (По умолчанию: «ac_loading»).

lineSeparator – символ, который разделяет строки в данных, возвращаемых сервером. (По умолчанию: «\n»).

cellSeparator – символ, который разделяет «ячейки» в строках данных, возвращаемых сервером. (По умолчанию: «|»).

minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирван запрос. (По умолчанию: 1).

delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши, активизируется запрос. Если используется локальный запрос (к данным, находящимся непосредственно в файле), задержку можно сильно уменьшить. Например до 40ms. (По умолчанию: 400).

cacheLength – число ответов от сервера, сохраняемых в кэше. Если установлено в 1 – кэширование данных отключено. Никогда не устанавливайте меньше единицы. (По умолчанию: 1).

matchSubset – использовать ли кэш для уточнения запросов. Использование этой опции может сильно снизить нагрузку на сервер и увеличить производительность. Не забудьте при этом еще и установить для cacheLength значение побольше. Например 10. (По умолчанию: 1).

matchCase – использовать ли сравнение чувствительное к регистру символов (только если Вы используете кэширование). (По умолчанию: 0).

maxItemsToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10. (По умолчанию: -1).

extraParams – дополнительные параметры, которые могут быть переданы на сервер. Если Вы напишете {page:4}, то строка запроса к обработчику на сервере будет сформирована следующим образом: my_handler.php?q=foo&page=4 (По умолчанию: {}).

width – устанавливает ширину выпадающего списка. По умолчанию ширина выпадающего списка определена шириной элемента ввода. Однако, если ширина элемента ввода небольшая, а строки выпадающего списка содержат большое количество символов – эта опция вполне может пригодиться. (По умолчанию: 0).

selectFirst – если установить в true, то по нажатию клавиши Tab или Enter будет выбрано то значение, которое в данный момент установлено в элементе ввода. Если же имеется выбранный вручную («подсвеченный») результат из выпадающего списка, то будет выбран именно он. (По умолчанию: false).

selectOnly – если установить в true и в выпадающем списке только одно значение, оно будет выбрано по нажатию клавиши Tab или Enter, даже если этот пункт не был выбран пользователем с помощью клавиатуры или указателя мыши. Заметьте, что эта опция отменяет действие опции selectFirst. (По умолчанию: false).

formatItem – JavaScript функция, которая поможет обеспечить дополнительную разметку элементов выпадающего списка. Функция будет вызываться для каждого элемента LI. Возвращаемые от сервера данные могут быть отображены в элементах LI выпадающего списка (см. второй пример). Принимает три параметра: строка результата, позиция строки в списке результатов, общее число элементов в списке результатов. (По умолчанию: none).

onItemSelect – JavaScript функция, которая будет вызвана, когда элемент списка выбран. Принимает единственный параметр – выбранный элемент LI. Выбранный элемент будет иметь дополнительный атрибут «extra», значением которого будет являться массив всех ячеек строки, которая была получена в качестве ответа от сервера. (По умолчанию: none).

Последние две опции весьма важны, если Вы хотите сделать действительно удобный и полезный элемент интерфейса, поэтому приведу примеры.
function liFormat (row, i, num) {
var result = row[0] + "<em>" +
row[1] + " тыс.чел.</em>";
return result;
}

В опции formatItem мы определили имя вызываемой функции – liFormat, а сама функция просто формирует строку, которая будет вставлена в соответствующий элемент LI. Строка содержит название поселка и элемент em, в который выводится количество проживающих там, в тысячах человек. Элемент em имеет класс qnt, с помощью которого, используя CSS, мы сдвигаем этот элемент вправо, немного уменьшаем размер шрифта и делаем сам шрифт зеленого цвета.

Следующий пример для опции onItemSelect:
function selectItem(li) {
if( li == null ) var sValue = "Ничего не выбрано!";
if( !!li.extra ) var sValue = li.extra[2];
else var sValue = li.selectValue;
alert("Выбрана запись с ID: " + sValue);
}

Здесь видно как можно работать со значениями атрибута «extra» выбранного элемента LI. В примере мы выводим в alert значение идентификатора для записи из нашей тестовой базы.

Нам осталось только разобрать те действия, которые будут выполняться на стороне сервера. Как Вы наверное помните, мы выбрали для этого PHP. Вспомним также, что на сервер передается GET-запрос с параметром q, содержащим уже введенные пользователем символы. Сам код Вы сможете посмотреть, скачав файл примера.

Весь код мы будем выполнять только в случае существования XMLHttpRequest, только если передан GET-запрос с параметром q. Для примера используется текстовый файл, в котором содержится база данных. Вот фрагмент этого файла:
1:Пашковский:Краснодарский край:43,0
2:Горячеводский:Ставропольский край:34,4
3:Калинино:Краснодарский край:34,1
4:Приволжский:Саратовская область:32,0
. . . . . . . . . . . . . . . . . . .
268:Залари:Иркутская область:10,0
269:Октябрьский:Пермский край:10,0
270:Ишеевка:Ульяновская область:10,0
271:Жешарт:Республика Коми:10,0
272:Прохоровка:Белгородская область:10,0

Мы читаем этот файл в массив, а затем в цикле перебираем все строки, в свою очередь разбивая каждую из них в массив, к элементу под номером один (название поселка) которого обращаемся для поиска соответствия с переданным GET-запросом. Если соответствие будет найдена выводим информацию, правда в несколько ином порядке, чем она хранилась в файле.

Такой подход выбран во-первых, потому что это пример, который должен быть очень просто воспроизведен на любом другом сайте, и во-вторых, чтобы при очень небольшом объеме данных дать почувствовать тот момент, когда запрос выполняется.

Вот собственно и все, обращу разве Ваше внимание на то, что для работы со строками использую мультибайтовые строковые функции.

Код пузыря и объекта, при наведении курсора на который будет появляться подсказка.

<div>
<div id="download">Наведи на меня курсор</div>
<table style="opacity: 0; top: -50px; left: -33px; display: none;" id="dpop">
<tbody><tr>
<td id="topleft"></td>
<td></td>
<td id="topright"></td>
</tr>

<tr>
<td id="bottomleft"></td>
<td><img alt="popup tail" src="files/bubble-tail2.png" height="29″ width="30″ /></td>
<td id="bottomright"></td>
</tr>
</tbody></table>
</div>

CSS

Теперь прописываем стили всем элементам, при этом делаем так, чтобы при отключенных скриптах ничего не плыло:

.bubbleInfo {
position: relative;
top: 150px;
left: 100px;
width: 500px;
}
.trigger {
position: absolute;
}

jQuery

Теперь сам код, который реализовывает эту прикольную анимацию.

return false;
});
});
});

Fancy Box

Скрипт представляет собой плагин к jQuery.
Возможности:

* Подгоняет размеры изображений под разрешение монитора;
* Пририсовывает тень к всплывающему окошку;
* Поддерживает возможность группирования объектов и их просмотр в виде галереи в одном окне;
* Выведет для вас не только изображения, но и inline-элементы, а также HTML-контен в iframe;
* Конечно же, все это благолепие можно конфигурировать, а также экспериментировать с CSS.

Теперь о размерах, а точнее, весе скрипта (вопрос немаловажный):

* непосредственно jquery.fancybox-1.0.0.js – 12 Кб
* сам jQery (jquery-1.2.3.pack.js) – 29,1 Кб
* дополнительный скриптик jquery.pngFix.pack.js – 2,52 Кб
* CSS – около 4 Кб
* изображения – 17 Кб

Подключение и использование скрипта не представляет никакой сложности:
1. Сначала подключаем скрипты и CSS:

/* обязательно */
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>

/* цепляем CSS */
<link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen">

2. Берем подопытную картинку:

<a href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

примечание: можете использовать атрибут title для отображения подписи к изображению, а также rel – для группировки обектов.
Заключаем картинку в какое-нибудь оформление (p, div, span – без разницы) с определенным ID. Например, так:

<p id="”test1”"><a href="image_big.jpg"><img src="image_small.jpg" alt="" /></a></p>

3. Инициализируем плагин:

$(document).ready(function() {
$("p#test1 a").fancybox();
});

Готово. В данном случае по щелчку на изображение появится всплывающее окошко с оригиналом изображения. Все параметры окна будут по умолчанию Но вы можете использовать дополнительные опции при вызове плагина, например:

$(document).ready(function() {
$("p#test2 a").fancybox({
‘hideOnContentClick’: true
});
});

Параметр ‘hideOnContentClick’: true  — делает возможным закрытие всплывающего окна не только по нажатию на специальную кнопку, но и по щелчку на свободной области.
Со всеми возможными настройками можете ознакомиться на официальном сайте плагина, где также можно скачать архив и полюбоваться на примеры работы скрипта .

Бывают ситуации когда необходимо иметь полный контроль на внешним видом скроллбара. Например если дизайнер сделал элемент со специфической полосой прокрутки.

Для решения этой проблемы нам на помощь приходит Javascript со своими возможностями. Используя jQuery плагин jScrollPane, можно легко настроить внешний вид полосы прокрути по своему вкусу.

HTML разметка включает всего один внешний контейнер. Контейнер с id="scroll-wrap" в данном случае необходим лишь для позиционирования.

<body>
    <div class="scroll-wrap">
        <div class="scroll-pane">
            ....
        </div>
    </div>
</body>

CSS:

.scroll-wrap{
    width: 300px;
    margin: 40px auto;
    background: #F7F1E5
}
.scroll-pane{
    width: 290px;
    height: 200px;
    padding: 0 0 0 10px;
    overflow: hidden
}
a.jScrollArrowUp{
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    background:url(images/but.gif) no-repeat center top;
    height:18px;
}
a.jScrollArrowDown {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
    text-indent: -2000px;
    overflow: hidden;
    background:url(images/but.gif) no-repeat center top;
    height:18px;
}
.jScrollPaneDrag {
    position: absolute;
    cursor: pointer;
    overflow: hidden;
    background:url(images/drag.gif) no-repeat left top;
    height:42px
}

Далее необходимо подключить следующие файлы в секцию head:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jScrollPane.js"></script>
<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="jScrollPane.css" />

Файл jquery.mousewheel.min.js необходим в том случае, если необходимо прокручивание содержимого колесом мыши.

и небольшой javascript:

$(function()
{
$('.scroll-pane').jScrollPane({showArrows:true,scrollbarWidth:19,dragMaxHeight:43});
});

Параметр showArrows отвечает за отображение кнопок прокрутки, scrollbarWidth отвечает за ширину полосы, а dragMaxHeight за максимальную высоту перетаскиваемой панели.

Удобство и доступность

Лишая скроллбар его естественного вида, вы рискуете тем, что пользователи не смогут распознать в новом дизайне, элемент, которым они привыкли пользоваться. Вы должны быть уверены, что новый вид ассоциируется именно с полосой прокрутки.

Элемент DatePicker из известной библиотеки интерфейсных элементов jQuery UI. Множество полезных функций, а главное – локализация для многих языков!

jMonthCalendar

jMonthCalendar полный календарь на месяц, который поддерживает управление через события, что очень важно для разработчиков.
Вы просто инициализируете этот календарь с определенными параметрами и с массивом событий, все остальное плагин делает сам!
Плагин позволяет разработчику отслеживать такие события, как click, когда пользователь только собирается изменить месяц, а также событие после завершения
смены месяца. Поддерживает события перемещения мыши на объектами календаря и т.д.

jQuery date picker plug-in

Это абсолютно надежный плагин позволяет очень просто добавить ввод даты на вашем сайте.

jQuery Calendar Widget Plugin

Очень простенький виджет для отображения календаря на месяц на вашем сайте.
Вы можете указать, какой именно месяц надо отображать, либо задать автоматическое отображение текущего месяца.
Это плагин содержит всего 100 строчек кода, но весьма функционален.

jCal – slick jquery datapicker plugin

Замечательный анимированный календарь для выбора даты с отображением календаря по месяцам. Позволяет отображать несколько месяцев подряд, а пользователю – выбирать несколько последовательных дней.
Он просто незаменим в системах резервирования билетов, заказа гостиницы, выбора туристического тура и т.д.

dyndatetime

Этот календарь поддерживает не только дату, но и время, позволяет настраивать режим отображения.

Date Picker – jQuery plugin

Это компонент, также написанный на jQuery, легко встраивается в любое web-приложение и имеет множество параметров настройки.

Date Range Picker

Еще одно решение для выбора дат, точнее диапазона дат, основанное на библиотеке на основе jQuery от Filament Group Inc.

simple jQuery date-picker plugin

Очень интересный календарь для выбора даты, созданный Ted Devito, пока в бэтта версии

Date Input

Date Input – без излишних изяществ, простой, но быстрый плагин, написанный на jQuery

Нам понадобится библиотека jQuery, конечно же сам плагин jquery.lightbox.js, файл стилевого оформления, несколько картинок (вперед, назад, загрузка…) и фотографии для Вашей галереи, представленные в двух вариантах: миниатюра и полноразмерное изображение.

jquery.lightbox.js можно скачать на сайте автора

Для начала подключим в разделе HEAD нашей HTML-страницы нужные файлы, конечно же соблюдая пути к ним (у Вас они могут отличаться):

Затем займемся размещением в теле HTML-страницы миниатюр. Тут простор для творчества – размещайте как, где и сколько хотите миниатюр. Вот например:

Довольно просто: мы разместили миниатюры в списке (Вы можете избрать другой вариант). Самое главное здесь не список, а то, что мы заключили картинку-миниатюру в тэг А, который ссылается на полноразмерное изображение и имеет атрибут rel со значением lightbox-tour. Вот это действительно важно. Собственно Вы могли бы задать значение lightbox-petya или lightbox-1 для всех фотографий галереи. Здесь важно присутствие ключевого слова lightbox, а разные «окончания» всего лишь идентификатор одной группы фотографий – ведь Вы можете разместить на странице и несколько независимых наборов, которые могут включать в себя от 1 до N (сколько влезет) фотографий. И еще – содержимое атрибута title – это описание, прилагаемое при просмотре к полноразмерной фотографии.

Это самый простой и легкий способ использования плагина jQuery LightBox. Есть и еще один, более гибкий способ. Посмотрите код, приведенный ниже. В jQuery-селекторе мы отбираем все элементы А, которые нас интересуют. Но преимущество этого способа даже не в этом, а в том, что тут можно использовать кое-какие опции, которые мы разберем ниже…

Набор опций передается в $.Lightbox.construct({});. В общем-то все опции имеют говорящие названия, но раз обещал их пояснить…
speed – скорость перехода от одной картинки к другой, указывается в миллисекундах.
show_linkback – показывать или не показывать ссылку при просмотре. Принимает значения true/false. По умолчанию true – показывать.
opacity – прозрачность общего фона при просмотре. Изменяется от 0 до 1. По умолчанию установлено 0.9.
keys – тут можно определить клавиши управления при просмотре. Принимает набор из пар ключ/значение. close – ясное дело закрыть, prev – предыдущая картинка, next – следующая. По умолчанию close:c, prev:p, next:n.
text – тут уж совсем пояснять нечего. Просто посмотрите пример…

Я привел не все опции – остальные Вы сможете обнаружить, если откроете файл jquery.lightbox.js и найдете строки 455 – 520.

Что еще можно натворить с jQuery LightBox, чтобы Ваш экземпляр немного отличался от своих собратьев? Пожалуй немного поковырять стилевое оформление в файле lightbox.css. Ну например, чтобы изменить цвет фона с установленного по умолчанию черного на какой-нибудь зеленый, найдите #lightbox-overlay и поменяйте background-color:#0000; на background-color:#00ff00; и так далее…