Darken slideshow

version 1.1.0

© 2010 twix (http://www.twixed.ru/)

jquery.darken-1.1.zip - 42 kb archive, 20 kb js
jquery.darken-1.1.min.zip - 41 Kb archive, 14 kb js

Description

This plugin is a tool to view an images gallery in Picasa Photo Viewer style. Its features can be noted:

customizable image swap interval
hotkeys support (arrow left, arrow right, pgUp, pgDn, space, Enter, Escape)
ability to view panoramic images
reaction to resize of browser window

Описание

Этот плагин представляет собой инструмент для просмотра галереи изображений в стиле, схожим с Picasa Photo Viewer. Его особенностями можно отметить:

настраиваемый интервал смены изображений
поддержка горячих клавиш (arrow left, arrow right, pgUp, pgDn, space, Enter, Escape)
адаптированность к панорманым изображениям
наличие реакции на изменение размера окна браузера

Example | Пример

Changes in this version

+ full image view in new window
+ callback function
+ ability to remove loaded images from the document
+ keyboard usage hint
* UI have been redesigned
* fixed wrong image placement

Изменения в версии

+ просмотр полного изображения в новом окне
+ функция обратного вызова
+ возможность удаления загруженных изображений из документа
+ отображение подсказки по использованию кнопок
* заменены элементы оформления
* исправлено "уезжание" изображений в сторону

Setup

In order to use this plugin you need to include jQuery (version 1.4 or higher), plugin javascript and corresponding stylesheet (do not forget to edit images paths):

Установка

Для использования плагина необходимо подключить jQuery (версии не ниже 1.4), файл плагина и соответстующую таблицу стилей (не забываем подправить пути к изображениям):

                
                    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
                    <script type="text/javascript" src="js/jquery.darken-1.1.js"></script>
                    <link rel="stylesheet" type="text/css" href="css/darken.css" />

Initialization

Initialization can be done after loading the document, for example:

Инициализация

Инициализацию можно выполнить, например, после загрузки документа:

                
                    $(document).ready(function(){
                        $.darken({hook:"darken",imgTpl:"images/%id%",thumbTpl:"images/_thumb_%id%",imgHref:"images/%id%",title:"Click to start slideshow",interval:5,loaderSrc:"img/darken_loader.gif"},function(){alert('Callback function invoked!'););
                    });

Of course, you should prepare image tags for the plugin to work: Разумеется, необходимо подготовить тэги изображений для работы плагина:

                
                    <img id="img01.jpg" src="images/_thumb_img01.jpg" rel="darken" />
                    <img id="img02.jpg" src="images/_thumb_img02.jpg" rel="darken" />
                    <img id="img03.jpg" src="images/_thumb_img03.jpg" rel="darken" />

The plugin will only work with images that have corresponding attribute `rel`. An `id` attribute must contain the filename of the image that will be substituted in templates `imgTpl` and `thumbTpl`. Плагин будет работать только с изображениями, имеющими соответствующий атрибут `rel`. В атрибуте `id` необходимо указать имя файла изображения, которое будет подставлено в шаблоны `imgTpl` и `thumbTpl`.

Settings

During plugin initialization you can, or must specify options listed below

Настройка

При инициализации плагина можно, а как правило, и нужно указать настройки, которые перечислены ниже

option	default value	description
hook	`darken`	EN: `rel` attribute value for images plugin will work with RU: значение атрибута `rel` изображений, с которыми будет работать плагин
imgTpl	`%id%`	EN: full image filename template where `%id%` will be substituted with image's `id` attribute value RU: шаблон имени файла полного изображения, в котором `%id%` будет заменено на значения тэга `id` обрабатываемых изображений
thumbTpl	`_thumb_%id%`	EN: same for the image's thumbnails RU: то же самое, но для миниатюр изображений
imgHref	`%id%`	EN: same for full image view in new window RU: то же самое для полного просмотра изображения в новом окне
title	`Click to run slideshow`	EN: `title` attribute value for processed images RU: значение атрибута `title` для обработанных изображений
fullView	true	EN: allows to open full image in new window RU: дает возможность открыть полное изображение в новом окне
interval	5	EN: slideshow image swap interval in seconds RU: интервал смены изображения при просмотре слайдшоу в секундах
showHelp	true	EN: show keayboard usage hint RU: отображение подсказки по использованию клавиатуры
destroy	false	EN: invoke .remove() on every loaded image after the slideshow is closed RU: вызвать .remove() для каждого загруженного изображения после закрытия слайдшоу
loaderSrc	`/img/darken_loader.gif`	EN: URL of [animated] loading image RU: URL [анимированного] изображения загрузчика