Clearbox integrálása
www.clearbox.hu/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ű!
Kis méretű, talán még szebb is, mint a lightbox, de ami nekem különösen tetszik a slideshow és a böngésző méretére állított képnagyság.
Még egy fontos dolog:
A ClearBox felhasználási feltételei
A ClearBox szabadon felhasználható bármilyen nem kereskedelmi jellegű honlapon, tehát olyanokon, amelyek nem tartalmaznak kereskedelmi jellegű szolgáltatást vagy termék(ek) eladás(á)t, illetve reklámozás(á)t. A kereskedelmi jellegű honlapokon való felhasználásáról érdeklődj a készítőnél! A ClearBox forráskódja (a paramétereket kivéve) kizárólag a készítő előzetes hozzájárulásával módosítható. A ClearBox a készítő beleegyezése nélkül pénzért harmadik félnek tovább nem adható!
Tulajdonképpen a cím nem is pontos, hiszen ez nem integrálás, csak beillesztés, de nekünk így is jó.
Töltsük le a file-t:
Csomagoljuk ki - én a /modules/clearbox/ mappába tettem, ezért a javasolt href="css/clearbox.css" módosult.
Utána a sablonba (vagy én itt most csak ennek az oldalnak az Opciók/Meta adat részébe tettem bele) illesszük be ezt a kódot:
<link href="modules/clearbox/css/clearbox.css" rel="stylesheet" type="text/css" /><script src="modules/clearbox/js/clearbox.js" type="text/javascript"></script>
Most már csak a képeket kell beilleszteni.
Ezek különálló képek:
<a href="uploads/images/dokumentumok/telepites/install1.png" rel="clearbox"> <img src="uploads/images/dokumentumok/telepites/install1_thumb.png" /></a>
<a href="uploads/images/dokumentumok/telepites/install2.png" rel="clearbox"> <img src="uploads/images/dokumentumok/telepites/install2_thumb.png" /></a>
<a href="uploads/images/dokumentumok/telepites/install3.png" rel="clearbox"> <img src="uploads/images/dokumentumok/telepites/install3_thumb.png" /></a>
ez pedig képgaléria ([gal1]:
<a href="uploads/images/dokumentumok/telepites/install1.png" rel="clearbox[gal1]" title="install1"> <img src="uploads/images/dokumentumok/telepites/install1_thumb.png" /></a>
<a href="uploads/images/dokumentumok/telepites/install2.png" rel="clearbox[gal1]" title="install2"> <img src="uploads/images/dokumentumok/telepites/install2_thumb.png" /></a>
<a href="uploads/images/dokumentumok/telepites/install3.png" rel="clearbox[gal1]" title="install3"> <img src="uploads/images/dokumentumok/telepites/install3_thumb.png" /></a>
Mivel én máshová tettem a clearbox mappát, a képek (close, start, loading...) nem látszottak. A megoldás a clearbox.js-ben volt.
Ezt a sort:
var CB_PicDir='pic';
kellett erre kicserélni:
var CB_PicDir='modules/clearbox/pic';