„Lightbox“ Magnific Popup

Web Magnific Popup Dokumentace

Na stránce projektu se lze podívat na hezké řešení vyskakovacích oken pomocí lightboxu.

Zajímavý je rovněž postup tvorby, ze kterého je vidět, že autor věděl, co dělá.

  1. Celé vyskakovací okno je tvořeno pomocí CSS a plynule se přizpůsobuje velikosti plochy prohlížeče, nemůže se stát, že JavaScript šířku/výšku špatně vypočte,
  2. Magnific Popup neprovádí zdlouhavé otravné animace
  3. obrázky v galerii lze pohodlně přednačítat a dokonce nastavit počet preloadovaných obrázků zvlášť pro přechod zpět i vpřed,
  4. lze ovládat klávesami (šipky doprava a doleva, klávesou Esc se lightbox zavře),
  5. rozumný HTML kód a funkčnost bez JS — co by se s JS mělo otvírat ve vyskakovacím okně se otevře běžným odkazem,
  6. možnost vyskakovací okno lehce vypnout např. při nízké šířce okna,
  7. ovládací prvky jsou nakresleny pomocí CSS, neplýtvá se tedy HTTP spojeními na obrázek/obrázky,
  8. předvídatelné ovládání, jednotlivé prvky kolem sebe mají polštář, ve kterém jsou stále klikací,
  9. kvalitní dokumentace.

Nevýhody?

  1. Dobře funkční až od Internet Exploreru 8, částečně od IE 7.
  2. Pro frameworkové odpůrce: závislé na jQuery/Zepto.js.

Příklady použití

Vstupní stránka

Kromě zobrazení na vyžádání (po kliknutí na tlačítko a podobně) je možné lightbox zobrazit ihned po načtení. Ukázka (další možnosti vytvoření vstupní stránky).

Jako src je možné nastavit i kus HTML kódu.

window.onload = function (){
  $.magnificPopup.open({
      items: [
        {
          src: $('<div class="popup">Vstupní vyskakovací okno</div>'),      
        }
      ]
  });
}

Zobrazení HTML stránky

Docílit se dá nejen zobrazování obrázků, ale i jiných HTML stránek.

  • V <iframe>. Ukázka.
    $("#tlacitko").magnificPopup({
        items: [{
            type: 'iframe',
            src: 'http://example.com',       
          }]
    });
    
  • Z vlastní domény to jde kromě toho i AJAXem.
    <a href="/url-stranky" class="ajax">Odkaz, jehož cíl se načte AJAXem do lightboxu</a>
    <script>
      $('.ajax').magnificPopup({type: 'ajax'});
    </script>

Odkazy jianm

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Framework Zepto.js

JavaScriptový framework Zepto.js

Odlehčená JS knihovna nabízející základní funkce jQuery ve zmenšené podobě.

CSS framework Kraken

CSS framework Kraken

Kromě populárního CSS frameworku Bootstrap existují i další zajímavé. Kraken je jeden takový.

Flat UI

Flat UI framework

Flat UI nabízí hotové uživatelské rozhraní založené na Bootstrapu, má smysl jej používat?

Semantic UI

Semantic UI

Semantic UI je CSS framework. Co nabízí a jak funguje?

CSS resetování

Způsoby CSS resetování

Používat CSS reset, nebo ne? Jaká jsou pro a proti.

Komentáře