jQuery plugins - YoxView
feb 11

YoxView

A lightbox-ok svájci bicskája

Verzió: 2.2
Kiadás dátuma: 2010/11/13
Fejlesztő: Yossi Kolesnicov
Liszensz: MIT
  • 2735
  • 12711
  • 0
  • -

Bevezető

Számos lightbox klón lelhető fel a neten, melyek száma hétről-hétre folyamatosan gyarapszik. Mindezek ellenére elmondható, hogy ezek funkciójukban nem igazán különböznek egymástól. Ritkaság számba megy, ha egy plugin képes valami újat felmutatni: a verseny leginkább a kinézetre és a jó paraméterezhetőségre korlátozódik, illetve ritkább esetben a minél kisebb plugin méretre.

A YoxView a ritkaság kategóriába sorolandó, mivel olyan funkciókat hoz magával, amelyek nem mondhatók hétköznapinak. Ilyen például a nyelvi támogatás, a skin-ezhetőség, de például saját beépülő modulok segítségével akár Picasa vagy Flickr galériákat is integrálhatunk az oldalunkba, továbbá reguláris kifejezés segítségével a szerverről dinamikusan lekért képekre is (pl. .../image.php?id=2) alkalmazhatjuk a plugin-t.

Mindezeken felül a YoxView plugin rengeteg opciót biztosít számunkra, hogy a lehető legkönnyebben tudjuk azt a számunkra megfelelő módon beépíteni oldalunkba.

Jellemzők

  • könnyű implementálás
  • képek, videók, flash mozik, iFrame és inline tartalmak kezelése
  • testreszabható kinézet (skin-ek használata)
  • drupal és wordpress modulok
  • többnyelvűség (magyar nyelvi csomag is létezik!)
  • navigáció billentyűkkel
  • automatikus lejátszási mód
  • saját beépülő modulok (képek beolvasása külső forrásból: picasa, flickr, youtube )
  • kompatibilitás: Firefox, Opera, Google Chrome, Safari, Internet Explorer

Implementálás

A plugin beágyazásához - amennyiben a file struktúra megfelelő (lásd a letölthető állományt) - elegendő csupán a yoxview-init.js állomány meghívása, amely automatikusan "berántja" a szükséges CSS és a további JavaScript állományokat:

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/yoxview-init.js"></script>
          

Deklaráció

            $(document).ready(function(){
              $('#pelda').yoxview();
            });
          

Használat

Lightbox plugin-ok esetén a bevált módszer, hogy a plugin-t egy CSS osztályhoz rendeljük, majd ezt az osztályt adjuk minden olyan linknek, amelyet a plugin-nal szeretnénk megjeleníteni.

A YoxView itt is kicsit más utakon jár: a plugin-t nem magukhoz a linkekhez rendeljük, hanem azok konténer eleméhez, pl.:

            <div id="pelda">
              <a href="img1.jpg"><img src="img1-thumbnail.jpg" alt="" title=""/></a>
              <a href="img2.jpg"><img src="img2-thumbnail.jpg" alt="" title=""/></a>
              <a href="img3.jpg"><img src="img3-thumbnail.jpg" alt="" title=""/></a>
              ...
            </div>
          

