Alig 1-2 órája találkoztam az SG egyik topicjában felvetett kérdés kapcsán egy ClearBox elnevezésű új scripttel, melyek PyRex fejleszt. A script célját tekintve hasonló a talán már többek által ismert LightBox vagy ThickBox scriptekkel, viszont megnézve honlapját örömmel fedeztem fel, hogy ez a magyar fejlesztés olyan előnyökkel bír, melyek miatt csak ajánlani tudom másoknak is.
A ClearBox egy hihetetlenül rugalmasan kezelhető képmegjelenítő “program”, amely JavaScript-ben íródott. Előnye, hogy használata csupán minimális HTML ismeretet igényel, kompatibilis az összes (újabbb) böngészővel és a böngésző felületét maximálisan kihasználja. Ezen kívül a pop-up blokkolók sem foglalkoznak vele, hiszen nem nyit meg új ablakot. Mindezek mellett egyedi megjelenést tesz lehetővé modern, lekerekített formájával és ízléses, nem hivalkodó stílusával. Nagyszerű konfigurálhatóságával pedig remekül testre szabható! A tévhitek eloszlatása végett fontos megjegyezni, hogy a ClearBox-hoz NEM szükséges PHP vagy MySQL!
A ClearBox – bár hasonlít más ilyen jellegű scriptekre (Lightbox, Thickbox, Greybox) – 100%-ig egyedi fejlesztés, de ötletet természetesen merítettem az előbbiekből.
Nézzük, hogy a HTML kódban pontosan hogyan kell hivatkozni a scriptre. Illesszük be az <a> tag-be a rel=”clearbox” hivatkozást az alábbi módon:
1 | <a href="images/cb_sample_01.jpg" rel="clearbox"><img src="images/cb_sample_01_tn.jpg" /></a> |
Amikor az oldal betöltődik, a script megkeresi a “clearbox” rel attribútummal rendelkező <a> elemeket és rájuk kattintáskor a ClearBox ablakban nyílik meg a kép. Amennyiben a kép címét is szeretnénk megjeleníteni, használjuk a title attribútumot az alábbi módon:
1 | <a href="images/cb_sample_02.jpg" rel="clearbox" title="Hatalmas hullámok"><img src="images/cb_sample_02_tn.jpg" /></a> |
Tartalomjegyzék
A ClearBox letöltése
Töltsd le a ClearBox legújabb változatát a következő helyről: http://kreaturamedia.com/clearbox/
A fájl tartalmazza magát a scriptet, a CSS fájlt és a lekerekítéshez szükséges képeket.
A ClearBox telepítése
A letöltött fájl tömörítsd ki és a HTML fájlod </header> tag-je elé szúrd be a következő sorokat:
1 2 | <link href="css/clearbox.css" rel="stylesheet" type="text/css" /> <script src="js/clearbox.js" type="text/javascript"></script> |
A fájlok elérési útja természetesen változhat, de a képek könyvtára mindenképpen ‘pic’ legyen, ellenkező esetben a script helytelenül fog működni!
A ClearBox felhasználási feltételei
A ClearBox szabadon használható bármely NEM kereskedelmi jellegű oldalon. Kereskedelmi jellegű oldalon való felhasználási feltételeiről érdeklődj a készítőnél! A ClearBox forráskódja (a felhasználó egyéni beállításitól eltekintve) kizárólag a készítő hozzájárulásával módosítható!
A ClearBox előnyei a hasonló scriptekhez képest képes
- magyar nyelv
- teljeskörű támogatottság
- kis méretű és nem szükséges hozzá más JS library megléte
- a képernyő méreténél nagyobb képeket is megfelelően méretezve jeleníti meg
- igényes animáció
- letisztult dizájn, lekerekített formák és árnyék Internet Explorer alatt is(!)
- nagyfokú konfigurálhatóság
A ClearBox aktuális (v1.6.1) változatának tudása
- egyedi képek megjelenítése
- virtuális galériák megjelenítése korlátlan számú képpel
- minden esetben böngésző mérethez igazodás
- minden esetben görgetéshez igazodás
Szerző
A scriptet írta: PyRex ( pyrexkukacchelloponthu )
További részletes információk a script használatáról a hivatalos honlapon: http://kreaturamedia.com/clearbox/
Érdemes megnézni a plugin demo oldalát, mert a cikk írása óta szerintem nagyon sokat fejlődött, a kép alatti galériás rész nagyon tetszik. :)
http://www.kreatura.hu/pyro/clearbox/cbtest/
Bizony nem semmi. A designja is jó, meg a funkcionalitása is. Tetszik az animált slideshow. Viszont amit hiányolok az, hogy nem egyenletesen méreteződik át a fehér keret, amikor különféle méretű képeket jelenítesz meg. Nagyon szaggat egy idő után, talán memória használat?
Drupal rendszer esetében hová kell beírni az alábbi kettő sort?
A http://drupal.hu/node/2230 oldalon a node_images modult módosítottam a megfelelő helyen erre:
A ClearBox telepítése szekcióban lévő kettő sorra gondolok.
Ez ingyenes oldalakon is mükszik, mert nekem UW-n és EXTRA-n sem ment (CLEARBOX hiba: A képet nem lehet betolteni:…) Lehet hogy az admin beállításoknál valamit ki kellett volna pipálni? Mi lehet a gond?
A másik, hogy, hogy lehet bekapcsolni azt a funkciót, hogy lehessen következő és előző képet behívni?
Egyébként nagyon tetszik!
Lehetséges, hogy a link ami meg van adva, az nem működik?
Ha így van, akkor honnan tudom máshonnan letölteni ezt a scriptet?
http://www.kreatura.hu/pyro/clearbox/dl/
Köszi a linket, mindjárt kiegészítem a cikket vele.
nincs mit, a clearbox SG fórumán volt…
Hogy lehet ,egy képbe automatikusan bekerüljön egy logó lásd MyVip vagy ncore ?
Egyszerűen lenyűgöző ez a script, el sem tudom képzelni, h lehet ilyet csinálni, pedig van azért jártasságom JS-ben, de ez…. Gratulálok a fejlesztőnek és köszönöm, h megosztotta velünk, ingyen!
Segítségre lenne szükségem. Nem jelenik meg a kép előnézete kicsiben. Viszont ha ráklikkelek akkor megjelenik a kép nagyban? Miért nem látom piciben?
A próblémám nekem is ugyanez…kicsiben nem jelenik meg a kép…tud valaki ebben segíteni?
Tudna valaki segíten?
Ha Flash is van az oldalamon az kitakarja a ClearBoxot, s mintha az alá kerülne be (a Flash van a legfelső “rétegen”, s alatta a ClearBox, az alatt pedig a többi része az oldalnak elhalványítva)
Lehet ez elln tenni valamit?
Amúgy szuper jó dolognak tartom, s nagyon tetszik mind programozásilag, mind pedig dizájn elemként. Gratulálok!
Azért nem jelenik meg a kicsi kép, mert el lett gépelve a cikkben szerplő tag, mivel ‘src’ helyett ‘scr’ lett írva, így nem látja a böngésző a kép url címét.
Egy kis segítségre lenne szükségem!
A Clearbox miért nem működik explorer alatt?
Sziasztok
Nem tudna valaki egy megoldást arra hogy hogy lehetne Flash odlalról meghívni a clearboxot?
egy képról lenne szó de a képet flash odlalról kéne meghívni (clearbox ban)
? a clearbox oldalán csak annyi van irva hogy CB_Open fügvénnyel.. kicsit bővebben valaki?
köszönöm előre is, meg még egy kérdés…
hogy lehetne azt megoldani hogy olyan mint menüsor eszköztárak eltünjenek a fejlécből?
milyen kóddal vagy jscrip-tel?
Rossz a fejlesztői link.
Valaki tudja hogyan kell
beállítani itt hogy valaki commentet is adhasson a képhez? Pontosan mit és hova kell beírni a kódot.
Nagyon köszönöm ezt a scriptet. Régóta kerestem már hasonlót, de ez igazán szupi…
Kiegészíteném annyival, hogy a képek URL kódjával is tökéletesen működik, nem kell a képeket külön feltölteni…
Hálás vagyok…
Sziasztok!Segítséget szeretnék kérni, a clearbox-al kapcsolatban, hogy amikor létrehozom a képgalériát dreamweaver-el,akkor működik előnézetben,de amikor feltöltöm az oldalra, akkor csak egy üres fehér doboz jelenik meg, a kép nem.Mi lehet a probléma?(www.erdőkertesigumis.hu)
Korábban egy másik oldalon (www.fagarazsgyar.hu)a lightbox -ot használtam, működött is, amikor azonban új képeket akartam feltölteni, akkor ugyanez volt a probléma..
Eddig nem tudtam rájönni a megoldás mikéntjére, kérem segítsetek, előre is köszönöm!
Antal Györgyi-nek. A képek nevei nem tartalmazhatnak ékezetet. A DW localhost nézetben megmutatja, de a feltöltés után nem jelenik meg. Ellenőrizd a képek elérési útvonalát. Olvass vissza a kommentekben, hátha nem javítottad ki az elérési adatot. ( scr helyett src ).
Aktuálisan itt érhető el a script: http://kreaturamedia.com/clearbox/
Köszi az infót, javítottam a cikkben is a hivatkozásokat.