beats by dre cheap

Lightbox galerija

Danas cemo predstavljatii projekat sajta huddletogether.com koji nije bas aktivan sajt, ali sa vremena na vrijeme izda poneki projekat.
Do sada su izdata dva projekta, slicna, jer se radi o prvoj i drugoj verziji galerije pod nazivom Lightbox.
Demo galerije mozete vidjeti na slijedecem linku: http://www.huddletogether.com/projects/lightbox2/

Galeriju mozete skinuti sa oficijelnog sajta, odnosno klikom na slijedeci link: http://www.huddletogether.com/projects/lightbox2/lightbox2.02.zip
Naime, radi se o Javascript galeriji koja se sadrzi od 4 javascript fajla smjestena u folderu pod nazivom js.
Zatim jedan CSS fajl smjesten u folderu pod nazivom css.
Pored toga dobit cete folder u kojem smjestate thumbove (mini slike), kao i slike u punoj velicini koje ce se prikazivati.
I index.html fajl u kojem se nalazi uputstvo za pokretanje galerije koje ce biti objasnjeno u nastavku ovog teksta.

Sve fajlove osim ndex.html-a kopirajte na svoj hosting, recimo da se tom sadrzaju sada pristupa otprilke ovako: http://www.mojsajt.com/galerija
tako da cete imati slijedece ispravne linkove:
http://www.mojsajt.com/galerija/js
http://www.mojsajt.com/galerija/css
http://www.mojsajt.com/galerija/images

Sada prelazimo na aktiviranje galerije.
[NAPOMENA:]Kada dodajem linkove dodavat cu dvije vrste. Jedni su namijenjeni u slucaju da ovu galeriju koristite za svoj websajt pa ste sadrzaj galerije uploadovali u ist direktorij sa sajtom, a to kod blogga nije moguce.

Prvo trebamo dodati 3 linije code-a u html bloga.
To cete uraditi tako sto cete kopirati slijedeci tekst negdje kod zaglavlja bloga:

ZA SAJT:

<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>

ZA BLOGGER:

<script type="text/javascript" src="http://www.mojsajt.com/galerija/js/prototype.js"></script>
<script type="text/javascript" src="http://www.mojsajt.com/galerija/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="http://www.mojsajt.com/galerija/js/lightbox.js"></script>


Nakon toga slicnu stvar trebamo uraditi i sa CSS fajlom. Njega mozete dodati odmah ispod Javascript fajlova koje smo maloprije dodavali.
Kopirajte slijedeci code:

ZA SAJT:

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

ZA BLOGGER:

<link rel="stylesheet" href="http://www.mojsajt.com/galerija/css/lightbox.css" type="text/css" media="screen" />

Sada smo osposobili vas blog za prikazivanje slika na nacin koji je predvidjen sa ovom galerijom

Jos nam je ostalo da dodajemo slike na blog.
Sa obzirom da ime vise nacina dodavanja slika ja cu ih predstaviti sto vise.
Jos jednom da kazemo da u slucaju ako ovu galeriju postavljate na svoj sajt odnosno ako ste u isti direktorij sa sajtom kopirali i folder images koji ste dobili uz ovu galeriju onda sve slike smjestate u folder images.
I kada navodite link do slike ne morate pisati kod na slijedeci nacin: http://www.mojsajt.com/galerija/slika.gif vec images/slika.gif.

Primjer dodavanja slik:

<a href="http://www.mojsajt.com/galerija/images/image-1.jpg" rel="lightbox[priroda]">Ovdje ide komentar</a>
<a href="http://www.mojsajt.com/galerija/images/image-2.jpg" rel="lightbox[priroda]">Ovdje ide komentar</a>
<a href="http://www.mojsajt.com/galerija/images/image-3.jpg" rel="lightbox[ja]">Ovdje ide komentar</a>

Tekst koji se nalazi izmedju [] zagrada predstavlja album i koliko imate zagrada izmedju kojih stoji tekst npr: priroda toliko slika ce imati taj album.

Najpotpunije dodavanje slike ostvarit cete ovim code-om:

<a href="http://www.mojsajt.com/galerija/images/g1.jpg" rel="lightbox[priroda]" title="Ovdje ide komentar" ><img src="http://www.mojsajt.com/galerija/images/thumb-1.jpg" width="100" height="40" /></a>

Dio koda <img src="http://www.mojsajt.com/galerija/images/thumb-1.jpg" predstavlja putanju do male slike na koju klikom pokrecete tvaranje slike u pravoj velicini.
Dio koda width="100" height="40" predstavlja visinu i duzinu male slike.

GOOGLE
http://google.blogger.ba
16/08/2006 02:09