YoxView

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.