ClearBox JS 2


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 is több alkalommal használtam nagy megelégedéssel, úgyhogy örömmel olvastam a fórumon, amikor szólt, hogy publikus lett a 2-es verzió.

Akinek új ez a script, pár sort idéznék a honlapról, hogy mégis miről van szó:

A ClearBox egy hihetetlenül rugalmasan kezelhető kép-, galéria- és HTML tartalom megjelenítő “program”, amely javascript-ben íródott. Előnye, hogy használata csupán minimális HTML ismeretet igényel, kompatibilis az összes (újabb) 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 ClearBox-hoz (több más hasonló scripttel ellentétben) nem szükséges JS library, a ClearBox kódja így a tudásához képest messze a legkisebb méretű!

Kíváncsian várom, hogy milyen lesz és mikor készül a wordpress plugin is. :)

honlap: www.clearbox.hu

Kapcsolódó bejegyzések:
  • 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 …

  • 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 …

  • 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 …

  • SPGM galéria telepítése és használataA video célja mindössze annyi, hogy az SPGM galéria scripthez kedvet csináljon a magyar netezőknek is, mert ingyenes, kö …

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

40 hozzászólás

  1. Gaf says:

    Harder, nagyon köszönöm ezt a cikket! Állandó problémám volt a weblapokra képgalériát készíteni. Mivel utálom az adatbázis alapú képtárakat (azok sokszor “ágyúval verébre”), folyton egyszerű megoldásokat kerestem. A clearbox-ot sok helyen láttam, de nem néztem utána, hogy mi is ez.

    Magam is írtam php alapú egyszerű galériát, de nincs elég szabadidőm arra, hogy egy ilyen szinten kiforrott és – nem csak a webdesignernek, hanem a felhasználó számára is – kezelhető megoldást készítsek.

    A cikk nyomán, egyből ki is próbáltam a clearbox-ot, és egyelőre azt kell mondanom, hogy pont ezt kerestem. Tényleg csak ajánlani tudom mindenkinek!

  2. Scream says:

    Zsír, csak megeszi a procit internet explorer alatt, a régivel nem volt ilyen gond. :(
    Firefox alatt nem tapasztaltam ilyen gondot.

  3. pyro says:

    Scream:

    elvben nem nyúltam olyanhoz ami miatt jobban enné a procit. A clearbox.hu-n lehet, hogy jobban eszi, mert a háttérben fut egy js (ami a ClearBox feliratot “pulzáltatja” – ez okozhat esetleg lassulást.

    üdv!

  4. Scream says:

    Lehet, majd akkor kipróbálom egy saját oldalon. :)

  5. Nagyon tetszik a cucc! Gratula pyronak! Az előző verziót régebben kipróbáltam, de a galériánál amikor lehúztam az egeret a doboz aljára, sehogyan sem akarta megjeleníteni a galéria többi képéről a miniatűröket. Kipróbáltam az összes verziót, ami a pack-ban volt, de egyikkel sem ment (valamit nagyon elnézhettem). Ezt most feltettem és egyből működött :)
    Azért három észrevételem mégiscsak lenne:
    1. A letölthető dokumentáció néhol hibás (pl. mindenhol scr van src helyett) és egy kis szövegjavítás is kellene, de persze ezek nem igazán jelentős hibák, csak ha már ilyen jó a progi, akkor a doksit is ki kellene javítan az ilyen idegesítő hibáktól.
    2. Nem jöttem rá, hogy igazából mi is az újítás az előző verziókhoz képest. Majd jó lenne egy whats new leírás ehhez a verzióhoz.
    2. Így próbálgatás közben vettem észre, hogy IE alatt a jobbra-balra billenytyűkkel nem lehet a galériát lapozni.

    Persze az előbbi hibák nem igazán jelentősek, de gondoltam leírom őket, hátha előbb-utóbb lesz rájuk gyógyír.
    (ezt a mostani kommentet elküldtem pyronak is)

  6. pyro says:

    Kedves Péter!

    Köszönöm az észrevételeket, igen valóban el volt írva több helyen (az oldalon is – ciki!). Kijavítottam ott is és a dokumentációban is.

    Az előző verziókhoz képest? Attól függ melyikhez. Az 1.x verziókban nem volt sem html megjelenítés, sem thumbnail view a galériáknán. A 2.0 beta-hoz képest bugfixek. Volt egyébként changelog, lehet, hogy ki is fog majd kerüli ismét az oldalra.

    IE alatt sajnos a rendes nyilak nem mennek, csak a numerikus billentyűzet 4-es és 6-os gombja működik, egyelőre nem értem, hogy miért, hiszen egyértelműen kellene a nyilaknak működnie, javiítva lesz nyilvánvalóan ez a kis bug is hamarosan.

    pyro

  7. Trianta says:

    Sziasztok!

    Letöltöttem a legújabb ClearBox JS 2 fájlokat, ebben 1.72-es vrziószámot látok.
    Nekem egy korábbi verzió fut már régóta gond nélkül. Most feltettem ezt az újat és rátettem a régi beállításokat. Az a gond, hogy a megjelenített kép függőlegesen kilóg lefelé az ablakból…
    Melyik változót kellene megváltoztatnom, hogy megfelelően menjen?

    Trinata

  8. Trianta says:

    Az előbb a verziószámot elírtam, szóval a 1.72-es volt a korábbi változat.

  9. pyro says:

    Szia!

    Az új CSS fájlt is feltetted?

  10. Trianta says:

    Szia!
    Nem, a css fájlt nem írtam felül.

  11. pyro says:

    szia

    az baj :)

  12. Trianta says:

    Aha, már látom, hogy ott is van külömbség.
    Köszi!

  13. pyro says:

    szerintem egyszerűbb ha az egészed felülírod és újra beállítod a pár változót, gyorsabban végzel vele, mint egyenként szőrözni mindennel :)

  14. Trianta says:

    Szia!
    A folyamatos vetítésnél megoldható e valahogy, hogy a képek tetején a “folyamatjezőcsíkot” ki lehessen kapcsolni, ha kell?

  15. pyro says:

    Szia!

    Hát akár css-ből is ki lehet, vagy a blank.gif-et másold és nevezd el white.gif-nek, írd vele felül az eredetit és nem fog látszódni a csík.

  16. Trianta says:

    Oké, kösz!

  17. Trianta says:

    Újabb probléma:
    Ha képek nem az aktuális könyvtárban vannak, hanem máshol (pl $DIR = ‘../albumok/kepek=';), akkor a megnyiló kép aljában megjelenö kis képek nem jelennek meg.

  18. Harder says:

    bolyzsolt szólt, hogy megjelent már a ClearBox JS 2.5, aki használja, frissítse. :)

  19. pyro says:

    valóban megjelent, remélem hétvégén lesz időm az új dokumentációt is összedobni

  20. Anybudi says:

    Tényleg nem rossz, de ööö… “hihetetlenül rugalmasan kezelhető”, “a ClearBox kódja így a tudásához képest messze a legkisebb méretű!”

    Azért az ilyen marketinges kijelentéseketől tartózkodjunk…

    Hol van ez a Highslide és Shadowboxnál látható konfigurálhatóságtól….

    http://mjijackson.com/shadowbox/doc/download.html
    http://vikjavev.no/highslide/configurator.php

    Shadowbox kép és html megjenítő modulokkal natúran 49. A clearbox 64. No akkor melyik a kisebb? És melyikben vannak fölösleges dolgok?

    Szóval csak csínján bánjunk az ilyen reklámszavakkal.

    De amúgy nem rossz script, az iwiw szerződéshez meg grat.

  21. pyro says:

    Szia!

    Részben valóban igazad van, de azt ne felejtsük el, hogy a ClearBox 28k tömörítve, ha kitömöríted akkor nyilván 64, de ez nagyrészt a hosszú változó ill. függvénynevek miatt van. Megtehetném, hogy átnevezem az összeset a ShadowBox mintájára egy-két karakteresre, akkor megintcsak csökkenne jócskán a kód. Ehelyett inkább a szokásos tömörítést választottam.

    A “hihetetlenül rugalmasan kezelhetőt” pedig arra értem, hogy míg a többi scripthez azért nem árt némi JS tudás sem, ha komolyabban bele akarsz nyúlni, a ClearBox-nál tényleg az átlagosnál szerintem jóval több dolgot tudsz módosítani anélkül, hogy értenél hozzá.
    Ajánlom figyelmedbe az alábbi tesztoldalt, ahol bárki realtime ki tudja próbálni, hogy melyik változó hogyan módosítja a script működését.

    A fentiekhez még annyit, hogy – és ezt szinte 100%-ra állíthatom – nincs még egy ilyen szinten optimalizált és kompatibilis script. A ClearBox a régi böngészőkben (akár ie 5.5, netscape 8) is szinte kifogástalanul működik, míg pl. a lightbox és társai el sem indulnak. Rengeteg scriptnek akad különböző esetekben és klönböző böngészőkben pozícionálási problémája, ami lehet, hogy csak 1-1 felhasználó weboldalát érinti, de mégiscsak hiba. Én tényleg arra törekszem, hogy ilyen probléma ne legyen, és lehetőleg minden weboldalon, függetlenül a böngészőtől, vagy akár a doctype-tól ugyanúgy jelenjen meg. A ClearBox kódnak minimum a 30%-a különböző bugok javítása és böngészőkre való optimalizáció, ami a legtöbb hasonló scriptből hiányzik.

    Flash és egyéb formátumok támogatásának az integrálása is bele fog kerülni, bár ezt jelenleg az iframe-es HTML megoldással is meg lehet tenni.

    http://www.clearbox.hu/index.php?c=demo

    Üdv!

  22. StG says:

    Gratulálok én is (az iwiw-es megjelenéshez is :))
    Ami nálam problémaként jelentkezik, az a képek alatti szövegmező (és/vagy a kép) dinamikus méretezése. Széles, fekvő képpel nincs gond, mivel a navigációs gombokat behúzza az albumcím mellé. Álló képnél viszont (ha mindez nem fér ki egy sorba) a gombok többé-kevésbé lelógnak a monitorról. Annyiban mondjuk megkerültem, hogy adtam a CB_TextH változónak egy elég nagy értéket, így minden látszik, bár elég széles képnél nyilván marad egy üres fehér terület…

  23. StG says:

    Éshát persze egy pixelérték sem ugyanolyan jó minden böngészőben, mert ami FF-nál elegendő, az IE6-ban kicsi, és a gombokból levág egy darabot… :S

  24. pyro says:

    StG

    Esetleg egy url-t írhatnál, mert elég furcsa hiba, amit írsz, kizártnak tartom, hogy a scripttel lenne gond. Nem lehet, hogy a DOCTYPE nincs jól megadva?

  25. StG says:

    http://miau.gau.hu/~ipeto/temp/bor/index_1.html
    Persze elképzelhető, hogy valami ilyesmi a gond a scripttől függetlenül, ezt a galériát elég gyorsan dobtam össze próbaképpen (éshát a hamar munka ritkán jó). Itt pl. FF-szal okés, IE7 viszont levág kicsit a gombokból az álló képek esetén.

  26. pyro says:

    StG:

    nálam ie7 alatt sem vág le a gombokból az oldaladon… de szerintem folytassuk email-ben. A címem megtalálod a scriptben vagy a clearbox.hu-n.

  27. Trianta says:

    Sziasztok!

    Azt hogy lehetne megoldani, hogy egy darab linkbe megmondani a scriptnek, hogy összesen mennyi kép van a galériában?
    Nekem ilyen formán vannak a képek: foto001.jpg tehát csak a sorszámok változnak, ha nem muszály nem tennék be 500 linket minden egyes galériához. Egyébként csak az első képhez tennék egy script indító linket.

  28. pyro says:

    Szia!

    Sajnos sehogy, nem így működik. HTML kódot néz.

  29. Trianta says:

    Aha, sejtettem… :-(
    És esetleg azt hogy lehet megoldani, hogy amikor megnyílik az aktuális galéria oldal, akkor automatikusan elinduljon az első képtől a lejátszás? Tehát ne kelljen klikkelni a linkre.

  30. gabesz48 says:

    Kedves Pyro !

    Már régóta használom a Clearbox megjelenitőt. Nagyon meg vagyok vele elégedve, de egy problémát nem tudtam megoldani : A html kódba ágyazott flash objectumból nem tudom aktívizálni
    a Clerabox-ot. Ha segítenél, akkor pontosabban leírnám a problámámat. (Egyébként a flash kódjaimat Swishmax-ban írom, amiben JS kódot is el lehet helyezni, de valahogy nem jön össze, mert hibaüzenet nincs, csak nem műkszik. Tudom, hogy html kódot néz az alkalmazásod, de JS document.write-ba írva() nem csinál semmit, ha azt a flash js függyvényéből hívom meg, ellenben html kódba ágyazott JS-el meg működik pl:

    <!–
    if (screen.width <= 800)
    {
    document.write(“
    “);
    }
    else
    {
    document.write(“
    “);
    }
    //–>
    )

  31. Sonic says:

    megnéztem…nemhiszem hogy fogom használni pont amiatt hogy kereskedelmi felhasználásra nem ingyenes
    maradok a jQuery Lightboxnál (http://leandrovieira.com/projects/jquery/lightbox/)

  32. Roko says:

    a lightbox tudasban olyan a clearboxhoz kepest mint egy trabant a mercedeszhez kepest de azert te csak hasznald azt mert az ingyenes. igazi magyar mentalitasod van: ha valamiert fizetni kell az mar nem is kell.

  33. Sonic says:

    mi az ami ennyire hiányzik a JQuerys Lightboxból?
    css-sel bármit tudsz módosítani, meg a nem kompresszált verzióban módosítani is tudod ahogy akarod
    ha amire kell meg jó ez is akkor minek fizessek?:) válság van :D

  34. Rockme says:

    Sonic, ilyen erővel kenyeret se vegyél, mert azt is megsütheted magadnak otthon. Vagy akár autót is készíthetsz. Nem jó a hozzáállás: mi van azzal a néhány milliárd emberrel, akik nem értenek a css-hez, pláne a javascripthez?

  35. Sonic says:

    de ha én pék vagyok akkor minek ?:D
    ha valaki üzleti célú felhasználást akar, akkor meg biztos akad a környéken olyan aki ért a css + javascripthez
    akik meg nem értenek hozzá, azoknak jó a nem kereskedelmi felhasználású például ;)

  36. pyro says:

    Szia Sonic!

    Ebben Neked – szerencsére – nincs igazad. ;)
    A véleményedet tiszteletben tartom, de az emberek nem úgy gondolkodnak, ahogy Te – és ezt azzal tudom igazolni, hogy elég sokan keresnek meg clearbox licensz és egyéb ügyben. Hidd el, megérte / megéri fejleszteni :)

    A lightboxot hoztad fel példának, amely negyedannyit nem tud, mint a ClearBox, ráadásul a támogatása is nulla. Bár nyílt forráskódú, de egyetlenegy olyan verziót nem tudsz belőle mutatni, amely minden böngésző alatt minden esetben annyira kompatibilis lenne (értsd: nincsenek pozícionálási + egyéb bugok), mint a CB.

    Mindamellett még én sem szeretek egy más által megírt forrásban turkálni, a clearboxban meg erre nem is nagyon van szükséged, pláne ha elkészül a CB3, amely tényleg tudásban is a legjobb lesz, ami létezik (a clearbox2-nél van többet tudó – csak sokkal nehezebben használható – script).

    Üdv: K.Gy.

  37. Bal says:

    Szia!

    Állati jó ez bárkibármit is mond én csak 1 et nem tudtam rendesen megoldani mert lehet lecsó vagyok a dologhoz (ami biztos ezért nem írtam saját galériát ;) )

    Szal kérdés hogyan lehet olyat csinálni hogy egy linkre rárakni a galériát, tehát ne keljen külön képenként felrakni és mikor indul összerakja, mert azzal az a baj hogy nekem az oldalon ami megnyitja lesz egy 2m hosszú kiskép-montázsom. Tehát csak egy kis szó legyen vagy kép és kattrá majd galéria indulás az 50 képpel.

    Előre is köszönöm bocsi ha olyat kérdeztem ami le van írva nem találtam.

  38. Trianta says:

    Bal,

    Én úgyoldottam meg, hogy amikor php-val összeszedem adatbázisból a képfájlok nevét, akkor albumonként csak az első kép linkjéhez teszem be a fotót (a többi link üres marad), így csak az első fotó fog megjelenni és avval indítható az album.

  39. Chilly says:

    Sziasztok!
    Kérdésem főleg Pyro-hoz szól(na), de esetleg más, akinek hasonló gondja volt és rájött a megoldásra, az is segíthetne… CMSimple-ben eddig – a régebbi clearbox-szal – tökéletesen működött a megjelenítés; most az új 3.03-as verziót nem tudom illeszteni a galériához, illetve a menü szerkezetéhez. Bár tény, hogy alapból nem is volt clearbox-os kiegészítő a cmsimple-hez, csak lightbox-os, de ott átirtam a file-okban a LB nevét CB-ra és a korábbi szerkezettel működött.
    Köszi előre is, ha valaki tudna segíteni!

  40. pyro says:

    Szia!

    A clearbox 3-nak teljesen más a paraméterezése mint a 2-nek (ami némileg hasonlított a lightbox-ra). Szerintem ezért nem megy. Nem ismerem a CMSimple-t, de pl. a WordPress plugint éppen most írom hozzá. Tudom, hogy ez neked nem nagy segítség. :(
    Amúgy a 3.03-as verzió gondolom elírás, mert azt még fel sem töltöttem :)

Szólj hozzá
a ClearBox JS 2 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>