1. Плагин для создания небольшой, но симпатичной слайдшоу-галлереи

Для работы с данным плагином нам требуется создать следующую файловую структуру:

  • директория “css” для стиля (style.css)
  • директория “icons”, где будут располагаться значки управляющих элементов
  • директория “images” с поддиректорией “thumbs”. В “images” мы разместим оригиналы изображений, а в “thumbs” – их уменьшенные копии

Теперь давайте посмотрим на демонстрацию работы галереи, чтобы представлять, что у нас должно получиться в конечном итоге: перейти к demo-странице или скачать исходный код примера

Приступим к созданию HTML-разметки.

ВАЖНО! Аттрибут “alt” превью изображений содержит адрес оригинальной картинки.

Далее, нам необходимо подключить CSS-стиль и непосредственно сам скрипт, который создадут для нас небольшое медийное чудо). Листинг оформления и JS-функций приводить здесь не буду, так как букв много и они все есть в архиве с исходным кодом

Пожалуй, лишь опишу основные параметры JS, которые можно изменить на своё усмотрение: 

/**
* interval : интервал времени при смене изображений
* playtime : таймаут для функции setInterval
* current  : номер изображения, которое будет показано первым (по-умолчанию)
* current_thumb : индекс текущего контейнера с превьюшками
* nmb_thumb_wrappers : сколько всего контейнеров с превьюшками
* nmb_images_wrapper : количество изображений в каждом контейнере
*/
var interval			= 4000;
var playtime;
var current 			= 2;
var current_thumb 		= 2;
var nmb_thumb_wrappers	= $('#msg_thumbs .msg_thumb_wrapper').length;
var nmb_images_wrapper  = 6;

Пожалуй, это всё, что необходимо знать о данном плагине. Скачайте исходный код и посмотрите всё вживую. Думаю, проблем с интеграцией ни у кого не возникнет. А если возникнут – велкам в комменты).


2. Magnify

С помощью данного плагина можно показывать части изображений в увеличенном виде. Как это выглядит. Таким образом, для работы нам требуются только: сам плагин, большое изображение и его уменьшенная (пропорционально) копия.

Плагин протестирован на:

  • Windows: IE6, IE7, FF2, Safari 3.1
  • Mac: FF2, Safari 3.1

HTML-разметка:

Инициализация плагина:

$("#d1").magnify();

Параметры:

  • lensWidth – ширина области “лупы” (тип: число; по-умолчанию: 100);
  • lensHeight – высота области “лупы” (тип: число; по-умолчанию: 100);
  • showEvent – событие, по которому срабатывает увеличение (тип: строка; по-умолчанию: ‘mouseover’);
  • hideEvent – событие, по которому увеличение “пропадает” (тип: строка; по-умолчанию: ‘mouseout’);
  • stagePlacement - с какой стороны от превью будет отображаться контейнер с увеличенным изображением (тип: строка; по-умолчанию: ‘right’);
  • preload - если “true”, то большое изображение будет загружено вместе с загрузкой страницы; если “false” – оригинал начнет загружаться по событию, указанному в параметре “showEvent” (тип: логический; по-умолчанию: true);
  • loadingImage - путь к изображению-индикатору загрузки большой картинки. Если параметр оставить пустым, индикатором будет служить надпись “Loading…” поверх маленького изображения (тип: строка; по-умолчанию: пусто);
  • stageCss – CSS-стили для контейнера, в котором отображается большое изображение (тип: объект; по-умолчанию: пусто);
  • lensCss object – CSS-стили для области “линзы” (тип: объект; по-умолчанию: пусто);
  • onBeforeShow – функция, вызывающаяся до того, как будет показано увеличенное изображение (тип: функция; по-умолчанию: пусто);
  • onAfterShow – функция, вызывающаяся после того, как будет показано увеличенное изображение (тип: функция; по-умолчанию: пусто);
  • onBeforeHide – функция, вызывающаяся до того, как увеличенное изображение будет скрыто (тип: функция; по-умолчанию: пусто);
  • onAfterHide- функция, вызывающаяся после того, как увеличенное изображение будет скрыто (тип: функция; по-умолчанию: пусто);

Т.е. инициализация плагина может выглядеть так:

showEvent: 'click',
hideEvent: 'click',
lensWidth: 60,
lensHeight: 60,
preload: false,
stagePlacement: 'left',
loadingImage: 'pages/jquery/ajax-loader_gray.gif',
lensCss: { backgroundColor: '#cc0000',
border: '0px',
opacity: 0.5 },
stageCss: { border: '4px solid #33cc33' }

Загрузить плагин