CMS Made Simple - Official website CMS made Simple Czech Site Zur deutschsprachigen Supportseite CMS Made Simple - Danmark Sitio en Castellano Site francophone Benvenuto su CMSmadesimple CMSMS -  русский CMS Made Simple - slovenská verzia
Facebook

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:

www.clearbox.hu/download.php

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:

Első kép Második kép Harmadik kép

<a href="uploads/images/dokumentumok/telepites/install1.png" rel="clearbox"> <img src="uploads/images/dokumentumok/telepites/install1_thumb.png" /></a>&nbsp;
<a href="uploads/images/dokumentumok/telepites/install2.png" rel="clearbox"> <img src="uploads/images/dokumentumok/telepites/install2_thumb.png" /></a>&nbsp;
<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>&nbsp;
<a href="uploads/images/dokumentumok/telepites/install2.png" rel="clearbox[gal1]" title="install2"> <img src="uploads/images/dokumentumok/telepites/install2_thumb.png" /></a>&nbsp;
<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';

 


Előző oldal: Oldalak újraszámozása    Következő oldal: ImageGallery Tag használata
( Készült: 2010. 12. 03. 10.23 Módosítva: 2010. 12. 18. 9.04 )