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

скрипт галереи iload

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!

Щелкните по изображению чтобы увидеть работу галереи. Закрыть галерею можно щелчком по темному фону вокруг окна изображения или щелчком по кнопке с крестиком. Ниже пример увеличения маленького одиночного изображения:

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

Щелчки по изображениям - не единственный способ открыть галерею. Запустить галерею можно щелчком по обычной ссылке или с помощью специальных javascript функций. Обратите внимание на то что одна ссылка может открыть целую группу фотографий. Как это сделать, написано далее.

установка iload

Скачайте и распакуйте zip-архив с тремя файлами галереи iLoad, затем загрузите файлы на свой сайт. Откройте файл iLoad.js и измените путь до папки с изображениями на путь до папки с файлами iLoad на вашем сайте. Затем откройте страницу, на которой вы собираетесь использовать галерею, и подключите скрипт перед закрывающим тегом </body> так, как показано ниже. Не забудьте изменить путь до файла со скриптом.

На этом установка закончена. Для корректной работы галереи DOCTYPE не обязателен. Если вы хотите подключить iLoad в шапку сайта, то уберите из самого конца файла скрипта вызов функции включения:

После этого вы сможете подключить скрипт в любое место страницы а инициализацию скрипта выполнить в нужный момент после загрузки страницы:

Для использования iLoad в обычном режиме к ссылке на изображение достаточно добавить атрибут rel="iLoad" , и изображение будет открываться не на новой странице а в галерее:

iLoad читает название и описание фотографии из атрибута title. Для того чтобы добавить название к фотографии, пропишите его в аттрибуте title в ссылке на большое изображение:

Для добавления описания так же пропишите его в том же атрибуте, но на этот раз используйте разделитель  | . Сам разделитель можно изменить в параметре L.splitSign в файле iLoad.js . Посмотрите как оформляется название и описание:

Вы можете указать только описание без названия, просто пропустив его:

Галерея изображений iLoad позволяет создавать сеты фотографий, то есть наборы (альбомы). Открыв фотографию, состоящую в сете, вы можете просматривать фотографии всего сета не закрывая iLoad и не перезагружая страницу. Так же группирование фотографий позволяет использовать слайдшоу. Чтобы создать сет используя ссылки, в атрибуте rel после "iLoad" поставьте разделитель  |  и напишите название сета. Вот пример создания простого сета:

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

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

Закрыть iLoad можно нажав на темной области вокруг вьюпорта, либо щелкнув по кнопке с крестиком на одной из панелей.

Возможно управление с клавиатуры. Для переключения в сете можно использовать стрелки влево и вправо или клавиши "П" и "С". Так же для открытия определенной фотографии можно воспользоваться одной из цифр. Слайдшоу запускается клавишей "Shift" или "Ш", а выключается клавишей "Ctrl" или "З". iLoad выключается клавишей "Esc".

Ниже достаточно подробно описаны все настройки галереи. Вы можете изменять их динамически даже после инициализации галереи. Некоторые настройки потребуют для своего применения перезагрузить галерею функцией L.recreate()