Teljes paraméterlista

  • allowedUrls: reguláris kifejezés az engedélyezett kép-URL-ekhez. Alaphelyzetben a plugin olyan URL-eket fogad el, amelyek .jpg, .jpeg, .png vagy .gif végződéssel rendelkeznek, azonban az opció segítségével ezt módosíthatjuk. A paraméter akkor nyújthat nagy segítséget, ha a képeket dinamikusan szolgáltatja a szerverünk, azaz nem konkrét képre hivatkozunk, hanem például egy PHP állományra, amely egy azonosító alapján adja vissza a keresett képet.
    Például egy '/image.php?id=956' formájú URL esetén a reguláris kifejezés így alakulna:
                    /\/image.php\?id=(?:\d+)$/i
                  
  • allowInternalLinks: helyi linkek/horgonyok beolvasásának engedélyezése a plugin számára
    (true | false) (alapértelmezett: false)
  • autoHideInfo: információs sáv (képek száma, cím) elrejtése (true | false) (alapértelmezett: true)
  • autoHideMenu: menü elrejtése (true | false) (alapértelmezett: true)
  • autoPlay: automatikus lejátszás engedélyezése/tiltása (true | false) (alapértelmezett: false)
  • backgroundColor: az overlay réteg hexadecimális színkódja - nem támogatott a rövidített, 3 jegyű írásmód! (alapértelmezett: '#000000')
  • backgroundOpacity: az overlay réteg áttetszősége [0..1] (alapértelmezett: 0.8)
  • buttonsFadeTime: a gombok mutatásának időtartama milliszekundumban - 0 érték esetén a gombok folyamatosan látszanak (alapértelmezett: 500)
  • cacheImagesInBackground: nagyméretű képek cahce-elésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • cacheBuffer: a cache-elendő képek száma - 0 érték esetén az összes kép egyszerre lesz cahche-elve (alapértelmezett: 5)
  • controlsInitialFadeTime: a navigációs gombok megjelenésének/eltűnésének sebessége (ideje) milliszekundumban (alapértelmezett: 1500)
  • controlsInitialDisplayTime: a navigációs gombok mutatásának időtartama milliszekundumban a popup ablak megnyitását követően. 0 érték estén a gombok nem látszanak. (alapértelmezett: 1000)
  • dataFolder: a plugin mappa útvonala (alapértelmezett: yoxviewPath + 'data/')
  • dataUrl: URL, mellyel képeket lehet betölteni a Picasa, illetve a Flickr oldalakról
    (példa a bemutató oldalon)
  • defaultDimensions: a megjelenített tartalom alapértelmezett mérete (szélesség / magasság) (alapértelmezett: '{ flash: { width: 720, height: 560 }, iframe { width: 1024 } }')
  • flashVideoPlayer: a flash tartalom megjelenítéséhez használt lejátszó
    (jelenleg csak a jwplayer támogatott) (alapértelmezett: 'jwplayer')
  • flashVideoPlayerPath: a flash tartalom megjelenítéséhez használt lejátszó útvonala (alapértelmezett: '/jwplayer/player.swf')
  • infoBackOpacity: az információs sáv (képek száma, cím, stb.) áttetszősége [0..1]
    (alapértelmezett: 0.5)
  • infoBackColor: az információs sáv hexadecimális színkódja - nem támogatott a rövidített, 3 jegyű írásmód! (alapértelmezett: '#000000')
  • infoButtons: saját gombok hozzáadása az információs sávhoz
    (bővebb információkért lásd a plugin honlapját)
  • imagesFolder: a plugin által használt grafikai elemek mappája
    (alapértelmezett: yoxviewPath + 'images/')
  • isRTL: a következő/előző gombok irányának felcserélése - pl. arab és héber nyelv esetén
    (true | false) (alapértelmezett: false)
  • lang: használt nyelvi csomag a gombok feliratához/tooltip-jéhez.
    A támogatott nyelvi csomagok megtalálhatók a plugin honlapján (alapértelmezett: 'en')
  • langFolder: a nyelvi csomag útvonala (alapértelmezett: yoxviewPath + 'lang/')
  • linkToOriginalContext: engedélyezése esetén megjelenik így kis ikon az információs sáv jobb oldalán, amely link a képre az eredeti kontextusában - az opció a külső forrásból
    (pl. picasa, flickr) beolvasott képekre értendő! (true | false) (alapértelmezett: true)
  • loopPlay: végtelen lejátszási mód engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • menuBackgroundColor: a menüsáv hexadecimális színkódja - nem támogatott a rövidített, 3 jegyű írásmód!
    Csak az rgba funkciót (CSS 3) támogató böngészőkben érhető el, pl. IE-ben a 8-as előtti verziókban nem működik! (alapértelmezett: '#000000')
  • menuBackgroundOpacity: a menüsáv áttetszősége.
    Csak az rgba funkciót (CSS 3) támogató böngészőkben érhető el, pl. IE-ben a 8-as előtti verziókban nem működik! [0..1] (alapértelmezett: 0.8)
  • playDelay: automatikus lejátszás esetén az egyes képek mutatásának időtartama milliszekundumban (alapértelmezett: 3000)
  • popupMargin: a minimális képpontok száma a plugin és az ablak közt. Az értékadás a CSS szabályai szerint történik - mértékegység nélkül!
    Példák:
    '20' - mindenhol 20px
    '20 40' - fönt és lent 20px, bal- és jobboldalt 40px
    '20 30 40' - fönt 20px, bal- és jobboldalt 30px, lent 40px
    '20 30 40 50' - fönt 20px, jobboldalt 30px, lent 40px, baloldalt 50px
    (alapértelmezett: 20)
  • popupResizeTime: a plugin átméretezésének sebessége (ideje) milliszekundumban. Az animáció a 0 értékkel letiltható (alapértelmezett: 600)
  • renderButtons: az előző/következő gombok használatának engedélyezése/tiltása - pl. ha az API segítségével saját navigációs gombokat szeretnénk használni (true | false) (alapértelmezett: true)
  • renderInfo: az opció tiltásával lehetőség van rá, hogy saját információs sávot használhassunk a plugin-ban (true | false) (alapértelmezett: true)
  • renderInfoExternally: az opció segítségével az információs sávot a popup ablakon kívülre pozícionálhatjuk (true | false) (alapértelmezett: false)
  • renderInfoPin: a rögzítő gomb (pin/unpin) engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • renderMenu: menü használatának engedélyezése/tiltása - pl. ha az API segítségével saját menüt szeretnénk használni (true | false) (alapértelmezett: true)
  • showBarsOnOpen: a popup megnyitásakor a felső és az alsó információs sáv rövid idejű megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • showButtonsOnOpen: a popup megnyitásakor a navigációs gombok rövid idejű megjelenítésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • showDescription: az importált információk (Flickr, YouTube, JSON adatok) megjelenítésének engedélyezése/tiltása az információs sávon (true | false) (alapértelmezett: true)
  • skin: a plugin-hoz használt skin neve (jelenleg csak egyetlen skin érhető el: 'top_menu')
  • textLinksSelector: jQuery szelektor olyan linkek azonosítására, amelyek nem bélyegképek (thumbnail), mégis a plugin-nal kívánjuk megjeleníteni - pl. egy link, amely egy képre hivatkozik (alapértelmezett: '.yoxviewLink')
  • thumbnailsOptions: bélyegképek (thumbnails) testreszabása.
    Bővebb információ a plugin honlapján (alapértelmezett: { thumbnailsClass: 'yoxview_thumbnail' })
  • titleAttribute: a bélyegkép azon attribútuma, amelyből a plugin beolvassa a kép címét
    (alapértelmezett: 'title')
  • titleDisplayDuration: a cím mutatásának időtartama milliszekundumban (alapértelmezett: 2000)
  • titlePadding: padding érték képpontban a címekhez (alapértelmezett: 6)

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!
  • Frostech0 és Légrádi Zoltán (legradi.zoltan@freemail.hu) elkészítették a YoxView javítását, amely segítségével a plugin együttműködik már a jQuery keretrendszer 1.9.1-es verziójával is, továbbá a csomag tartalmaz egy új skin-t is, amelyhez plusz paraméterek kapcsolódnak:
    • zolee_play_hidden: Play gomb elrejtése (true | false) (alapértelmezett: false)
    • zolee_lr_hidden: Jobbra/balra gombok elrejtése (true | false) (alapértelmezett: false)
    • zolee_close_hidden: Bezárás gomb elrejtése (true | false) (alapértelmezett: false)

    A javítócsomag használatához mindössze felül kell írni az eredeti fájlokat a letölthető állományban található fájlokkal: javítócsomag letöltése.