Loading



eTXT


Государственные лотереи




Анкетка


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


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

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

Галерея изображений на JQuery и CSS3
Демо-пример Исходники (2.5 мб)

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


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


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

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

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

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


Работа в интернете с текстами


aliexpress-cashback


Ваш комментарий








  © 2015–2019  dynamic-site.ru  L.M. Служба поддержки RSS подписка подписка