Navhrujete-li prototypy webů v Axure RP 7, určitě jste již někdy narazili na potřebu vytvořit lightbox. Lightboxy se dají například využít pro zobrazení fotogalerie, kontaktního formuláře nebo doplňujících informací. Dnes vám ukážu, jak navrhnout jednoduchý textový lightbox, který se zobrazí po kliknutí na tlačítko.

1. Příprava základních prvků

Nejdříve je nutné mít připravené základní prvky na stránce, z nichž jeden bude interaktivní prvek, který způsobí zobrazení lightboxu. V tomto případě to bude tlačítko.

2. Vytvoření dynamického panelu

Jakmile máte připravené základní prvky, vytvořte si dynamický panel, který bude sloužit jako lightbox. Přetáhněte myší widget Dynamic panel do návrhu stránky.

3. Nastavení vlastností dynamického panelu

Klikněte na dynamický panel v návrhu stránku. Dynamickému panelu můžete nastavit jméno (viz značka 1), abyste ho mohli rozpoznat mezi dalšími dynamickými panely na stránce, máte-li jich tam více.

Chcete-li mít lightbox umístěný vždy v prohlížeči na středu stránky, tak klikněte na odkaz Pin to Browser (viz značka 2), nastavte hodnoty podle screenshotu a potvrďte kliknutím na OK (viz značka 3). Pokud chcete zobrazovat lightbox přesně na tom místě, na které jste ho umístili v návrhu, tak můžete poslední krok vynechat.

4. Nastavení obsahu dynamického panelu

Samotný obsah dynamického panelu/lightboxu nastavíte tak, že dvakrát kliknete na položku State1 u vašeho dynamického panelu ve Widget Manageru.

Otevře se vám návrhář lightboxu, do kterého můžete umístit libovolné Axure widgety. Nejjednodušší je umístit do návrhu widget Rectangle a vložit do něj text, který můžete klasicky formátovat.

5. Nastavení interakce pro zobrazení lightboxu

V tuto chvíli již máte vytvořeny základní prvky stránky, tlačítko i lightbox s obsahem. Je však potřeba nějakým způsobem propojit kliknutí na tlačítko a zobrazení lightboxu. Nejprve musíte skrýt dynamický panel, aby se nezobrazoval hned při načtení stránky. Toho dosáhnete pravým klikem na dynamický panel a zvolením položky Set Hidden.

Dále klikněte na tlačítko, které má spouštět lightbox a v panelu Widget Name and Interactions dvakrát klikněte na položku OnClick. Zobrazí se vám Case Editor, kde lze nastavit potřebné interakce.

V rámci Case Editoru nejdříve zvolte z levého sloupce položku Show (viz značka 1) a v pravém sloupci vyberte váš navržený dynamický panel (viz značka 2). Vpravo dole se vám zobrazí další možnosti interakce a zde vyberte z rozbalovacího seznamu More Options položku Treat as lightbox (viz značka 3).

Můžete také nastavit, jaká animace se využije pro zobrazení lightboxu nebo jaká bude barva pozadí při zobrazení lightboxu.

6. Publikování a otestování funkčnosti

Jakmile máte vše nastavené podle tohoto návodu, můžete si zobrazit náhled prototypu ve webovém prohlížeči, vygenerovat si HTML soubory nebo vše publikovat na Axure Share.

Výsledek si můžete prohlédnout přímo na webu. Stáhnout si můžete také přímo podkladový soubor pro Axure RP 7.

Pokud vás článek zaujal a myslíte si, že by jej ocenili i někteří vaši známí, tak jej sdílejte na sociálních sítích. Máte-li nějaký dotaz k tomuto článku nebo k Axure obecně, napište mi do komentářů pod článkem.