Создание галереи с помощью RaphaelНа нашем сайте часто публикуются уроки по созданию различных галерей, сегодня речь пойдет о создании галереи с помощью такой библиотеки как Raphael. Как Вам известно библиотека Raphael является отличным инструментом для работы с векторной графикой. Но это еще не все достоинства, так же она поддерживается всеми основными браузерами, по этому в данном уроке рассмотрим процесс создания такой галереи с помощью Raphael и библиотек jQuery, вот что у нас с этого получилось..

 

Мы рассмотрим только малый потенциал библиотеки Raphael, так как она стает все более популярной, и позволяет разрабатывать новые функции благодаря своим гибким возможностям. Вот так выглядит наша галерея изображений:

Создание галереи с помощью Raphael

Для начала мы создаем пункты head, и подключаем в нем наши библиотеки, их можно скачать выше.

Следующим шагом будет создание html разметки, она не слишком сложна и выглядит следующим образом:

Мы создаем основной контейнер gallery, который содержит неупорядоченный список изображений. Все изображения должны быть одного размера.

Далее мы задаем стили галереи:

Последним, но не менее важным шагом является определения действий нашей галереи, создав файл init.js со следующим содержанием:

Вот и все, галерея готова, не забываем указывать правильный путь к библиотекам JavaScript и тогда у вас все получится.

На главную