iLoad это удобная галерея изображений для вашего сайта. Скрипт на основе библиотеки jQuery поможет вам стильно показать пользователю ваши изображения! Скрипт протестирован в таких популярных браузерах, как IE6, IE7, Mozilla FF3, Opera 9. Бесплатно! 1) Подключение скриптов на страницу
Для работы скрипта iLoad требуется библиотке jQuery (она есть в архиве).
Для того, чтобы установить скрипт на страницу, закачайте скрипты ILoad.js
и jquery.js на свой сайт. Затем в теге head нужной страницы пропишите 2
строчки кода:
Code
<script type="text/javascript" src="http://*** путь на сайте ***/jquery.js"></script>
<script type="text/javascript" src="http://*** путь на сайте ***/iload.js"></script>
Так же скрипт использует картинку-прелоадер, но по умолчанию она скачивается с
сайта разработчика, и неопытным пользователям лучше ничего не менять.
Если вы опытный пользователь - то вы можете настроить работы скрипта под себя:
В тексте скрипта вверху можно настроить прозрачность затенения, скорость анимации,
управляемость кнопками клавиатуры, цвета всевозможных блоков и их размеры,
адрес картинки-прелоадера и так далее. 2) Запуск скрипта
Для того чтобы определенное изображение открылось через галерею iload вам
необходимо определенным образом его вставить в страницу:
Code
<a href="*** ссылка на полное изображение ***" title="Имя картинки::Описание картинки" rel="iload"> ***текст или превью*** </a>
Таким образом при клике на ссылку у пользователя откроется галерея с этим изображением.
Если вам нужно создать набор картинок, которые открывались бы в виде слайдшоу, просто
пропишите через двоеточие для каждой каждой из картинок набора дополнительно название группы в которую
она входит:
Code
<a href="*** ссылка на полное изображение ***" title="Описание картинки" rel="iload::***название группы***"> ***текст или превью*** </a>
Вот пример правильно оформленного сета картинок: <
Code
a href="/prew1.jpg" rel="iload::fields" title="Имя::Описание"><img src="/i1.jpg"></a>
<a href="/prew2.jpg" rel="iload::fields" title="Только Описание"><img src="/i2.jpg"></a>
<a href="/prew3.jpg" rel="iload::fields" title="Только имя::"><img src="/i3.jpg"></a>
<a href="/prew4.jpg" rel="iload::fields" title="Описание"><img src="/i4.jpg"></a>
<a href="/prew5.jpg" rel="iload::fields" title="Описание"><img src="/i5.jpg"></a>
<a href="/prew6.jpg" rel="iload::fields" title="Описание"><img src="/i6.jpg"></a>
<a href="/prew7.jpg" rel="iload::fields" title="Описание"><img src="/i7.jpg"></a>
<a href="/prew8.jpg" rel="iload::fields" title="Описание"><img src="/i8.jpg"></a>
