Zdeněk Hejl

Webový konzultant

  • Úvod
  • Blog
    • Inspirace
    • Návody
  • Doporučuji
    • Weby o byznys analýze
    • Weby o analýze a vizualizaci dat
    • Weby o Google Analytics a GTM
    • Weby o UX
    • Weby o e-commerce
  • O mně
    • Poskytnuté rozhovory
    • Publikované články
    • Moje prezentace
  • Napište mi
  • RSS

Jak vytvořit lightbox v Axure RP 7

20.10.2015 publikoval Zdeněk Hejl Leave a Comment Tagged With: Axure, Axure RP 7, Lightboxy, Prototypování, Wireframy Filed Under: Návody

Jak vytvořit lightbox v Axure RP 7

Jak vytvořit lightbox v Axure RP 7

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.

Axure: Základní prvky na stránce

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.

Axure: Vložení dynamického panelu

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.

Axure: Nastavení dynamického panelu

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.

Axure: Otevření dynamického panelu

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.

Axure: Vložení obsahu lightboxu

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.

Axure: Skrytí dynamického panelu

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.

Axure: Nastavení interakce tlačítka

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).

Axure: Zobrazení lightboxu po kliknutí na tlačítko

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.

  1. Googlebot nemá přístup k souborům CSS a JS. A co teď?

Napsat komentář Zrušit odpověď na komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Sledujte mě na

Něco o mně

Jmenuji se Zdeněk Hejl a jsem informační architekt a webový analytik. Mohu vám pomoci s návrhem nového webu i s optimalizací a růstem stávajícího webu.

Zajímám se o informační architekturu, informační design, optimalizaci konverzních poměrů, rychlost a výkonnost webů, použitelnost webů, SEO a v neposlední řadě také o analýzu, vyhodnocování, vizualizaci a reporting dat.

Doporučené služby a nástroje

Webhosting Savana.cz

Témata článků

Axure Axure RP 7 Call to action CSS Exit popup okna Google Googlebot Google Search Console JavaScript Lightboxy Popup okna Prototypování Robots.txt SEO Visual.ly Wireframy

Nejnovější články

  • Jak vytvořit lightbox v Axure RP 7 20.10.2015
  • Googlebot nemá přístup k souborům CSS a JS. A co teď? 29.7.2015
  • Visual.ly – Popup okno pro stažení ebooku 14.5.2015
  • Úvod
  • Blog
  • Doporučuji
  • O mně
  • Napište mi
  • RSS

Zdeněk Hejl, Tovární 154/2, 783 13 Štěpánov, IČ: 75312280, DIČ: CZ8501045806 - Jsem plátce DPH - Fyzická osoba zapsaná od 01.07.2009 v Živnostenském rejstříku vedeném na Magistrátu města Olomouce