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

Данная галерея будет отлично смотреться на сайте, для манипуляций и оптимизации галереи для сенсорных девайсов будем использовать плагин TouchTouch. Плагин работает на всех основных браузерах (кроме IE7 и ниже) и, самое главное, он специально разработан для IOS и Android.

Шаг 1. HTML

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

Преимущества плагина

  • Плавная анимация CSS3 и переходов;
  • Приятный интерфейс CSS, который реагирует на прикосновения;
  • Предварительно загружает фотографии только тогда, когда они необходимы;
  • Поддерживает навигацию с помощью клавиатуры;

TouchTouch полностью полагается на  анимацию с помощью CSS3 , это означает, что переходы будут плавными на мобильных устройствах (естественно, это также означает, что это будет поддерживаться на старых браузерах). Используя некоторые приемы CSS, интерфейс автоматически подстраивается под размер устройства, при этом картинки также принимают размер экрана (проверить это можно путем изменения размера окна браузера).

Шаг 2. CSS

Теперь рассмотрим стили CSS, с помощью которых мы зададим заголовки для подсказок, и некоторые правила позиционирования большой и маленькой галереи.

Шаг 3. jQuery

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

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