mltutorijali.com

naučite više

Članci \ Javascript&JQuery

Lightbox galerija slika

30. april 2012., Autor: , 1 komentar

Predstavljamo vam skriptu koja je pisana u javasciprtu od autora Lokesh Dhakar, koji je omogućio besplatno korišćenje ove skripte. Skripta služi kako bi se lakše organizovao pregled slika na vašoj web stranici ili se napravila web galerija. Lightbox skripta je veoma laka za korišćenje i veoma lako se implementira i prilagođava za vaš sadržaj.

Skripta se bazira na klikovima na sliku.Klikom na link koja je obeležena html parametrom otvara se prozor koji se proteže preko celog ekrana i prikazuje uveličanu verziju slike odnosno onu sliku koju ste odabrali, ali u većoj rezoluciji.

Instalacija

Pro što treba uraditi da bi implementirati skriptu treba prvo da je skinete sa ovog linka. Pose toga među head tagove vaše web stranice ubacite skriptu koju ste stavili i najnoviju verziju JQuery-ja.

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>

Zatim posle toga implemantirati css skriptu iz skinutog sadržaja.

<link href="css/lightbox.css" rel="stylesheet" />

U tagu linka u kojem želite da omogućite otvaranje slike preko celog ekrana na klik dodajte samo parametar rel i unutar upišite lightbox. Primer:

<a href="slike/slika-1.jpg" rel="lightbox">Slika #1</a>

Međutim ukoliko želite da napravite set slika i omogućite korisnicima da sa jedne prelaze na drugu uvećanu sliku u parametru rel pored lightbox dodajte u uglaste zagrade ime seta tih slika.

<a href="slike/slika-1.jpg" rel="lightbox[set_slika]">Slika #1</a>
<a href="slike/slika-2.jpg" rel="lightbox[set_slika]">Slika #2</a>
<a href="slike/slika-3.jpg" rel="lightbox[set_slika]">Slika #3</a>
  • aldin

    pozdrav. ako mi mozes reci, zbog cega ovaj kod ne radi kad ga stavim u svoj template.