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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

24 HOZZÁSZÓLÁS

  1. 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?

  2. 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>';
        }
  3. 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!

  4. 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?

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

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

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

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

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

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

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

  12. 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?

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

  14. 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…

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

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

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét