ClearBox – magyar fejlesztésű képmegjelenítő


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>

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/

letöltés: http://kreaturamedia.com/clearbox/download.php

SG topic: http://www.sg.hu/listazas.php3?id=1172325655

Kapcsolódó bejegyzések:
  • Még tavaly sikerült ráakadnom a pyro által fejlesztett ClearBox scriptre (lsd a korábbi bejegyzést erről: ClearBox – magyar fejlesztésű képmegjelenítő) és azóta …

  • A méltán népszerű ClearBox szerzője – pyro – írta meg az örömteli hírt mail-ben, hogy teljesen ingyenessé tette a scriptet, akár kereskedelmi célzattal is szabad …

  • Néhány egyszerű effekt és máris elkészült a saját, egyedi absztrakt képünk. 5 lépéses, könnyű tutorial.1. lépés: Hozzunk létre egy új dokumentumot tetszés …

  • Biztos láttad már honlapokon azt a fajta megoldást, amikor a kis thumbnail képekre kattintva nem a lapba vagy új ablakba jelenik meg a kép, hanem “beszürkül” a h …

  • Természetesen ez ebben a formában nem teljesen igaz… Viszont van egy plugin, ami a galéria készítést nagyon megkönnyíti.A Simpleviewer egy nagyon l …

A cikket beküldte: Harder (http://blog.harder.hu)

24 hozzászólás

  1. Harder says:

    É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/

  2. Tupacko says:

    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?

  3. drupalos says:

    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:

    1
    2
    3
    
    if ($format == 'thumbs') {
                $output .= '<a>filepath).'" class="node_images" title="'.$description.'" rel="clearbox['.$node-&gt;nid.']"&gt;'.$thumb.'</a>';
        }
  4. drupalos says:

    A ClearBox telepítése szekcióban lévő kettő sorra gondolok.

  5. elekecske says:

    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!

  6. Dávid says:

    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?

  7. elekecske says:

    http://www.kreatura.hu/pyro/clearbox/dl/

  8. Harder says:

    Köszi a linket, mindjárt kiegészítem a cikket vele.

  9. elekecske says:

    nincs mit, a clearbox SG fórumán volt…

  10. Marco says:

    Hogy lehet ,egy képbe automatikusan bekerüljön egy logó lásd MyVip vagy ncore ?

  11. orionstar says:

    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!

  12. darnoksz says:

    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?

  13. coohmy says:

    A próblémám nekem is ugyanez…kicsiben nem jelenik meg a kép…tud valaki ebben segíteni?

  14. Achatius says:

    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!

  15. TeeJay says:

    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.

  16. maverick says:

    Egy kis segítségre lenne szükségem!
    A Clearbox miért nem működik explorer alatt?

  17. Mulato says:

    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?

  18. Feriman says:

    Rossz a fejlesztői link.

  19. lieza says:

    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.

  20. Bambifulu says:

    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…

  21. 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!

  22. Bambifulu says:

    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 ).

  23. MGJ says:

    Aktuálisan itt érhető el a script: http://kreaturamedia.com/clearbox/

  24. Harder says:

    Köszi az infót, javítottam a cikkben is a hivatkozásokat.

Szólj hozzá
a ClearBox – magyar fejlesztésű képmegjelenítő c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>