jQuery plugins - Fancybox
jan 31

Fancybox

Egy tuti lightbox klón

Verzió: 1.3.4
Kiadás dátuma: 2010/11/11
Fejlesztő: Janis Skarnelis
Liszensz: MIT, GPL

Bevezető

A Fancybox személyében az egyik, talán legjobb lightbox klónnal ismerkedhetünk meg:

  • képek, tetszőleges HTML és iFrame tartalmak, flash mozik stb. megjelenítése
  • személyre szabható kinézet (CSS)
  • támogatott mousewheel (egérgörgő) funkció
  • easing plugin használatának támogatása
  • könnyű használat
  • igényes megjelenés
  • részletes testreszabhatóság, stb.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
          

Opcionálisan használhatóak az esasing (animációhoz) és a mousewheel (képváltáshoz) plugin-ok is:

            <script type="text/javascript" src="js/jquery.easing-1.3.pack.js"></script>
            <script type="text/javascript" src="js/jquery.mousewheel-3.0.4.pack.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $("#kep").fancybox();
            });
          

Teljes paraméterlista

  • padding: térköz pixel-ben a FancyBox konténere és tartalmi része közt (alapértelmezett: 10)
  • margin: térköz pixel-ben a viewport és a FancyBox konténere közt (alapértelmezett: 20)
  • opacity: áttetszőség engedélyezése/tiltása a képek közti váltáshoz (true | false)
    (alapértelmezett: false)
  • modal: modális funkció engedélyezése/tiltása (true | false) (alapértelmezett: false)
    Engedélyezése egyenértékű a következő beállítások használatával:
    overlayShow: true
    hideOnOverlayClick: false
    hideOnContentClick: false
    enableEscapeButton: false
    showCloseButton: false
  • cyclic: körkörös vetítési mód engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • scrolling: scrollbar engedélyezése/tiltása ('auto' | 'yes' | 'no') (alapértelmezett: 'auto')
  • width: iFrame és swf tartalom esetén a tartalom szélessége pixel-ben (alapértelmezett: 560)
  • height: iFrame és swf tartalom esetén a tartalom magassága pixel-ben (alapértelmezett: 340)
  • autoScale: a FancyBox automatikus méretezésének engedélyezése/tiltása a viewport-hoz
    (true | false) (alapértelmezett: true)
  • autoDimensions: inline és ajax tartalom esetén a beolvasott adatokhoz méretezés engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • centerOnScroll: az opció engedélyezése esetén a plugin scroll-ozás esetén is középre pozícionált marad (true | false) (alapértelmezett: false)
  • swf: a beágyazandó swf objektum paraméterei (alapértelmezett: { wmode: 'transparent' })
  • hideOnOverlayClick: az overlay területre klikkelésnél a plugin bezárásának engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • hideOnContentClick: a megjelenített tartalomra klikkelésnél a plugin bezárásának engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • overlayShow: az overlay réteg engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • overlayOpacity: az overlay réteg áttetszősége (alapértelmezett: 0.3)
  • overlayColor: az overlay réteg hexadecimális színkódja (alapértelmezett: '#666')
  • titleShow: cím használatának engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • titlePosition: a cím pozíciója ('outside' | 'inside' | 'over') (alapértelmezett: 'outside')
  • titleFormat: callback függvény a cím egyedi formázására
    (használatára példa a bemutató oldalon látható)
  • transitionIn, transitionOut: az áttünéshez használt animáció típusa ('fade' | 'elastic' | 'none')
    (alapértelmezett: 'fade')
  • speedIn, speedOut: az áttünés sebessége milliszekundumban (alapértelmezett: 300)
  • changeSpeed: eltérő képméretek esetén a méretezés sebessége milliszekundumban (alapértelmezett: 300)
  • changeFade: áttűnéskor a kép fade animációjának sebessége
    ('slow' | 'normal' | 'fast' | tetszőleges számérték milliszekundumban)
    (alapértelmezett: 'fast')
  • easingIn, easingOut: elastic animáció esetén használt easing effekt (alapértelmezett: 'swing')
  • showCloseButton: 'bezárás' gomb engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • showNavArrows: a következő/előző navigációs nyilak engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • enableEscapeButton: az escape gomb engedélyezése/tiltása a vetítés bezárásához (true | false) (alapértelmezett: true)
  • onStart: függvény meghívása a tartalom betöltése előtt
  • onCancel: függvény meghívása a betöltés megszakítását követően
  • onComplete: függvény meghívása a tartalom betöltődése/megjelenítése után
  • onCleanup: függvény meghívása a Fancybox bezárásának pillanatában
  • onClosed: függvény meghívása a Fancybox bezárását követően

Publikus metódusok:

  • $.fancybox.showActivity: a töltési animáció mutatása
  • $.fancybox.hideActivity: a töltési animáció elrejtése
  • $.fancybox.next: következő galéria elem mutatása
  • $.fancybox.prev: előző galéria elem mutatása
  • $.fancybox.pos: a galéria elemének sorszáma
  • $.fancybox.cancel: a töltési folyamat megszakítása
  • $.fancybox.close: a Fancybox bezárása
  • $.fancybox.resize: a Fancybox magasságának automatikus méretezése a megjelenített tartalom magasságához
  • $.fancybox.center: a Fancybox középre pozícionálása (viewport-hoz viszonyítva)

Tippek

  • Kép címének mutatása/elrejtése hover esemény hatására:
                    $('#pelda').fancybox({
                      titlePosition: 'over',
                      onComplete: function(){
                        $('fancybox-wrap').hover(function(){
                          $('#fancybox-title').show();
                        }, function(){
                          $('#fancybox-title').hide();
                        });
                      }
                    });