jQuery plugins - Lightbox_me
júl 12

Lightbox_me

Egy egyszerű lightbox plugin

Verzió: 2.0
Kiadás dátuma: 2009
Fejlesztő: Buck Wilson
Liszensz: Apache

Bevezető

A Lighbtox_me (a nevéből is egyértelműen adódik) egy lightbox plugin, amely bár képességivel nem váltja meg a világot, de mindenképp hasznos kis modul, nagyon egyszerűen használható és bármely DOM elemhez rendelhetjük!

Segítségével könnyedén hozhatunk létre lightbox-ot űrlapjainknak, megjelenítendő üzeneteinknek, stb., de aki képeket/videókat/weblapokat szeretne így megjeleníteni, annak ez a plugin kevés lesz
(tipp: prettyPhoto plugin).

Implementálás

HTML kód szintjén hozzuk létre a rejtett (CSS: display: none) objektumot, amelyet lightbox-ban szeretnénk megjeleníteni. Hogy a plugin-t az adott objektumra érvényesíthessük, egyedi azonosítóval kell ellátnunk
(pl. id="myObject").

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/lightbox_me.js"></script>
          

Deklaráció

            $(document).ready(function() {
              $('#myObject').lightbox_me();
            });
          

Teljes paraméterlista

  • appearEffect: a modális ablak megjelenítéséhez használt effekt (alapértelmezett: fadeIn).
  • overlaySpeed: az overlay-animáció időtartama/sebessége
    (érték milliszekundumban | slow | normal | fast)
    (alapértelmezett: 300).
  • lightboxSpeed: a lightbox animáció időtartama/sebessége
    (érték milliszekundumban | slow | normal | fast)
    (alapértelmezett: 'fast').
  • closeSelector: jQuery szelektor, melyhez rendelni szeretnénk a lightbox 'close' eseményét (alapértelmezett: '.close').
  • closeClick: a modális ablak bezárásának engedélyezése/tiltása az overlay-re klikkelés esetén
    (alapértelmezett: true).
  • closeEsc: a modális ablak bezárásának engedélyezése/tiltása ESC billentyűre
    (alapértelmezett: true).
  • destroyOnClose: a lightbox-ban megjelenített DOM elem megsemmisítésének engedélyezése/tiltása a modális ablak bezárásakor
    (alapértelmezett: false).
  • onLoad: függvény, mely a modális ablak teljes megjelenése után (animáció végén) kerül meghívásra.
  • onClose: függvény, mely a modális ablak teljes bezárása után (animáció végén) kerül meghívásra.
  • classPrefix: az overlay CSS osztályának prefix-e (alapértelmezett: 'lb').
  • zIndex: az overlay Z-index-e. Az iFrame +1, a modális ablak +2 szint (alapértelmezett: 999).
  • centered: a modális ablak vertikálisan középre igazításának engedélyezése/tiltása
    (alapértelmezett: false).
  • modalCSS: CSS formázás a modális ablakra. Amennyiben a paraméterben definiálunk egy 'top' értéket és a centered paramétert engedélyezzük, akkor utóbbi paraméter felülbírálja a CSS formázást! (alapértelmezett: {top: '40px'}).
  • overlayCSS: CSS formázás az overlay-hez (alapértelmezett: {background: 'black', opacity: .6}).