Разширяема галерия
Образът, който се разширява при натискане превключва на пълна ширина и се превръща в галерията.
Като правило, потребителят не може да взаимодейства с изображението. Но какво, ако искате да покажете на повече от една снимка? Тази опция може да бъде да тече модален слайдшоу, когато се натисне. Въпреки това, CSS преходи позволяват използването на нови UX-решения. Новият подход може да бъде да разширите изображението така, че цялата ширина, покривайки съседния съдържанието и натиснете надолу, по-ниска позиция на съдържанието и да го превърне в слайд шоу цялата ширина!
Създаване на структури
HTML е структуриран в два основни елемента
Имайте предвид, че елементът .cd-плъзгача-странициране (навигация да управлява пейджинг за всеки плъзгач) не е пряко поставен в HTML, но е изграден с помощта JQuery.
Добавянето на стил
На малки устройства CSS е съвсем проста: И двете .cd слайдер-обвивка и .cd-т-инфо има цяла страница ширина и да следва стандартните потоци.
За правилното функциониране на това изкуство галерия снимки трябва да имат съотношение по-голямо от 1 (ширина височина по-горе); Когато изображението е в режим на слайд-шоу, неговата височина се увеличава пропорционално на ширина. Следователно изображение с един аспект съотношение по-малко от 1 ще доведе до по-голяма превъртане.
В допълнение, тъй като .cd-т-инфо е в позиция: абсолютна височина .cd-еднократна покупка е зададено само височина галерия; Вследствие на височина .cd-т-инфо трябва да бъде по-малък от галерията от снимки.
обработка на събитие
Това е!
Свързани статии