Инглекс



admitad.partner



Интернет-магазин, который платит

Галерея изображений на 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.



Мир вокруг нас. Интересные факты.



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








  © 2015–2021  dynamic-site.olerant.ru  L.M. Служба поддержки RSS подписка подписка Продажа, покупка  трафика