Название настройки	Number	Описание
L.zIndex	Number	Начальное значение свойства z-index с которого начинается посотроение окна галереи
L.path	String	Путь к папке с картинками галереи
L.errorWidth	Number, Px	Ширина окна с информацией об ошибке загрузки изображения в пикселях
L.errorName	String	Заголовок окна ошибки
L.errorText	String	Текст ошибки, как правило его не требуется изменять
L.errorNameCss	String, Css	Css стили заголовка окна с ошибкой
L.errorDescCss	String, Css	Стили текста ошибки
L.fontCss	String, Css	Общие стили текста
L.imageDescCss	String, Css	Стили блока с описанием изображения
L.imageNameCss	String, Css	Стиль блока с названием изображения
L.imageSetCss	String, Css	Стиль блока с информацией о сете
L.imageInfoCss	String, Css	Стиль блока с информацией о изображении
L.splitSign	String	Знак-разделитель, по умолчанию - вертикальная черта
L.bigButtonsDisabledOpacity	Number	Прозрачность выключенных кнопок на большой панели
L.bigButtonsPassiveOpacity	Number	Прозрачность неактивных кнопок на большой панели
L.bigButtonsActiveOpacity	Number	Прозрачность активных кнопок на большой панели
L.minButtonsPassiveOpacity	Number	Прозрачность неактивных кнопок на малой панели
L.minButtonsActiveOpacity	Number	Прозрачность активных кнопок на малой панели
L.overlayAppearTime	Number	Время появления затенения
L.overlayDisappearTime	Number	Время исчезновения затенения
L.containerAppearTime	Number	Время появления окна галереи
L.containerDisappearTime	Number	Время исчезновения окна галереи
L.containerResizeTime	Number	Время, за которое окно галереи изменяет свой размер
L.contentAppearTime	Number	Время появления контента
L.contentDisappearTime	Number	Время исчезновения контента
L.loaderAppearTime	Number	Время появления картинки загрузки
L.loaderDisappearTime	Number	Время исчезновения картинки загрузки
L.containerCenterTime	Number	Время, за которое окно галереи центрируется в окне браузера
L.panelAppearTime	Number	Время появления большой панели
L.panelDisappearTime	Number	Время исчезновения большой панели
L.arrowsTime	Number	Время анимации боковых стрелок
L.paddingFromScreenEdge	Number	Отступ окна вьюпорта от внутреннего края окна браузера с учетом места, занимаемого большой панелью и стрелками
L.contentPadding	Number	Отступ контента вьюпорта от центра окружности углов. Отступ контента от внешнего края вьюпорта - сумма этого значение и радиуса угла. Это позволяет делать как сглаженные так и острые углы
L.cornersSize	Number	Радиус сглаженных углов. 0 для острых углов
L.overlayOpacity	Number	Прозрачность затенения
L.overlayBackground	Number	Стиль, описывающий css параметр background слоя-затенения. Может быть как цветом так и текстурой.
L.containerColor	Number	Цвет вьюпорта в HEX формате
L.panelType	Number	Тип панели меню. Всего 3 допустимых значения: 0 - панели отключены 1 - маленькая панель 2 - большая панель
L.hidePanelWhenScale	Number	Флаг, решающий, скрывать ли большую панель во время переключения фотографий
L.closeOnClickWhenSingle	Number	Флаг, решающий, можно ли закрыть одиночную фотографию при клике по ней
L.forceCloseButton	Number	Флаг, решающий, всегда ли выводит кнопку закрытия галереи или скрыть её когда отсутствует какая либо информация о фотографии
L.arrows	Number	Флаг, позволяющий выключить боковые стрелки
L.imageNav	Number	Флаг, решающий, переключать ли фотографии галереи по клику на парвую и левую части изображения
L.showSize	Number	Флаг, решающий, отображать ли кнопку открытия оригинального размера фотографии
L.forceFullSize	Number	Флаг, запрещающий подстраивать размер фотографии под размер экрана
L.keyboard	Number	Флаг, разрешающий клавиатурную навигацию
L.dragAndDrop	Number	Флаг, разрешающий перетаскивание вьюпорта мышкой
L.preloadNeighbours	Number	Флаг, разрешающий заранее загружать соседние изображения в сете
L.info	Number	Флаг, разрешающий выводить информацию о файле
L.imageSetText	Number	Шаблон вида информации о сете
L.fileInfoText	Number	Шаблон вида информации о файле
L.tips	Number	Подсказки к элементам управления
L.slideshowTime	Number	Время для просмотра каждой фотографии в слайдшоу без учета времени на анимацию
L.slideshowRound	Number	Если опция включена, галерея в режиме слайдшоу, дойдя до конца сета, начнет его заного
L.slideshowClose	Number	Если опция включена, галерея в режиме слайдшоу, дойдя до конца сета, закроется. Если включена эта и предпоследняя опции, галерея не закроется сама так как фактически конец сета не будет определен.

Так же вы можете изучить api iLoad.