1. Плагин для создания небольшой, но симпатичной слайдшоу-галлереи
Для работы с данным плагином нам требуется создать следующую файловую структуру:
- директория «css» для стиля (style.css)
- директория «icons», где будут располагаться значки управляющих элементов
- директория «images» с поддиректорией «thumbs». В «images» мы разместим оригиналы изображений, а в «thumbs» – их уменьшенные копии
Теперь давайте посмотрим на демонстрацию работы галереи, чтобы представлять, что у нас должно получиться в конечном итоге: или
Приступим к созданию 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' } Загрузить плагин
Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для blogger.com
Сообщения
