[ New messages · Members · Forum rules · Search · RSS ]
Page 1 of 11
Forum » Web dizajn » Tutoriali » Lightbox galerija slika (Autor: Nemanja Vasic)
Lightbox galerija slika
KryptDate: Tuesday, 2011-11-01, 12:22 PM | Message # 1
Newbie
Group: GFX Admin
Messages: 29
Status: Offline
U ovom tutorijalu naučićete kako da dodate lightbox efekat vašoj slici odnosno kreirate galeriju. Verovatno se neki pitaju šta je lightbox? Lightbox je JavaScript skipta koja se koristi za prikaz velikih slika sa jednostavnim i elegantnim stilom (animiranim efektom). Koriste ga mnoge web stranice, tako da ste se verovatno već susretali sa njim.

Korak 1
U dreamweaveru kopirajte kod i nalepite ga ispod </head> taga vaše stranice:

<script type="text/javascript" src="js/prototype.js"></script>

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Korak 2
Iz pratećeg materijala preuzmite lightbox.zip i eksportujte fajlove u folder gde vam se nalazi stranica sajta.

Korak 3
Sada ćemo dodati vašu "thumbnail" sliku(Insert>Image) i zatim linkovati ka vašoj slici u punoj veličini.
To izgleda ovako:

U ovom slučaju kao što vidite naziv moje velike slike je slika.jpg, a thumbnail-a je thumb.jpg. Sada je potrebno dodati atribut “rel” bez kojeg
ne možete aktivirati lightbox efekat slike. To će izgledati ovako:

<a href="slika.jpg" rel"lightbox"><img src="thumb.jpg" width="105" height="105" /></a>

Ukoliko želite da dodate naslov ili opis vaše slike, to činite dodavanjem atributa “title“, što izgleda ovako:

<a href="slika.jpg" rel"lightbox" title="naslov ili naziv slike"><img src="thumb.jpg" width="105" height="105" /></a>


<a href="slika.jpg" rel"lightbox" title="naslov ili naziv slike" rev="http://www.vasurl.com"><img src="thumb.jpg" width="105" height="105" /></a>

Ako želite da vaš natpis/naslov bude linkovan ka određenoj URL adresi, to činite dodavanjem još jednog atributa “rev”.

Korak 4
Lightbox.js pruža još jednu mogućnost, a to su grupa slika koja se nalaze unutar galerije, tako da se otvaraju kao velike slike. U ovom slučaju, potrebno je samo da definišete odnosno date naziv vašoj galeriji.

Npr. rel="lightbox[galerija]"

To izgleda ovako:

<a href="slika.jpg" rel"lightbox[vasagalerija]" title="naslov ili naziv slike" rev="http://www.vasurl.com"><img src="thumb.jpg" width="105" height="105" />image #1</a>
<a href="drugaslika.jpg" rel"lightbox[vasagalerija]" title="naslov ili naziv slike" rev="http://www.vasurl.com"><img src="thumb.jpg" width="105" height="105" />image #2</a>


Image #1 –označava koju sliku linkujete odnosno opisujete...
Naziv svake galerije mora biti različit
 
Forum » Web dizajn » Tutoriali » Lightbox galerija slika (Autor: Nemanja Vasic)
Page 1 of 11
Search:

Our poll
Šta mislite o sajtu?
Total of answers: 61
Login form
Statistics
Hosted by uCoz