
YoxView
A lightbox-ok svájci bicskája
Verzió: | 2.2 |
Kiadás dátuma: | 2010/11/13 |
Fejlesztő: | Yossi Kolesnicov |
Liszensz: | MIT |
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.