GOOGLE

This is Da' Place for Rest


16.08.2006.

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
<< 08/2006 >>
nedponutosricetpetsub
0102030405
06070809101112
13141516171819
20212223242526
2728293031


Biografija :

Izdvajam !
Pozadina bloga
Uputstvo za izmjene pozadine na vašem blogu.
YouTube na Blogu
Kratko objašnjenje za postavljanje videa na blog
Rivalstvo blog sistema
Prednosti, mane i verdikt o BIH blog sistemima
Kreirajte svoj blog
Kompletno uputstvo za kreiranje sopstevnog dizajna za blog
Instalacija foruma
Detaljno uputstvo za instaliranje foruma na vas sajt
Lightbox galerija
Postavljanje odlicne galerije na blogg
Music player
Postavljanje odlicnog playera na vas blog
FTP
Opsirno uputstvo za ostvarenje FTP konekcije sa hostom.
Uredite post
Uredite dizajn svog posta, dodajte mu sitne stvari koje mnogo znače.

Cilj :
Voditi World Wide Web do njegovog maksimalnog potencijala razvijajući protokole i smjernice koje osiguravaju dugotrajni rast Weba.

Imati kompaktan blog dizajn sa internim CSS-om i bez ikakvih slika kako bih poboljšao efikasnot bloga.

Kontakt :
mensurh at gmail dot com

Sve postojeće primjedbe ili sugestije u cilju bolje organizovanosti i veče posjećenosti bloga šaljite na mail. Također mail ima net passport tako da ga koristim i kao msn a većinu vremena sam online. Mail je malo zamaskiran tako da ono >at< predstavlja >@< , a ono >dot< predstavlja >.< .

MOJI FAVORITI

BROJAČ POSJETA
29141

Powered by Blogger.ba