Container FaceBox a la FaceBook


Nu prea folosesc Facebook aşa că nu am prea înţeles cum acest script este în-stil-Facebook. Poate ar ajuta mai mult să spun că aminteşte de scripturile din familia Lightbox (vezi aici). Iar containerul pe care îl voi prezenta funcţionează din nou nu doar pentru imagini ci şi pentru secvenţe HTML.

img46

Numele lui: FaceBox. Eu vă recomand să luaţi scriptul de la DynamicDrive (aici se mai ocupă de actualizare, corectare…), unde a fost publicat chiar ieri, dar puteţi apela şi la pagina autorului iniţial. Veţi găsi o arhivă zip ce include două fişiere JScript şi unul CSS, plus diverse imagini. Scriptul foloseşte librăria jQuery, astfel că primul script este această librărie iar al doilea codul pentru FaceBox. Fişierul CSS este pentru formatarea "container"-ului, iar imaginile sunt cele care alcătuiesc bordura (fişiere PNG, ceea ce asigură transparenţă maginii).

În pagina de pe DynamicDrive aveţi explicaţiile pas cu pas privind ce trebuie să introduceţi în pagină şi cum se apelează scriptul. Practic aveţi câteva rânduri de introdus în secţiunea head apoi de fructificat scriptul punând în esenţă rel="facebox" la linkurile ce doriţi să afişeze conţinutul într-o "fereastră" deasupra paginii.

<a href="imaginea.jpg" rel="facebox">Vezi imaginea</a>

Pagina DynamicDrive include şi exemple convingătoare pentru:

  • o imagine
  • un text ascuns în pagină
  • un text extern
  • un text extern la care se aplică un CSS

Dacă vă place efectul nu va fi greu să îl folosiţi în propriile pagini. Nu uitaţi să încărcaţi într-un editor grafic fişierul closelabel.gif pentru a scrie altceva (ÎNCHIDE de exemplu) în loc de CLOSE. Sau puteţi lăsa doar un simbol grafic care să sugereze închiderea. Containerul se închide la apăsarea tastei Escape dar nu la un click în pagină în afara lui (ca la alte scripturi gen Lightbox) de aceea e important să fie şi un link pentru închidere. La nevoie puteţi manevra şi fişierele cu bordura containerului pentru a scoate ceva mai spectaculos. Baza o aveţi în script: cu imaginaţie îl adaptaţi apoi după gusturi şi nevoi.


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (Neevaluat încă)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *