Если вы обладатель фотосайта или портфолио, или хотите сделать что-то подобное, тогда этот урок будет вас интересный. Речь пойдет о создании замечательной полноэкранной галереи с навигационным сайдбаром с помощью javascript. В данной галереи использовано шестнадцать фоновых изображений которые плавно будут изменяться. Все фоновые изображения составлены в огромное поле 4х4. Навигация осуществляется с помощью миниатюрной карты, на которой можно выбрать нужный участок галереи, или с помощью стрелок на изображениях.

Также можно использовать навигацию с помощью стрелок на клавиатуре. И так, для начала нам необходимо подключить JavaScript скрипт и стили, которые будут использоваться в данной галереи, для этого следует разместить следующие строчки между тегами head:

После этого мы рассмотрим разметку HTML, она не будет чем то новым и гениально сложным, все достаточно просто, вы можете в этом сами убедиться:

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

Теперь рассмотрим стили CSS:

css/layout.css

И последним шагом будет JavaScript. Нам ведь надо чтобы все работало и двигалось:

js/main.js

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.