Розширювана галерея зображень
Зображення, яке розширюється при натисканні, переходить в повну ширину і перетворюється в галерею.
Як правило, користувач не може взаємодіяти з зображенням. Але що, якщо ви хочете показати більше одного зображення? Опція може полягати в тому, щоб запускати модальное слайд-шоу при натисканні. Однак переходи CSS дозволяють використовувати нові UX-рішення. Новий підхід може полягати в тому, щоб розширити зображення, зробити його повною шириною, покриваючи сусідній контент і натиснувши вниз більш низьке положення контенту і перетворюючи його в слайд-шоу повної ширини!
створення структури
HTML структурований в 2 основні елементи
Зверніть увагу, що елемент .cd-slider-pagination (навігація для управління пошуковим викликом для кожного слайдера) безпосередньо не вставлений в html, але створений з використанням jQuery.
Додавання стилю
На невеликих пристроях CSS досить простий: обидва .cd-slider-wrapper і .cd-item-info мають повну ширину і слідують стандартним потокам сторінки.
Для правильної роботи цієї техніки зображення галереї повинні мати співвідношення сторін вище 1 (ширина вище висоти); Коли зображення перебуває в режимі слайд-шоу, його висота збільшується пропорційно ширині. Тому зображення зі співвідношенням сторін менше 1 призведе до більшої прокручуванні.
Крім того, оскільки .cd-item-info знаходиться в положенні: абсолютне, висота .cd-single-item встановлюється тільки по висоті галереї; Отже, висота .cd-item-info повинна бути менше, ніж зображення галереї.