Rozbalovací karusel projektů expanding-card-carousel · full

Lišta s popiskem, linkou, počítadlem „01 / 05“ a dvěma šipkami; pod ní pás karet projektů s fotkou, pilulkou lokality, typem a názvem. Od 1280 px je jedna karta rozbalená (986 : 302) a klik na zavřenou kartu, šipky nebo klávesy ji přepnou, pás se neposouvá; šipky jsou ve smyčce. Pod 1280 px je z pásu Swiper se stejně širokými kartami.

Pro integrátora: Doporučeno 3–6 projektů (od 7 jsou zavřené karty na 1280–1440 px úzké proužky a pilulka lokality se v nich schová). Fotky 986 × 560, retina jen ve WebP (webpSrcset 986w + 1972w); zavřená karta ukazuje středový výřez téže fotky. `url` je volitelné — rozbalená karta (a pod 1280 px každá karta) pak vede na projekt. Mezi jinými nadpisy je popisek lišty štítek (`tag: "p"`, `itemTag: "h4"`), samostatně `h2` / `h3`. Jen na světlé sekci (bílá / snow) — popisek, počítadlo a šedá šipka tmavé pozadí nemají. Ovládání řídí expanding-card-carousel.ts; bez JS je od 1280 px rozbalená první karta, pod tím vodorovný pás. Bez popisků (jen fotky, bez pilulky, typu a ztmavení): captions: false — title karty je dál povinný, zůstane skrytý pro odečítače (popisek tlačítka a hláška karuselu). Galerie (layout: "gallery"): pod 1280 px karta přes celou šířku v poměru fotky 986 : 560, aby byla na mobilu vidět celá fotka; od 1280 px beze změny.

Zdroj: src/_includes/blocks/expanding-card-carousel/

Varianta „default“

Vybrané projekty

Praha 4 – Háje

Rezidence

Jižní Terasy

Praha 8 – Střížkov

Viladomy

Střížkov

Praha 9 – Dolní Počernice

Viladomy

Počernice

Praha 10 – Pitkovice

Viladomy

Pitkovice

Praha 3 – Žižkov

Rezidence

Parková Čtvrť

Vzorová data (JSON)

