Bővíthető képgaléria

A kép, ami kitágul megnyomásakor átvált teljes szélességű és alakítjuk a galériában.

Általános szabály, hogy a felhasználó nem tud lépni a képet. De mi van, ha meg akarja mutatni több képet? Ez az opció lehet futtatni egy modális diavetítés címre. Azonban CSS átmeneteket teszi az új UX-megoldásokat. Az új megközelítés lehet bővíteni a képet, hogy teljes szélességében, amely a szomszédos tartalom, és nyomja le az alsó helyzetben a tartalom, és átalakítja azt a diavetítés teljes szélességű!

struktúrák létrehozásában

HTML felépítése két fő eleme

(.cd-csúszka-átalakító és .cd-item-info) - az első, amely a képgalériában, és a második - a termék-információ (cím műveletgombra ..) - becsomagolt belsejében Section.cd-single-elemet. A maradék tartalom van illesztve egy külön részben .cd-tartalmat.

Megjegyezzük, hogy az elem .cd csúszka-lapszámozás (navigálni kezelése lapozás minden csúszka) nem közvetlenül helyezünk a html, de épül a jQuery.

hozzátéve stílus

A kis eszközök CSS egyszerű: Mindkét .cd-csúszka-átalakító és .cd-elem-info teljes szélességében, és kövesse a standard patakok.

A megfelelő működéshez az e művészeti galéria képek kell oldalaránya nagyobb, mint 1 (szélesség magasság fent); Ha a kép a diavetítés módban, magassága arányosan nő a szélessége. Ezért, egy képet egy aspektusa arány kisebb, mint 1 eredményez nagyobb görgetés.
Ezen kívül, mivel .cd-elem-info helyzetben van: az abszolút magasság .cd-single-tétel azonban csak magasság galéria; Következésképpen a magasság .cd-elem-info kisebbnek kell lennie, mint a képgaléria.

esemény feldolgozása

Ez az!

Kapcsolódó cikkek