В данном уроке мы рассмотрим кое что такое, чем мало кто может похвастаться с веб-разработчиков на своем сайте, а именно создание  полноэкранной 3D галереи, без применения технологии flash, мы будем использовать только JavaScript. Данная галерея является универсальной, так как ее легко редактировать, к ней можно привязать другой контент, и использовать в качестве навигации, прикрепив к изображениям необходимую ссылку. Данная галерея может стать отличным инструментом для создания Вашего личного портфолио..

Для начала давайте посмотрим как выглядит галерея, и загрузить исходные материалы уже полностью готовой галереи:

Для начала создаем HTML разметку:

Рассмотрев данный код, можно заметить, что элемент div screen содержит всю галерею. Элемент div command содержит подпись и панель управления галереей div bar. А последний, но не менее важный элемент, это div urlInfo будет выводить на ссылку, привязанную к изображению.

Далее нам необходимо оформить нашу галерею, придать ей цветовую гамму, и оформить изображения, делаем это следующим образом:

Вот теперь мы начинаем использовать JavaScript, который вдохнет жизнь в нашу галерею:

И последними штрихами является подключения изображений, здесь можете регулировать их количество и по необходимости добавить ссылки:

На этом наша галерея готова.

На главную