{
  "settings": {
    "background": "white"
  },
  "title": "Vybrané projekty",
  "items": [
    {
      "locality": "Praha 4 – Háje",
      "type": "Rezidence",
      "title": "Jižní Terasy",
      "image": {
        "src": "/assets/images/photos/projekt-jizni-terasy-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-jizni-terasy-986.webp 986w, /assets/images/photos/projekt-jizni-terasy-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 8 – Střížkov",
      "type": "Viladomy",
      "title": "Střížkov",
      "image": {
        "src": "/assets/images/photos/projekt-strizkov-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-strizkov-986.webp 986w, /assets/images/photos/projekt-strizkov-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 9 – Dolní Počernice",
      "type": "Viladomy",
      "title": "Počernice",
      "image": {
        "src": "/assets/images/photos/projekt-pocernice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pocernice-986.webp 986w, /assets/images/photos/projekt-pocernice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 10 – Pitkovice",
      "type": "Viladomy",
      "title": "Pitkovice",
      "image": {
        "src": "/assets/images/photos/projekt-pitkovice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pitkovice-986.webp 986w, /assets/images/photos/projekt-pitkovice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 3 – Žižkov",
      "type": "Rezidence",
      "title": "Parková Čtvrť",
      "image": {
        "src": "/assets/images/photos/projekt-parkova-ctvrt-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-parkova-ctvrt-986.webp 986w, /assets/images/photos/projekt-parkova-ctvrt-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    }
  ]
}

Varianta „empty“

Vzorová data (JSON)

{}

Varianta „with-url“

Vybrané projekty

Praha 4 – Háje

Rezidence

{
  "title": "Vybrané projekty",
  "items": [
    {
      "locality": "Praha 4 – Háje",
      "type": "Rezidence",
      "title": "Jižní Terasy",
      "image": {
        "src": "/assets/images/photos/projekt-jizni-terasy-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-jizni-terasy-986.webp 986w, /assets/images/photos/projekt-jizni-terasy-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      },
      "url": "#"
    },
    {
      "locality": "Praha 8 – Střížkov",
      "type": "Viladomy",
      "title": "Střížkov",
      "image": {
        "src": "/assets/images/photos/projekt-strizkov-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-strizkov-986.webp 986w, /assets/images/photos/projekt-strizkov-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      },
      "url": "#"
    },
    {
      "locality": "Praha 9 – Dolní Počernice",
      "type": "Viladomy",
      "title": "Počernice",
      "image": {
        "src": "/assets/images/photos/projekt-pocernice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pocernice-986.webp 986w, /assets/images/photos/projekt-pocernice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      },
      "url": "#"
    },
    {
      "locality": "Praha 10 – Pitkovice",
      "type": "Viladomy",
      "title": "Pitkovice",
      "image": {
        "src": "/assets/images/photos/projekt-pitkovice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pitkovice-986.webp 986w, /assets/images/photos/projekt-pitkovice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      },
      "url": "#"
    },
    {
      "locality": "Praha 3 – Žižkov",
      "type": "Rezidence",
      "title": "Parková Čtvrť",
      "image": {
        "src": "/assets/images/photos/projekt-parkova-ctvrt-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-parkova-ctvrt-986.webp 986w, /assets/images/photos/projekt-parkova-ctvrt-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      },
      "url": "#"
    }
  ]
}

Varianta „single“

Vybraný projekt

Praha 4 – Háje

Rezidence

Jižní Terasy

Vzorová data (JSON)

{
  "title": "Vybraný projekt",
  "items": [
    {
      "locality": "Praha 4 – Háje",
      "type": "Rezidence",
      "title": "Jižní Terasy",
      "image": {
        "src": "/assets/images/photos/projekt-jizni-terasy-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-jizni-terasy-986.webp 986w, /assets/images/photos/projekt-jizni-terasy-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    }
  ]
}

Varianta „two“

Vybrané projekty

Praha 4 – Háje

Rezidence

Jižní Terasy

Praha 8 – Střížkov

Viladomy

Střížkov

Vzorová data (JSON)

{
  "title": "Vybrané projekty",
  "items": [
    {
      "locality": "Praha 4 – Háje",
      "type": "Rezidence",
      "title": "Jižní Terasy",
      "image": {
        "src": "/assets/images/photos/projekt-jizni-terasy-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-jizni-terasy-986.webp 986w, /assets/images/photos/projekt-jizni-terasy-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 8 – Střížkov",
      "type": "Viladomy",
      "title": "Střížkov",
      "image": {
        "src": "/assets/images/photos/projekt-strizkov-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-strizkov-986.webp 986w, /assets/images/photos/projekt-strizkov-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    }
  ]
}

Varianta „many“

Všechny projekty

Praha 4 – Háje

Rezidence

Jižní Terasy

Praha 8 – Střížkov

Viladomy

Střížkov

Praha 9 – Dolní Počernice

Viladomy

Počernice

Praha 10 – Pitkovice

Viladomy

Pitkovice

Praha 3 – Žižkov

Rezidence

Parková Čtvrť

Praha 9 – Prosek

Viladomy

Prosek Park

Praha 5 – Zličín

Viladomy

Zličín Gardens

Praha 6 – Ruzyně

Byty

Ruzyně

Vzorová data (JSON)

{
  "title": "Všechny projekty",
  "items": [
    {
      "locality": "Praha 4 – Háje",
      "type": "Rezidence",
      "title": "Jižní Terasy",
      "image": {
        "src": "/assets/images/photos/projekt-jizni-terasy-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-jizni-terasy-986.webp 986w, /assets/images/photos/projekt-jizni-terasy-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 8 – Střížkov",
      "type": "Viladomy",
      "title": "Střížkov",
      "image": {
        "src": "/assets/images/photos/projekt-strizkov-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-strizkov-986.webp 986w, /assets/images/photos/projekt-strizkov-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 9 – Dolní Počernice",
      "type": "Viladomy",
      "title": "Počernice",
      "image": {
        "src": "/assets/images/photos/projekt-pocernice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pocernice-986.webp 986w, /assets/images/photos/projekt-pocernice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 10 – Pitkovice",
      "type": "Viladomy",
      "title": "Pitkovice",
      "image": {
        "src": "/assets/images/photos/projekt-pitkovice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pitkovice-986.webp 986w, /assets/images/photos/projekt-pitkovice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 3 – Žižkov",
      "type": "Rezidence",
      "title": "Parková Čtvrť",
      "image": {
        "src": "/assets/images/photos/projekt-parkova-ctvrt-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-parkova-ctvrt-986.webp 986w, /assets/images/photos/projekt-parkova-ctvrt-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 9 – Prosek",
      "type": "Viladomy",
      "title": "Prosek Park",
      "image": {
        "src": "/assets/images/photos/projekt-strizkov-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-strizkov-986.webp 986w, /assets/images/photos/projekt-strizkov-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 5 – Zličín",
      "type": "Viladomy",
      "title": "Zličín Gardens",
      "image": {
        "src": "/assets/images/photos/projekt-pitkovice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pitkovice-986.webp 986w, /assets/images/photos/projekt-pitkovice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 6 – Ruzyně",
      "type": "Byty",
      "title": "Ruzyně",
      "image": {
        "src": "/assets/images/photos/projekt-jizni-terasy-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-jizni-terasy-986.webp 986w, /assets/images/photos/projekt-jizni-terasy-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    }
  ]
}

Varianta „edge“

Praha 9 – Dolní Počernice, ulice Národních hrdinů

Rezidence

Rezidence Jižní Terasy s výhledem na Hostivařskou přehradu

Praha 8 – Střížkov

Viladomy

Střížkov

Viladomy

Počernice

Praha 10 – Pitkovice

Pitkovice

Praha 3 – Žižkov

Rezidence

Parková Čtvrť — druhá etapa

Vzorová data (JSON)

{
  "ariaLabel": "Projekty — hraniční stavy",
  "items": [
    {
      "locality": "Praha 9 – Dolní Počernice, ulice Národních hrdinů",
      "type": "Rezidence",
      "title": "Rezidence Jižní Terasy s výhledem na Hostivařskou přehradu",
      "image": {
        "src": "/assets/images/photos/projekt-jizni-terasy-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-jizni-terasy-986.webp 986w, /assets/images/photos/projekt-jizni-terasy-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 8 – Střížkov",
      "type": "Viladomy",
      "title": "Střížkov"
    },
    {
      "locality": "",
      "type": "Viladomy",
      "title": "Počernice",
      "image": {
        "src": "/assets/images/photos/projekt-pocernice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pocernice-986.webp 986w, /assets/images/photos/projekt-pocernice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 10 – Pitkovice",
      "type": "",
      "title": "Pitkovice",
      "image": {
        "src": "/assets/images/photos/projekt-pitkovice-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-pitkovice-986.webp 986w, /assets/images/photos/projekt-pitkovice-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 3 – Žižkov",
      "type": "Rezidence",
      "title": "",
      "image": {
        "src": "/assets/images/photos/projekt-parkova-ctvrt-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-parkova-ctvrt-986.webp 986w, /assets/images/photos/projekt-parkova-ctvrt-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    },
    {
      "locality": "Praha 3 – Žižkov",
      "type": "Rezidence",
      "title": "Parková Čtvrť — druhá etapa",
      "image": {
        "src": "/assets/images/photos/projekt-parkova-ctvrt-986.jpg",
        "webpSrcset": "/assets/images/photos/projekt-parkova-ctvrt-986.webp 986w, /assets/images/photos/projekt-parkova-ctvrt-1972.webp 1972w",
        "alt": "",
        "width": 986,
        "height": 560
      }
    }
  ]
}

Varianta „spolupracujeme-pleskot“

Vybrané projekty

Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 1

Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 2

Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 3

Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 4

Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 5

Vzorová data (JSON)

{
  "settings": {
    "background": "white",
    "spacing_top": "none"
  },
  "title": "Vybrané projekty",
  "ariaLabel": "Vybrané projekty — Josef Pleskot",
  "tag": "p",
  "itemTag": "h4",
  "captions": false,
  "layout": "gallery",
  "items": [
    {
      "title": "Park Kavčí hory — snímek 1",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-pleskot-01-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-pleskot-01-986.webp 986w, /assets/images/photos/spolupracujeme-pleskot-01-1972.webp 1972w",
        "alt": "Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 1",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Park Kavčí hory — snímek 2",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-pleskot-02-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-pleskot-02-986.webp 986w, /assets/images/photos/spolupracujeme-pleskot-02-1972.webp 1972w",
        "alt": "Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 2",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Park Kavčí hory — snímek 3",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-pleskot-03-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-pleskot-03-986.webp 986w, /assets/images/photos/spolupracujeme-pleskot-03-1972.webp 1972w",
        "alt": "Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 3",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Park Kavčí hory — snímek 4",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-pleskot-04-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-pleskot-04-986.webp 986w, /assets/images/photos/spolupracujeme-pleskot-04-1972.webp 1972w",
        "alt": "Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 4",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Park Kavčí hory — snímek 5",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-pleskot-05-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-pleskot-05-986.webp 986w, /assets/images/photos/spolupracujeme-pleskot-05-1972.webp 1972w",
        "alt": "Model rezidenčního projektu Park Kavčí hory od architekta Josefa Pleskota — snímek 5",
        "width": 986,
        "height": 560
      }
    }
  ]
}

Varianta „spolupracujeme-jiricna“

Vybrané projekty

Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 1

Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 2

Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 3

Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 4

Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 5

Vzorová data (JSON)

{
  "settings": {
    "background": "white",
    "spacing_top": "none"
  },
  "title": "Vybrané projekty",
  "ariaLabel": "Vybrané projekty — Eva Jiřičná",
  "tag": "p",
  "itemTag": "h4",
  "captions": false,
  "layout": "gallery",
  "items": [
    {
      "title": "Centrum Nového Žižkova — snímek 1",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-jiricna-01-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-jiricna-01-986.webp 986w, /assets/images/photos/spolupracujeme-jiricna-01-1972.webp 1972w",
        "alt": "Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 1",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Centrum Nového Žižkova — snímek 2",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-jiricna-02-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-jiricna-02-986.webp 986w, /assets/images/photos/spolupracujeme-jiricna-02-1972.webp 1972w",
        "alt": "Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 2",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Centrum Nového Žižkova — snímek 3",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-jiricna-03-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-jiricna-03-986.webp 986w, /assets/images/photos/spolupracujeme-jiricna-03-1972.webp 1972w",
        "alt": "Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 3",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Centrum Nového Žižkova — snímek 4",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-jiricna-04-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-jiricna-04-986.webp 986w, /assets/images/photos/spolupracujeme-jiricna-04-1972.webp 1972w",
        "alt": "Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 4",
        "width": 986,
        "height": 560
      }
    },
    {
      "title": "Centrum Nového Žižkova — snímek 5",
      "image": {
        "src": "/assets/images/photos/spolupracujeme-jiricna-05-986.jpg",
        "webpSrcset": "/assets/images/photos/spolupracujeme-jiricna-05-986.webp 986w, /assets/images/photos/spolupracujeme-jiricna-05-1972.webp 1972w",
        "alt": "Vizualizace projektu Centrum Nového Žižkova od architektky Evy Jiřičné — snímek 5",
        "width": 986,
        "height": 560
      }
    }
  ]
}