Галерея изображений на JQuery и CSS3

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

В этом уроке мы создадим привлекательную галерею. Идея состоит в том, чтобы показать каждый альбом в виде слайдера. При выборе альбома и щелчке мышью, произойдёт показ изображений из этого альбома. Здесь используются возможности JQuery и CSS3 для эффекта поворота изображений и частично PHP для вывода изображения с каждого альбома. Эффект успешно работает во всех современных браузерах.

Демо-пример

Исходники (2.5 мб)

Если возникают проблемы при скачивании файлов, например, через браузер, скопируйте ссылку (правая кнопка мыши → копировать адрес ссылки) и скачайте файл через Download Master.

Установка на сайт

Скачайте учебный материал, распакуйте в отдельную папку на компьютере;
Подберите изображения в каждую из девяти папок, расположенных в папке albums. Малые изображения (превью - thumb.jpg) желательно, чтобы имели размеры 135x90 пикселов, а основные - 460x305. Названия основных изображений можно оставить оригинальные, так как они роли не играют;
В индексном файле внесите доступные изменения (названия, текст объявлений и т.д.);
Закачайте папку PhotoStack на сервер сайта и откройте индексный файл. Всё будет исправно работать!

Если имеете желание и потенциал, изменяйте настройки в файле стилей.

В рассматриваемом примере библиотека jQuery (jquery.min.js), версия 1.4.2, подключается удаленно с сайта //ajax.googleapis.com. Вы вправе использовать другие варианты подключения. Об этом прочтите здесь.

Спасибо за внимание. Посещайте мой сайт. Удачи! Пока! Ваш L.M.

Ваше мнение по материалу, изложенному на сайте

Служба поддержки