Magnific Popup – zajímavý lightbox skript

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

• PhotoSwipe