Imaginea care se extinde atunci când este apăsat, comută la lățimea completă și transformată în galerie.
Ca o regulă, utilizatorul nu poate interacționa cu imaginea. Dar ce se întâmplă dacă doriți să arate mai mult de o imagine? Această opțiune poate fi pentru a rula o succesiune de imagini modal când se face clic. Cu toate acestea, tranziții CSS permit utilizarea noilor UX-soluții. Noua abordare ar putea fi de a extinde imaginea pentru ao face pe întreaga lățime, acoperind conținutul adiacent și împingând în jos poziția inferioară a conținutului și transformarea acestuia într-o expunere de diapozitive pe întreaga lățime!
crearea de structuri
HTML este structurată în două elemente principale
Rețineți că elementul .cd-slider-paginare (navigați pentru a gestiona paginare pentru fiecare cursor) nu este introdus direct în HTML, dar este construit folosind jQuery.
Adăugarea de stil
Pe dispozitivele mici CSS este destul de simplu: Ambele .cd-slider-înveliș și .cd-item-info au pagină întreagă lățime și urmați fluxurile standard.
Pentru buna funcționare a acestei arte galerie imagini ar trebui să aibă un raport de aspect mai mare de 1 (înălțime lățime de mai sus); Când imaginea este în modul slide-show, înălțimea crește proporțional cu lățimea. De aceea, o imagine cu un raport de aspect mai mic de 1 va avea ca rezultat o mai mare defilare.
În plus, din moment ce .cd-item-info este în poziția: înălțimea absolută .cd-un singur element este setat numai prin galerie înălțime; În consecință, înălțimea .cd-item-info ar trebui să fie mai mică decât galeria de imagini.