Галерея изображений с использованием библиотеки Raphael

Галерея изображений с использованием библиотеки Raphael На форуме часто задают вопросы по созданию галерей и слайд-шоу изображений на сайте. Этой статьей я начну цикл статей, посвященных адаптации jQuery — скриптов галерей на Ucoz. Исходный материал я буду брать тут. Поэтому если у Вас возникнет желание адаптировать какую-то конкретную галерею или слайд-шоу с этого сайта, пишите, и я разберу пример.Сегодня мы построим галерею изображений с использованием библиотеки Raphael. Вот исходник для скачивания. А вот пример этой галереи.Итак, первое, что нужно сделать, это создать разметку html. Она должна принять следующий вид<div class=»gallery»><ul class=»reset»><li><img src=»http://otlichnica.ucoz.ru/_pu/27/00460792.jpg» alt=»»></li><li><img src=»http://otlichnica.ucoz.ru/_pu/27/33429342.jpg» alt=»»></li><li><img src=»http://otlichnica.ucoz.ru/_pu/26/69412545.jpg» alt=»»></li><li><img src=»http://otlichnica.ucoz.ru/_pu/26/56840023.jpg» alt=»»></li><li><img src=»http://otlichnica.ucoz.ru/_pu/26/72071878.jpg» alt=»»></li><li><img src=»http://otlichnica.ucoz.ru/_pu/26/35956369.jpg» alt=»»></li><li><img src=»http://otlichnica.ucoz.ru/_pu/26/29186135.jpg» alt=»»></li><li><img src=»http://otlichnica.ucoz.ru/_pu/26/62669969.jpg» alt=»»></li></ul></div>Этот код нужно вставить в html — код страницы. Адреса картинок, конечно же нужны свои. Загрузить картинки можно через файловый менеджер. Но есть и другой вариант. Например, Вы хотите выводить последние 8 изображений из Каталога файлов. Тогда можно воспользоваться информером. Заходим в Панель администрирования — Информеры — Создаем информер со следующими параметрами:Раздел : Каталог файловТип данных : МатериалыСпособ сортировки — на выборКоличество материалов : 8Количество колонок : 1Дополнительные опции : можно выбрать категории и материалы, которые Вы хотите выводить.СоздатьВаш информер появится в списке информеров.Теперь нужно задать его шаблон. Он будет следующий:<li><img src=»$IMG_URL1$»></li>После этого запоминаем код информера вида $MYINF_№$Теперь возвращаемся к странице, где мы хотим получить галерею и вместо кода, указанного выше, пишем следующее:<div class=»gallery»><ul class=»reset»>$MYINF_№$</ul></div>Все, теперь на странице будут показываться изображения, заданные в информере.Теперь нам надо оформить все это и прописать скрипты. Для этого создаем через файловый менеджер 2 папки: css и js. Если они уже есть у вас, их создавать не надо. Теперь в папку css надо скопировать файл default.css — он лежит в папке css исходника, указанного выше.А в папку js копируем файлы raphael.js и init.js Теперь к ним надо прописать пути на странице с галереей. Возвращаемся к ней и перед кодом вставляем 3 строчки<link href=»http://otlichnica.ucoz.ru/css/default.css» rel=»stylesheet» type=»text/css» /><script src=»http://otlichnica.ucoz.ru/js/raphael.js» type=»text/javascript»></script><script src=»http://otlichnica.ucoz.ru/js/init.js» type=»text/javascript»></script>Все это по прежнему делается в html-коде страницы. Если, кто не понимает, на странице добавления материала над полем полный текст материала в панели инструментов кнопка htmlИтого, там должен получиться следующий текст:<link href=»http://otlichnica.ucoz.ru/css/default.css» rel=»stylesheet» type=»text/css»><script src=»http://otlichnica.ucoz.ru/js/raphael.js» type=»text/javascript»></script><script src=»http://otlichnica.ucoz.ru/js/init.js» type=»text/javascript»></script><div class=»gallery»><ul class=»reset»>$MYINF_№$</ul></div>Ваша галерея готова.

Комментарии на Facebook