jQuery plugins - prettyPhoto
aug 03

prettyPhoto

Lightbox klón jQuery-vel

Verzió: 2.5.6
Kiadás dátuma: nincs adat
Fejlesztő: Stephane Caron
Liszensz: Creative Commons Attribution 2

Bevezető

Végre sorra került a lightbox_me plugin-nál beígért "fullos" lightbox-klón bemutatása, amely alkalmas képek, flash videók, YouTube és iFrame tartalmak megjelenítésére egyaránt, és kompatibilis minden ismertebb böngészővel.

Implementálás

CSS

            <link type="text/css" rel="stylesheet" href="css/prettyPhoto.css"/>
          

JavaScript

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

Deklaráció

            $(document).ready(function() {
              $("a[rel^='prettyPhoto']").prettyPhoto();
            });
          

Használat

A képek beszúrása:

            <a href="1.jpg" rel="prettyPhoto" title="cím">
              <img src="1-thumb.jpg" width="60" height="60" alt="" />
            </a>
          

Fenti kód egy önálló képet jelenít meg. Ha egy galériát szeretnénk (azaz több képet szeretnénk egyetlen prettyPhoto-ba ágyazni), akkor a link rel attribútuma így módosul:

            <a href="1.jpg" rel="prettyPhoto[galeria-azonosito]" title="cím">
              <img src="1-thumb.jpg" width="60" height="60" alt="" />
            </a>
          

Természetesen lehetőség van a plugin használatára API segítségével is (megnyitás, léptetés, bezárás):

            $.prettyPhoto.open('images/fullscreen/image.jpg','Cím','Leírás');
            $.prettyPhoto.changePage('next');
            $.prettyPhoto.changePage('previous');
            $.prettyPhoto.close();
          

Teljes paraméterlista

  • animationSpeed: az animáció sebessége (fast | normal | slow) (alapértelmezett: normal).
  • opacity: a modális ablak áttetszősége [0..1] (alapértelmezett: 0.8).
  • showTitle: a cím megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: true).
  • allowresize: ha nagyméretű képet jelenítünk meg, a plugin alapértelmezettként a képernyőhöz méretezi és elhelyez egy ikont a jobb felső sarokban, amivel teljes méretre lehet átváltani. Ezzel a paraméterrel tiltható/engedélyezhető ez a funkció (true | false) (alapértelmezett: true).
  • default_width: a modális ablak alapértelmezett szélessége (alapértelmezett: 500).
  • default_height: a modális ablak alapértelmezett magassága (alapértelmezett: 344).
  • counter_separator_label: elválasztó karakter a képszámlálóhoz a modális ablak alján
    (pl. 1 / 6, 1 of 6, stb.) (alapértelmezett: /).
  • theme: a plugin-hoz járó előre definiált téma
    (light_rounded | dark_rounded | light_square | dark_square | facebook)
    (alapértelmezett: light_rounded).
  • hideflash: az oldalon található flash tartalmak a modális ablak megjelenítésekor "kiugranak" az oldalból, ami zavaró lehet. Ezzel a paraméterrel szabályozható, hogy modális ablak esetén minden, az oldalba ágyazott flash tartalom rejtve maradjon (true | false) (alapértelmezett: false).
  • wmode: a modális ablakban megjelenített flash tartalmak wmode paramétere
    (opaque | transparent) (alapértelmezett: opaque).
  • autoplay: a megjelenített video tartalmak automatikus elindítása (true | false) (alapértelmezett: true).
  • modal: a modális ablak működését befolyásolhatjuk ezzel a paraméterrel. Ha igaz-ra állítjuk, akkor a modális ablak csak a bezárás gombbal zárható be (true | false) (alapértelmezett: false).
  • changepicturecallback: függvény, amely meghívásra kerül minden elem
    megjelenítése/változása után
  • callback: függvény, amely a prettyPhoto bezárásakor kerül meghívásra

Bár a felsorolás címe "teljes" listát ígér, a fenti paraméterlista nem teljes. Ezeken felül még lehetőség van pl. a modális ablak, a beágyazott flash tartalmak, iFrame-k, stb. HTML kódját módosítani (amihez természetesen a CSS kódot is akkor célszerű hozzá igazítani). Úgy gondolom, ezeket a paramétereket felesleges kivesézni, mert a plugin önmagában (alapállapotában) is megállja a helyét.

Ha valaki mégis vágyik ezek részletesebb megismerésére, az látogasson el a fejlesztő honlapjára.
És hogy a fenti lista mégis teljes legyen, szerepeljenek itt a listából kimaradt paraméterek felsorolás szintjén:

  • markup
  • image_markup
  • flash_markup
  • quicktime_markup
  • iframe_markup
  • inline_markup

Tippek

  • A plugin a jQuery 1.4.2-es verziójával működik, azonban pl. az 1.6.1-es verzióval már nem, vagy nem megfelelően!