iLoad имеет множество самых разнообразных настроек и функций, которые помогут вам адаптировать галерею для использования на своем сайте. Подробнее о возможностях и настройках iLoad написано ниже. Возможности iLoad3:
iLoad3 не использует фреймворки и полностью автономна
iLoad3 позволяет быстро менять графическое оформление благодаря тому что вся графика хранится в одном спрайте
Вы можете использовать слайдшоу с набором настроек отображения изображений
Традиционно сглаженные углы прорисовываются автоматически без использования графики
Появилась возможность изменять отступ от краев до контента
Появилась новая, более функциональная большая панель
Большие фотографии подстраиваются под размеры экрана
Название группы изображений можно задать на русском языке, а в некоторых случаях можно не использовать
Можно включить выведение информации о формате и размерах файла
Можно включить обязательное отображение кнопки закрытия на панели
Можно запретить навигацию с помощью нажатий на части изображения
Галерею по прежнему можно выключать щелчком по тени
Навигация по сету упрощена, теперь можно использовать ещё и цифры 1-9 для открытия нужной по счету фотографии
Навигация в сете возможна так же щелчками по левой и правой частям изображения, что так же графически оформлено
iLoad предзагружает не только текущее изображение но и соседние, что увеличивает удобство просмотра сета (опционально)
iLoad сам центрируется и подстраивается под размеры экрана при их изменении
С помощью функционала iLoad стало возможным создать огромный сет изображений одной ссылкой
Скорость всей анимации в iLoad настраивается
iLoad позволяет отображать имя фотографии, её описание, позицию в группе и общее число фотографий в группе, название группы и информацию о файле
iLoad не требует обновления страницы после добавления новых ссылок на изображения для их обработки
Добавлена возможность перетаскивать фотографию мышкой для удобства просмотра
Подключение скрипта
Для того чтобы подключить скрипт на страницу на вашем сайте, сначала загрузите три файла из набора iLoad в одну папку на вашем сайте, затем поместите (изменив ссылку на скрипт) код ниже перед закрывающим тегом </body>.
Code 1 <script type='text/javascript' src='адрес папки с файлами/iLoad.js'></script>
Обычно тег расположен в конце кода страницы. Не забудьте в самом скрипте указать ссылку на папку, в которую вы загрузили файлы iLoad (skin.png и wait.gif и iLoad.js). Обратите внимание на то что путь должен заканчиваться на обратный слэш, например http://studioad.ru/iload/.
Автоматическое открытие галереи
iLoad может открывать изображения автоматически, для этого достаточно создать ссылку, ссылающуюся на открываемое изображение и добавить к ней атрибут rel=iLoad. Напрмер вот так:
Code 1 <a href="http://studioad.ru/iload/1b.jpg" rel="iLoad">Ссылка</a>
При клике по такой ссылке iLoad запуститься и откроет изображение, указанное в атрибуте href. Это сделано для того, чтобы в случае отключенного js у пользователя в браузере, пользователь всё равно мог получить доступ к изображению.
Открытие галереи функцией L()
Кроме автоматической обработки ссылок в iLoad3 добавлена возможность открытия одиночных изображений и сетов с помощью специальной функции L(). Напрмер вот как открыть одиночное изображение:
Code 1 <a href="javascript:void(0)" onclick="L(['http://studioad.ru/iload/1b.jpg'])">Ссылка</a>
2
3 Или скриптом
4
5 <script type='text/javascript'>
6 L(["http://studioad.ru/iload/1b.jpg"])
7 </script>
Если вы используете функции iLoad в скриптах - убедитесь, что сначала инициализируется сам скрипт iLoad, и только потом используются его функции, иначе браузер выдаст ошибку. L() так же может быть вызвана как iLoad() или iload().
Название и описание фотографий
iLoad читает информацию о названии и описании фотграфии из тега title либо из информации, передающейся в функции L(). Вот примеры:
Code С именем 2 3 <a href="http://studioad.ru/iload/1b.jpg" rel="iLoad" title="Имя">Ссылка</a> 4 5 С описанием и именем 6 7 <a href="http://studioad.ru/iload/1b.jpg" rel="iLoad" title="Имя::Описание">Ссылка</a> 8 9 С описанием без имени 10 11 <a href="http://studioad.ru/iload/1b.jpg" rel="iLoad" title="::Описание">Ссылка</a> 12 13 И то же самое функцией 14 15 <script type='text/javascript'> 16 L(["http://studioad.ru/iload/1b.jpg::Имя"]) 17 L(["http://studioad.ru/iload/1b.jpg::Имя::Описание"]) 18 L(["http://studioad.ru/iload/1b.jpg::::Описание"]) 19 </script>
Как видите, название отделяется от описания двойным двоеточием "::". Этот символ можно изменить в настройках скрипта на любой другой просто изменив настройку с названием L.splitSign.
Совет: не используйте длинные описание - 30 строчек может сильно перекосить вьюпорт iLoad - ошибок не появится, но изображение станет слишком мелким.
Создание сетов фотографий
iLoad позволяет создавать сеты фотографий, то есть наборы (альбомы). Открыв фотографию, состоящую в сете, вы можете просматривать фотографии всего сета не закрывая iLoad. Так же группирование фотографий позволяет использовать слайдшоу. Чтобы создать сет используя ссылки, в атрибуте rel после "iLoad" поставьте двойное двоеточие (по умолчанию) и напишите название сета. В функции фотографии сета указываются через запятую, затем указывается название сета (по желанию) и номер открываемой в сете фотографии (по желанию). Вот примеры создания сетов:
Code 1 2 фотографии в сете с именем "Природа" 2 3 <a href="http://studioad.ru/iload/1b.jpg" rel="iLoad::Природа" title="Листик">Ссылка</a> 4 <a href="http://studioad.ru/iload/2b.jpg" rel="iLoad::Природа" title="Веточка::И капли...">Ссылка</a> 5 6 Функция, открывающая такой же сет 7 8 <script type='text/javascript'> 9 L(["http://studioad.ru/iload/1b.jpg::Лист","http://studioad.ru/iload/2b.jpg::Веточка::И капли..."],"Природа",1) 10 </script>
Во время работы скрипта вы всегда можете получит название текущей группы, номер изображения, его информацию. Об этом будет сказано далее.
Функционал
iLoad обладает набором функций, которые помогут разбирающимся в js пользователям расширять возможности галереи, создавать свои панели и так далее. Вот список функций и способы их использования:
Code <script type='text/javascript'>
2
3 L(["Изображение","",""... ],"Название группы",1);
4 /* C функцией открытия изображений вы уже знакомы */
5
6 L.next()
7 /* Откроет следующее изображение в сете при условии
8 что оно существует */
9
10 L.previous()
11 /* Откроет предыдущее изображение в сете при условии
12 что оно существует */
13
14 L.first()
15 /* Откроет первое изображение сета */
16
17 L.last()
18 /* Откроет последнее изображение сета */
19
20 L.openPanel(param)
21 /* Откроет большую панель при условии что
22 большая панель выбрана в настройках скрипта
23 и создан код iLoad то есть L.ready==true
24 Если param==1 то так же откроется кнопка
25 размерных модов изображения */
26
27 L.closePanel(callback,param)
28 /* Закроет панель. callback принимает функцию
29 для выполнения после закрытия панели, если param==1,
30 то панель закроется даже если включена опция
31 запрещающая скрывать панель при просмотре галереи */
32
33 L.computed()
34 /* Включит режим подстройки под размеры окна */
35
36 L.original()
37 /* Включит режим открытия оригинального размера для
38 следующей фотографии (затем снова сменится на подстройку
39 под размер экрана, для постоянного открытия оригинального
40 размера измените настройку в скрипте) */
41
42 L.create()
43 /* Cоздаст первичный код iLoad (выполняется по умолчанию) */
44
45 L.destroy()
46 /* Удалит весь код iLoad со страницы и обнулит история
47 открытия фотографий */
48
49 L.recreate()
50 /* Сочетание двух предыдущих функций - перезагрузит iLoad.
51 Иногда это необходимо выполнять после горячей смены настроек */
52
53 L.center()
54 /* Центрирует вьюпорт и панель (если iLoad скрыт,
55 центрирует ежесекундно) */
56
57 L.scale(width,height,callback)
58 /* Изменит размеры вьюпорта (callback - необязательная функция,
59 выполняемая после завершения процесса изменения размера) */
60
61 L.show(callback)
62 /* отобразит вьюпорт и тень */
63
64 L.hide()
65 /* скроет вьюпорт и тень */
66
67 L.doAfter
68 /* Это переменная для хранения исполняемого кода, который должен
69 выполнится после закрытия iLoad, причем не важно, сам iLoad
70 закроет себя или вы закроете iLoad с помощью L.hide().
71 После этого функция обнулится. На первый взгляд смысл не очевиден,
72 но вы очень оцените эту переменную если будете использовать
73 iLoad нестандартно - например можно будет легко восстановить настройки */
74
75 L.showContent(callback)
76 /* Отобразит контент (уберет загораживающий div) */
77
78 L.hideContent(callback)
79 /* Скроет контент */
80
81 L.play()
82 /* запустит слайдшоу при условии что в данный момент открыта
83 не последняя фотография в сете (не играет роли если стоит круговое
84 слайдшоу в настройках) */
85
86 L.stop()
87 /* Остановит слайдшоу */
88
89 L.showLoader()
90 /* Отобразит анимацию загрузки */
91
92 L.hideLoader(callback)
93 /* Или спрячет её */
94
95 L.showLeftArrow(callback)
96 /* Покажет левую стрелку */
97
98 L.showRightArrow(callback)
99 /* Покажет правую стрелку */
100
101 L.hideLeftArrow(callback)
102 /* Скроет левую стрелку */
103
104 L.hideRightArrow(callback)
105 /* Скроет правую стрелку */
106
107 L.cursorTest(param)
108 /* Заставит обновить переменную L.cursorPosition и
109 в зависимости от её значения отобразит или скроет нужные
110 стрелки. Если param==1 скроет стрелки в любом случае */
111
112 L.prevent(event)
113 /* Вспомогательная функция.
114 Предотвратит выполнение события по умолчанию
115 может быть полезно при разработке своих панелей. */
116 </script>
Навигация
В зависимости от выбранной конфигурации панелей, кнопки управления появятся либо сразу под фотографией, либо чуть ниже на графической панели. Они идентичны. Панели можно отключить в настройках.
В сете переключение между соседними фотографиями возможно щелчками на левую и правую части изображения, при этом справа и слева будут показываться небольшие стрелки (если эта опция включена в скрипте).
Закрыть iLoad можно нажав на темной области вокруг вьюпорта, либо щелкнув по кнопке с крестиком на одной из панелей.
Возможно управление с клавиатуры. Для переключения в сете можно использовать стрелки влево и вправо или клавиши "П" и "С". Так же для открытия определенной фотографии можно воспользоваться одной из цифр. Слайдшоу запускается клавишей "Shift" или "Ш", а выключается клавишей "Ctrl" или "З". iLoad выключается клавишей "Esc".
Настройки скрипта
Для уменьшения финального размера файла со скриптом описание всех настроек даны ниже. Сначала идет название настройки, затем её описание и возможные варианты значений.
Code <script type='text/javascript'>
2 L.fontCss='font:11px Tahoma,Arial,Helvetica,sans-serif;color:#aaa;'
3 /* Эта настройка содержит css код, применяемый ко всей
4 панели с текстом и информацией о фотографии. Если вы не уверены, что
5 знаете, как правильно изменять его - оставьте всё по умолчанию */
6
7 L.imageDescCss='display:block;'
8 /* Аналогичная настройка с кодом для текста описания изображения */
9
10 L.imageNameCss='display:block;font-weight:700;color:#999;'
11 /* Аналогичная настройка с кодом для имени изображения */
12
13 L.imageSetCss='display:block;'
14 /* Настройка с кодом для текста с информацией о группе изображения */
15
16 L.imageInfoCss='display:block;'
17 /* Настройка с кодом для текста с информацией о файле */
18
19 L.zIndex=9999
20 /* z-index слоя с тенью, остальные слои рассчитываются относительно него */
21
22 L.path="http://studioad.ru/iload/"
23 /* ВНИМАНИЕ!!!
24 Это обязательная настройка! Здесь необходимо указать путь
25 к папке с файлами iLoad на вашем сайте. Путь должен
26 заканчиваться слэшем */
27
28 L.splitSign="::"
29 /* Знак, разделяющий описание и название фотографий в
30 тегах title и в функциях */
31
32 L.bigButtonsDisabledOpacity=30
33 /* Прозрачность отключенных кнопок на большой панели,
34 целое число от 0 до 100 */
35
36 L.bigButtonsPassiveOpacity=100
37 /* Прозрачность кнопок на большой панели */
38
39 L.bigButtonsActiveOpacity=70
40 /* Прозрачность кнопок на большой панели при наведении мышки */
41
42 L.minButtonsPassiveOpacity=50
43 /* Прозрачность кнопок на малой панели */
44
45 L.minButtonsActiveOpacity=100
46 /* Прозрачность кнопок на малой панели при наведении мышки */
47
48 L.overlayAppearTime=200
49 /* Время появления тени в миллисекундах,
50 целое положительное число начиная с нуля*/
51
52 L.overlayDisappearTime=200
53 /* Время исчезновения тени */
54
55 L.containerAppearTime=300
56 /* Время появления вьюпорта */
57
58 L.containerDisappearTime=300
59 /* Время исчезновения вьюпорта */
60
61 L.containerResizeTime=300
62 /* Время изменения размеров вьюпорта */
63
64 L.contentAppearTime=350
65 /* Время появления контента */
66
67 L.contentDisappearTime=200
68 /* Время исчезновения контента*/
69
70 L.loaderAppearTime=200
71 /* Время появления анимации загрузки */
72
73 L.loaderDisappearTime=200
74 /* Время исчезновения анимации загрузки */
75
76 L.containerCenterTime=300
77 /* Время центровки вьюпорта и подстройки под размеры окна */
78
79 L.panelAppearTime=300
80 /* Время появления большой панели */
81
82 L.panelDisappearTime=300
83 /* Время исчезновения большой панели */
84
85 L.arrowsTime=230
86 /* Время анимации стрелок */
87
88 L.paddingFromScreenEdge=35
89 /* отступ от краев экрана при подстройке под его размеры */
90
91 L.contentPadding=0
92 /* Отступ контента в вьюпорте от краев сглаженной зоны */
93
94 L.cornersSize=18
95 /* Радиус сглаженного угла. В сумме с предыдущей настройкой
96 образует отступ контента от края вьюпорта */
97
98 L.overlayOpacity=95
99 /* Прозрачность тени */
100
101 L.overlayBackground="#000000"
102 /* Цвет тени, значение цвета в полном HEX формате */
103
104 L.containerColor="#ffffff"
105 /* Цвет вьюпорта */
106
107 L.panelType=1
108 /* Тип используемой панели. Целое число от 0 до 2:
109 0 - панели не отображаются вообще
110 1 - малая панель
111 2 - большая панель */
112
113 L.hidePanelWhenScale=true
114 /* Флаг, разрешающий скрывать большую панель
115 при переключении фотографий, значение булевного типа:
116 true - да
117 false - нет */
118
119 L.forceCloseButton=true
120 /* Флаг, заставляющий отображаться кнопку закрытия изображения
121 на малой панели даже в том случае, если у фотографии нет ни имени,
122 ни описания, ни информации о файле и фотография не состоит в сете.
123 Если настройку отключить, подобные фотографии можно будет закрыть
124 только щелчком по тени или клавишей Esc (опционально)*/
125
126 L.arrows=true
127 /* Флаг, разрешающий отображать стрелочки при наведении мыши
128 на левую и правую части изображения */
129
130 L.imageNav=true
131 /* Флаг, разрещающий переход назад и вперед в сете при щелчке
132 по левой и правой части изображения */
133
134 L.showSize=true
135 /* Флаг, разрешающий показывать кнопки открытия других размерных
136 модов изображения в том случае если изображение превышает размеры экрана */
137
138 L.forceFullSize=false
139 /* Флаг, заставляющий все изображения всегда открываться в оригинальном размере */
140
141 L.keyboard=true
142 /* Флаг, разрешающий управление с клавиатуры */
143
144 L.dragAndDrop=true
145 /* Флаг, разрешающий перетаскивание вьюпорта при зажатой
146 левой клавише мыши на изображении */
147
148 L.preloadNeighbours=true
149 /* Флаг, разрешающий предзагрузку соседних изображений в
150 сете, для удобства рекоммендую оставить без изменений */
151
152 L.info=true
153 /* Флаг, разрешающий отображение информации о файле */
154
155 L.imageSetText=['<b>[N]</b> из <b>[T]</b>',' в группе "[S]"']
156 /* Шаблон по которому строится текст с информацией о
157 позиции текущей фотографии в сете и названии сета.
158 Специальные символы:
159 [N] - номер текущей фотографии
160 [T] - общее количество фотографий в сете
161 [S] - название сета */
162
163 L.fileInfoText="Файл формата <b>[F]</b> размером <b>[W]х[H]</b> пикселей"
164 /* Шаблон по которому строится текст с информацией файле.
165 Специальные символы:
166 [F] - формат файла
167 [W] - ширина изображения в пикселях
168 [H] - высота изображения в пикселях */
169
170 L.tips=['Предыдущее','Следующее','Закрыть','Слайдшоу','Пауза','Оригинал','Уместить в окне']
171 /* Текст всплывающих подсказок к кнопкам панелей */
172
173 L.slideshowTime=3000
174 /* Время в миллисекундах, которое отводится на просмотр
175 фотографии в слайдшоу без учета времени на анимацию и загрузку фотографии */
176
177 L.slideshowRound=true
178 /* Флаг, разрешающий показывать фотографии в слайдшоу по кругу:
179 после последней фотографии снова покажется первая */
180
181 L.slideshowClose=false
182 /* Флаг, разрешающий закрыть галерею после просмотра последней
183 фотографии в слайдшоу. Не играет роли если включена предыдущая настройка. */
184 </script> |
