A clearbox egy professzionális virtuális kép- és tartalommegjelenítő alkalmazás. Az alábbi képek magukért beszélnek, rájuk kattintva néhány példában bemutatkozik a script: kép galériák és számos más tartalomtípus, többek között: Flash, Quicktime, Windows Media formátumok, HTML, belső tartalom megjelenítése egyedi, modern külsővel!
A clearbox használata magán célra ingyenes. Amennyiben kereskedelmi jellegű oldalon vagy kereskedelmi tevékenységgel összegüffően szeretné felhasználni, érdeklődjön a készítőnél.
Kép galéria
Zöld
kattintson a képekre...
Vegyes galéria
Különböző tartalomtípusokkal
Kompromisszumok nélkül kombinálható és létrehozható!
Újdonságok a clearbox 3-ban Szinte minden :) A script sokkal 'okosabb' lett. Látható, hogy a képeken kívül számos új formátummal megbírkózik (természetesen némelyikhez a böngészőnek rendelkeznie kell a megfelelő pluginnel), de a használata is nagyban változott. Megváltoztattam és logikusabbá tettem a script mappastruktúráját, beépítettem a többnyelvűség támogatását és számos új felhasználói beállítást. Bele került egy új animáció típus is, a 'grow'. És talán az egyik legfontosabb az, hogy a clearbox most már az oldal teljes betöltődése ELŐTT is működik! Továbbá, a clearbox 3-ban a cím alá még egy hosszabb komment jellegű szöveg is írható. A clearbox által megjelenített képek elforgathatóak (Internet Explorerben ez az opció nem működik) és OSD segíti a program használatát.
A clearbox telepítése
Töltse le a scriptet és tömörítse ki! Egy clearbox.js nevű fájlt és egy clearbox nevű mappát fog látni. Másolja be ezeket a weboldalát tartalmazó mappába!
A clearbox mappában találhatók a script összetevői, amely három részre különül:
a core mappa magát a script tömörített változatát tartalmazza - ezzel nincs semmi teendő.
a language mappában találhatóak a különböző nyelvi fájlok. Könnyen létrehozható és hozzáadható új nyelv a scripthez!
a config a legfontosabb mappa: itt találhatóak a már létrehozott konfigurációk beállításai. Nagyon könnyű új konfigurációs beálításokat létrehozni és ezzel testreszabi a scriptet! Akár teljesen eltérő megjelenés is létrehozható! Külön meglepetésként a clearbox 3-hoz az alap konfiguráción kívül létrehoztam egy másikat - grow_transparent néven!
Illessze be az alábbi sort a weboldalának header részébe:
Természetesen a clearbox.js fájl bárhova elhelyezhető.
Néhány beállítás található a clearbox.js-ben:
CB_SrciptDir, amely a clearbox nevű mappa helyét adja meg. Az elérési utat mindig ahhoz a html fájlhoz képest kell megadni, amely a fent clearbox.js-re való hivatkozást tartalmazza! Természetesen abszolút elérési út is használható.
CB_Language, amellyel megadható a clearbox alapértelmezett-beli nyelvi beállítása.
Saját konfiguráció betöltéséhez a config paraméter használható:
ahol myconfig annak a mappának a neve a clearbox/config mappán belül, amely a beállításokat és a fájlokat tartalmazza.
Ezen kívül a CB_SrciptDir beállítható a dir, a CB_Language pedig a lng paraméter használatával az alábbi módon:
Egyéb kód - pl. CSS fájl megadása - nem szükséges!
A clearbox használata Adjuk hozzá a rel="clearbox" kifejezést az <a> tag-ekhez, hogy aktiváljuk a scriptet! A title egy opcionális paraméter, amellyel címet vagy képaláírást adhatunk a megjelenítendő tartalomnak.
Alapállapotban nem szükséges megadni a megjeleníteni kívánt tartalom típusát, a clearbox ugyanis képes automatikusan felismerni azokat! Például egy MP3 fájl lejátszásához pontosan ugyanazt a kifejezést kell használni az opcionális title paraméterrel:
Galériák létrehozása Képekből álló, vagy vegyes tartalmakat megjelenítő galéria létrehozásához az alábbi módon PONTOSAN UGYANAZT a nevet kell megadni a galéria összes elemének (ez a név lesz a galéria neve):
<a href="b.mp3" rel="clearbox[gallery=My Gallery]">sample music</a>
<a href="http://www.youtube.com/v/myrmovieid" rel="clearbox[gallery=My Gallery]">sample youtube</a>
Egy galéria minimum két elemből kell, hogy álljon!
Tartalom típusok és felismerésük A clearbox a href attribútum alapján az alábbi tartalmakat automatikusan felismeri:
Kép formátumok: BMP, GIF, JPG, JPEG, PNG
Videó formátumok: AVI, MOV, MPG, MPEG, WMV
Audió formátumok: MP3, WAV, WMA
Flash: SWF
Belső tartalom: inner#id
HTML tartalom: ha a href-nek a htmlcontent#x kifejezést adjuk
Iframe tartalom: http://... - bármely weblap megjeleníthető a script segítségével
és YouTube hivatkozások is használhatóak a következő formátumban:
http://www.youtube.com/v/mymovieid
Példák: Belső tartalom: adjuk az inner# kifejezést ÉS a megjeleníteni kívánt objektum id-jét a href-nek. A clearbox ekkor megjeleníti a megadott objektumot és automatikusan felveszi annak stílus-beállításait, a méretét is.
HTML: Bármilyen HTML kód (beleértve a szöveget és az összes HTML tag-et) megjeleníthető. Ha egy galériában több HTML típusú elem is szerepel, használd a htmlcontent#1, htmlcontent#2, stb. kifejezéseket a megkülönböztetésre. Fontos! Eben az esetben meg kell adni egy html nevű paramétert is a rel tag-en belül! A paraméterekről bővebben lejjebb olvashatsz.
Iframe:
YouTube:
Videó:
Audió:
A clearbox paraméterei Amint az már a fentiekben kiderült, a paraméterek megadásához szögletes zárójeleket - [ ] - használunk de többféle paraméter van, amik akár együtt is használhatóak. Fontos! Amennyiben több paraméter van megadva, azokat egymástól dupla vesszővel - ,, - KELL elválasztani és a paramétereknek az egyenlőségjellel = adhatóak értékek! Idézőjelet nem kell használni!
Az alábbi - opcionális - paraméterek használhatóak:
gallery
A galéria neve. Legalább két elemnek szükséges megadni. Egy oldalon tetszoleges számú galéria létrehozható!
HASZNÁLATA: gallery=My Gallery Name
href
Ezzel a paraméterrel is megadható a megjeleníteni kívánt tartalom elérési útja. Például abban az esetben, ha mást kell megjeleníteni a clearbox-ban, mint ami az <a> tag-ben meg van adva.
HASZNÁLATA: href=mycontent
type
Ezzel a paraméterrel felülírható a clearbox automatikus tartalom-felismerése. Értékei lehetnek: flash, html, iframe, image, inner, quicktime, winmedia.
HASZNÁLATA: type=flash
title
Ha nem akarjuk az <a> tag title attribútumát használni, akkor a cím ill. képaláírás megadható a rel tag-ben is :)
HASZNÁLATA: title=My Title
width
Megadható a megjeleníteni kívánt tartalom szélessége. Ha például egy 200 pixel széles Flash tartalmat szeretnénk megjeleníteni, adjuk meg a 200-as értéket!
HASZNÁLATA: width=200
height
Természetesen a szélesség is megadható.
Jó tudni, hogy ez a két paraméter képeknél is muködik, így akár lehetoség van arra is, hogy torzítva jelenítsünk meg képeket!
HASZNÁLATA: height=200
tnhrf
Csak galériáknál használható! Megadható az elemhez tartozó thumbnail kép elérési útja. FONTOS! A ClearBox 2-es verziójában ez a paraméter tnhref-ként szerepelt, de a clearbox 3-ban tnhrf, 'e' betu nélkül! Elnézést a változtatásért!
HASZNÁLATA: tnhrf=mythumbnails/mythumbnail.jpg
slideshowtime
Csak képgalériáknál használható! Különbözo slideshow idotartamok adhatók meg az elemeknek (másodpercben)!
HASZNÁLATA: slideshowtime=10
autoslideshow
Csak képgalériáknál használható! Amennyiben meg van adva a paraméter, a slideshow automatikusan el fog indulni az adott elemnél. Ennek a paraméternek nem kell értéket adni!
HASZNÁLATA: autoslideshow
comment
Ezzel a paraméterrel komment írható az adott elemhez, amely a cím ill. képaláírás alatt fog megjelenni több sorban. A hossza nincsen maximalizálva, de amennyiben a komment sáv magassága meghaladja a CB_TxtHMax paraméter értékét (amely a cb_config.js fájlban állítható be), a komment scrollozható lesz. FONTOS! Amennyiben HTML kódokat is szeretnél itt használni, olvasd el figyelmesen a 'HTML kódok a kommenten belül és HTML mód' témakört a 'Professzionális felhasználás'-on belül ezen az oldalon!
HASZNÁLATA: comment=This is my comment
closeonh
Ha az értéke 'off', a clearbox az adott elemnél nem fog bezáródni a háttérre kattintáskor. Ez a paraméter az adott elemnél felülbírálja a globális CB_CloseOnH beállítást.
HASZNÁLATA: closeonh=off
dlhrf
Alapállapotban a clearbox alján van egy letöltés ill. teljes méret gomb. Akkor használd ezt a paramétert, ha más tartalmat szeretnél ehhez a gombhoz rendelni, mint amit a clearbox éppen megjelenít.
HASZNÁLATA: dlhrf=mydownloadablecontent
dlinsame
Ha ez a paraméter meg van adva, akkor a letöltés gombra kattintva nem nyílik meg új böngésző ablak ill. tab. Jól használható a dlhrf paraméterrel. Ennek a paraméternek nem kell értéket adni!
HASZNÁLATA: dlinsame
html
Ez a paraméter SZÜKSÉGES a HTML mód használatához! A clearbox szinte bármilyen HTML kódot képes megjeleníteni amennyiben a href="htmlcontent" attribútum meg van adva az <a> tag-nek ÉS használjuk ezt a paramétert. A clearbox ennek a paraméternek az értékét HTML kódként fogja megjeleníteni. FONTOS! Olvasd el figyelmesen a 'HTML kódok a kommenten belül és HTML mód' témakört a 'Professzionális felhasználás'-on belül ezen az oldalon!
HASZNÁLATÁRA EGY PÉLDA: html=<strong>This is a bold text</strong>
Beállítások a cb_config.js fájlban Clearbox megjelenés:
CB_WindowColor='#fff'
a clearbox ablak színe (ha megváltoztatod, ki kell cserélned az ablak kereteit megjelenítő PNG fájlokat is!), transparent (átlátszó) is beállítható
CB_MinWidth=120
a clearbox ablak minimum (csak képeknél) ill. kezdeti szélessége
CB_MinHeight=120
a clearbox ablak kezdeti magassága
CB_WinPadd=15
a böngésző széleitől való minimum távolság
CB_RoundPix=12
csak akkor változtasd meg, ha kicserélted az ablak kereteit megjelenítő PNG fájlokat
CB_ImgBorder=0
kép körüli keret vastagsága
CB_ImgBorderColor='#ddd'
kép körüli keret színe
CB_Padd=4
clearbox ablak keretének vastagsága
CB_BodyMarginLeft=0
CB_BodyMarginRight=0
CB_BodyMarginTop=0
CB_BodyMarginBottom=0
a <body>-nak megadott margin értékeket állítsd be itt is
CB_ShowThumbnails='auto'
thumbnail képek mutatása ('auto', 'always' vagy 'off') csak képeknél működik!
CB_ThumbsBGColor='#000'
a thumbnail layer színe
CB_ThumbsBGOpacity=.35
a thumbnail layer átlátszósága
CB_ActThumbOpacity=.65
az aktuálisan megjelenített kép thumbnail képének átlátszósága
CB_SlideShowBarColor='#fff'
a slideshow állapotcsík színe
CB_SlideShowBarOpacity=.5
a slideshow állapotcsík átlátszósága
CB_SlideShowBarPadd=17
a slideshow állapotcsík távolsága a kép széleitől jobb és bal oldalon
CB_SlideShowBarTop=2
a slideshow állapotcsík távolsága a kép tetejétől
CB_SimpleDesign='off'
ha 'on', akkor a clearbox nem jeleníti meg a szövegmezőket, csak a tartalmat és a keretet
CB_CloseBtnTop=-10
a bezár gomb függőleges helyét adja meg
CB_CloseBtnRight=-14
a bezár gomb vízszintes helyét adja meg
CB_CloseBtn2Top=-20
a bezár gomb függőleges helyét adja meg (amennyiben a megjelenített elem nem kép)
CB_CloseBtn2Right=-30
a bezár gomb vízszintes helyét adja meg (amennyiben a megjelenített elem nem kép)
CB_OSD='on'
bekapcsolja az OSD-t
Clearbox betűtípus, szöveg és alsó navigáció beállítás:
CB_FontT='Verdana'
CB_FontSizeT=12
CB_FontColorT='#777'
CB_FontWeightT='normal'
ezek a beállítások a cím ill. képaláírás sorra vonatkoznak
CB_FontC='arial'
CB_FontSizeC=11
CB_FontColorC='#aaa'
CB_FontWeightC='normal'
CB_TextAlignC='justify'
ezek a beállítások a komment mezőre vonatkoznak
CB_TxtHMax=42
a komment mező maximum magassága pixelben
CB_FontG='arial'
CB_FontSizeG=11
CB_FontColorG='#999'
CB_FontWeightG='normal'
ezek a beállítások a galéria névre vonatkoznak
CB_TextH=35
a tartalom alatti szövegmező magassága (a komment hozzáadása automatikusan módosítja ezt a beállítást), ha megváltoztatod a betűméretet, akkor valószínű, hogy ezt a beállítást is meg kell változtatnod
CB_PadT=10
a tartalom és a cím ill. képaláírás sor közötti távolság
CB_ShowURL='off'
ha nincs cím ill. képaláírás megadva, akkor a tartalom elérési útját és fájlnevét fogja mutatni
CB_ItemNum='on'
galéria elemeinek számozása
CB_ItemNumBracket='()'
a zárójel típusa
CB_ShowGalName='on'
megjeleníti a galéria nevét
CB_TextNav='on'
megjeleníti az előző és következő navigációt
CB_NavTextImgPrvNxt='on'
gombokat használ az előző és következő navigációhoz
CB_ShowDL='on'
megjeleníti a letöltés navigációt
CB_NavTextImgDL='on'
gombokat használ a letöltés navigációhoz
CB_ImgRotation='on'
megjeleníti a kép elforgatása navigációt
CB_NavTextImgRot='on'
gombokat használ a kép elforgatása navigációhoz
A weboldalt elsötétítő layer beállításai:
CB_HideColor='#000'
a layer színe
CB_HideOpacity=.85
átlátszósága
CB_HideOpacitySpeed=400
a layer megjelenésének ill. eltűnésének gyorsasága (ezredmásodpercben)
CB_CloseOnH='on'
clearbox ablak bezárása, ha a háttérre kattintasz
Clearbox animáció beállítások:
CB_Animation='double'
animáció típusa: 'double', 'normal', 'off', 'grow' vagy 'warp' (magas processzorhasználat)
CB_ImgOpacitySpeed=450
a tartalom megjelenésének ill. eltűnésének gyorsasága (ezredmásodpercben)
CB_TextOpacitySpeed=350
a tartalom alatti szövegmező megjelenésének ill. eltűnésének gyorsasága (ezredmásodpercben)
CB_AnimSpeed=400
a clearbox ablak átméreteződésének sebessége (ezredmásodpercben)
CB_ImgTextFade='on'
a tartalom és a szövegmező animációjának bekapcsolása
CB_FlashHide='off'
eltünteti az összes flash tartalmat az oldalról, amikor megjelenik a clearbox ablak
CB_SelectsHide='on'
eltünteti az összes select boxot az oldalról, amikor megjelenik a clearbox ablak
CB_SlShowTime=5
a slideshow alapértelmezett időtartama (másodpercben)
CB_Preload='on'
szomszédos képek előretöltése a galériákban
A clearbox által használt képek beállítása:
CB_PictureStart='start.png'
CB_PicturePause='pause.png'
CB_PictureClose='close.png'
CB_PictureNext='next.png'
CB_PicturePrev='prev.png'
néhány clearbox által használt kép (a többi a clearbox.css-ben van megadva!)
Professzionális beállítások:
CB_PicDir=CB_ScriptDir+'/config/'+CB_Config+'/pic'
CSAK AKKOR VÁLTOZTASD MEG, HA MEGVÁLTOZTATTAD A CLEARBOX MAPPASTRUKTÚRÁJÁT!
CB_AllowedToRun='on'
ha 'off', akkor a clearbox nem fog működni (az oldal újratöltése nélkül változtatható beállítás!)
CB_AllowExtFunctLoad='off'
ha 'on', akkor a clearbox minden egyes tartalom megjelenítésekor meg fogja hívni a CB_ExternalFunctionLoad(); nevű függvényt (jól jöhet pl. auditáláshoz, stb.)
CB_AllowExtFunctPageLoad='off'
ha 'on', akkor a clearbox az oldal betöltődésekor meg fogja hívni a CB_ExternalFunctionPageLoad(); nevű függvényt
CB_AllowExtFunctCBClose='off'
ha 'on', akkor a clearbox a bezárásakor meg fogja hívni a CB_ExternalFunctionCBClose(); nevű függvényt
Professzionális felhasználás
HTML kódok a kommenten belül és HTML mód
Szinte bármilyen HTML kódot használhatsz a kommenten belül, vagy HTML módban (href="htmlcontent"), de néhány trükköt muszáj alkalmazni, el is magyarázom, hogy miért:
Ne felejtsd el, hogy amikor kommentet adsz meg, vagy a 'html=' paramétert használod HTML módban, akkor EGY MEGNYITOTT <a> TAG MEGNYITOTT REL ATTRIBÚTUMÁBA írsz!
Ezért elég egyértelmű, hogy itt nem használhatsz minden esetben < > és " karaktereket!
Ezért a fenti esetekben az alábbi HTML kód helyett:
használd EZT:
Tudom, hogy nem túl szép, de nagyon egyszerű:
használd a < karaktertláncot ehelyett: <
használd a > karaktertláncot ehelyett: >
használd a " karaktertláncot ehelyett: "
használd a ' karaktertláncot ehelyett: '
használd a & karaktertláncot ehelyett: &
Ennyi az egész :)
Clearbox futtatása manuálisan, javascripttel meghívva (ez egy szép, magyaros mondat :)
Használd a CB_Open(); függvényt! A CB_Open-nek az összes fenti paraméter megadható, de itt mindig kötelezően kell használni a href paramétert!
Clearbox megnyitása flash-ből (még nem volt tesztelve)
FONTOS: Ne felejtsd el megadni a wmode = transparent paramétert a flash tartalmaknak az oldaladon!
Elvben a clearbox flash-ből is meghívható. Ehhez szintén a CB_Open(); függvényt kell használni. A paraméterek itt is ugyanazok, de amennyiben egy full-flash oldalon galériákat is akarsz használni, előbb létre kell hoznod a CB_Gallery tömböt, még mielőtt a CB_Open(); függvényt meghívod! A CB_Gallery -ről olvashatsz lejjebb, de előbb álljon itt egy működő megoldás a létrehozására:
CB_Gallery létrehozása manuálisan:
CB_Gallery[0]='Példa'; // galéria neve
CB_Gallery[1]=new Array(); // első galériaelem tömbjének létrehozása:
CB_Gallery[1][0]='images/grass_01.jpg'; // url (elérési út)
CB_Gallery[1][1]='image'; // type (típus)
CB_Gallery[1][2]='Green Sample #1'; // title (cím)
CB_Gallery[1][5]='images/grass_02.jpg'; // tnhrf (thumbnail elérési út)
CB_Gallery[1][8]='This is a comment'; // comment (komment)
CB_Gallery[2]=new Array(); // második galériaelem tömbjének létrehozása:
CB_Gallery[2][0]='http://www.clearbox.hu'; // url (elérési út)
CB_Gallery[2][1]='iframe'; // type (típus)
CB_Gallery[2][2]='Clearbox home'; // title (cím)
CB_Gallery[2][3]=900; // width (szélesség)
CB_Gallery[2][4]=500; // height (magasság)
CB_Gallery[2][8]='Home page of clearbox.'; // comment (komment)
CB_Open('gallery=Példa,,href=http://www.clearbox.hu'); // Ebben az esetben muszáj megadni a már létrehozott galéria nevét is, a href paraméter pedig a galéria megnyitni kívánt elemének az eléréi útja természetesen.
A CB_Gallery felépítése
Ha dinamikusan szeretnél a galériában adatot módosítani, vagy elemet törölni ill. hozzáadni, akkor jó ha tudod, hogyan épól fel. CB_Gallery a neve annak a tömbnek, amit a clearbox a galéria elemeinek és azok adatainak a tárolására használ. CB_Gallery[0] (tehát a tömb első eleme) mindig a galéria nevét (és csak azt) tartalmazza! Amennyiben nincs galéria, mert egy egyedi tartalom megjelenítéséről van szó, akkor a CB_Gallery[0] a 'clearbox' szót tartalmazza. Ezért CB_Gallery.length (a tömb elemeinek a száma) mindig n + 1 lesz, ahol n = a galéria elemeinek a számával. Az egyes elemekre így hivatkozhatsz: CB_Gallery[n] ahol n = 1 ha az első elemre hivatkozol - értelemszerűen.
CB_Gallery[n] mindig egy tömb:
CB_Gallery[n][0] az elem href-ben vagy az ugyanilyen nevű paraméterben megadott elérési útja
CB_Gallery[n][1] az elem típusa (type paraméter)
CB_Gallery[n][2] az elem címe vagy képaláírása (title paraméter)
CB_Gallery[n][3] az elem szélessége (width paraméter)
CB_Gallery[n][4] az elem magassága (height paraméter)
CB_Gallery[n][5] az elem thumbnail-jének az elérési útja (tnhrf paraméter)
CB_Gallery[n][6] az elem slideshowtime értéke
CB_Gallery[n][7] az elem autoslideshow paramétere
CB_Gallery[n][8] az elemhez tartozó komment (comment paraméter)
CB_Gallery[n][9] az elem closeonh paramétere
CB_Gallery[n][10] az elemhez tartozó letöltés-url (dlhrf paraméter)
CB_Gallery[n][11] az elemhez tartozó dlinsame paraméter
CB_Gallery[n][12] az elemhez tartozó html paraméter (csak HTML mód esetén!)
CB_Gallery[n][13] a képhez tartozó elforgatás mértéke fokban (90, 180 vagy 270)
Amennyiben a CB_Gallery tömb létre van hozva, bármely eleméhez tartozó aktuális adatokat megjelenítheted a CB_ShowActItem(ID); függvény segítségével, ahol ID értelemszerűen a megjeleníteni kívánt elem sorszáma a galériában. Kattins ide a kipróbálásához!
Clearbox bezárása clearbox ablakból kiadott paranccsal
Ha iframe-ből szeretnéd bezárni, használd a window.parent.CB_Close(); parancsot, egyéb esetekben (html, inner content, flash) pedig a CB_Close(); parancsot!
Másik galériaelem betöltése clearbox ablakból kiadott paranccsal
Iframe-ből használd a window.parent.CB_LoadContent(ID); parancsot, egyéb esetekben (html, inner content, flash) pedig a CB_LoadContent(ID); parancsot, ahol az ID a galériában szereplő elem sorszáma!
A clearbox használata AJAXos oldalakon
Ha AJAX által betöltött tartalmakkal dolgozol a weboldaladon és azt szeretnéd, hogy a clearbox az újonnan betöltődött tartalmakkal is működjön, a CB_Init(); függvényt kell meghívnod, MIUTÁN az AJAXos tartalom már betöltődött.
Saját függvény futtatása minden clearboxos tartalom betöltéskor
Olvasd el a 'Professzionális beállítások' részt a 'Beállítások a cb_config.js fájlban' témakörben ezen az oldalon!