szenprogs portal

Să ne galerie foto bazat pe jQuery plug-in numit Lightbox. Ca urmare, ar trebui să obțineți un ecran frumos de o imagine mai mare într-o fereastră separată cu Ajax mijloace de navigație la imaginea următoare sau anterioară.

Pentru a începe cu a deține un script plug-in sine. Descărcați întreaga arhivă la acest link.

Odată descărcat fișierul, completați următoarea gazdă lightbox construi fișiere:

Dacă site-ul dvs. se bazează pe uCoz, prima linie de cod nu este necesar să se scrie. jQuery pe uCoz DEFAULT conectat.

Acum pregăti imaginea. In exemplul 1 album de 4 imagini:

Imaginile trebuie să-și încheie într-un link la o anumită clasă (în acest exemplu - lightbox;-gal-1). În cazul în care o galerie, și nu o singură imagine, trebuie să instalați atributul REL (în acest exemplu - gallery1) pentru aceste link-uri. Dacă pagina de mai multe galerii, REL de proprietate pentru fiecare galerie trebuie să aibă propriul său. Să presupunem că, pentru prima galerie REL proprietate este gallery1, iar pentru a doua galerie - Gallery2.

Acum, lightbox pe care doriți să rulați. Pentru a face acest lucru in HEAD a corpului vom scrie următorul cod:

Pentru a lucra suficient acest lightbox;. Toate stilizare se face prin fișier lightbox.css care a inundat anterior. Acolo puteți schimba imaginea tranziției la următoarea și imaginea anterioară (parametrul #prevLink și #nextLink, respectiv).

Și un pic despre opțiunile pe care le puteți utiliza la apelarea lightbox. Acești parametri ajuta pentru a schimba funcționalitatea galeria.

Parametrii sunt scrise separate prin virgule în cadrul apelului funcției lightbox;. Intr-un exemplu parametru utilizat. Ea - fitToScreen. Există, de asemenea, următoarele opțiuni: