Sedmi čas – JavaScript

Dragan Filipović Korak po korak, Kurs Comments (0)

Skripte su programski kodovi koji se koriste za različite efekte u web dizajnu: Kontakt forma, padajući meni, galerije, efekti sa slikama i mnogo drugih efekata. Skripte koje ćemo koristiti su pisane u JavaScript programskom jeziku. Jednostavnije skripte se ubacuju dirktno u html kod, a komplikovanije se snimaju u poseban fajl sa ekstenzijom .js (npr: skriptagalerije.js).

Potrebno je da razlikujemo dve vrste skripti – BAZA EFEKATA (framework) i OSTALE SKRIPTE.

Baza efekata je fajl (npr: imebaze.js) koji u sebi sadrži definisane različite efekte (rotiranje, fade, slide, transition isl.). Ostale skripte su JS fajlovi u kojima je definisan konkretan efekat (padajući meni, galerija, slajder isl). Većina ostalih skripti koristi već gotove Baze efekata. Najpoznatije Baze efekata su jQuery, MooTools, Prototype, Scriptaculous …

Uobičajena imena fajlova baza: imebaze.verzija.min.js npr. jQuery.1.7.2.min.js

Reč min označava da je fajl minimiziran (“zipovan“), odnosno veličina fajla je smanjena zbijenim kodom.

 

Kako bi skripta funkcionisala, potrebno je povezati je sa html kodom i eventualno stilizovati css-om. Znači potrebna su nam tri osnovna fajla

JS, HTML i CSS fajl.

Sve skripte koje su vam potrebne za vaš web sajt možete preuzeti sa interneta. Na sajtovima sa kojih preuzimamo skripte skoro uvek postoji i objašnjenje za implementaciju te skripte. Princip je sličan za skoro sve skripte.

Ukratko – glavni koraci:

1. Preuzmemo fajlove (JS, CSS, slike).

2. Svaki fajl stavimo u svoj folder (CSS u CSS, slike u IMAGES, JS u JS)

3. Povežemo fajlove (CSS i JS)

4. Napravimo HTML elemente, na mesto koje želimo u BODY delu.

5. Aktiviramo skriptu.

6. Promenimo izgled i efekte

 

Dodavanje skripti naučićemo kroz primer Ligxtbox galerije, najpopularnije JS galerije.

1. Preuzmemo fajlove (JS, CSS, slike).

Potražimo skriptu na internetu (npr. guglamo js gallery), u ovom slučaju znamo tačno ime skripte pa je tražimo po imenu – guglajte lightbox2.

http://lokeshdhakar.com/projects/lightbox2/

Preuzmemo fajlove sa sajta. Download u meniju sa leve strane pa kliknemo na sliku sa kockicom.

Zipovani fajl koji smo preuzeli moramo da raspakujemo (treba vam program winrar, winzip, 7zip isl – verovatno već imate instaliran). Desni klik na lightbox2.51.zip, pa Extract to lightbox2.51 ili Extract all. Pronađemo folder u kome smo raspakovali fajlove, uglavnom je na istom mestu gde ste skinuli zipovani fajl – My Documents –> Downloads.

U folderu lightbox2,51 se nalaze sledeći fajlovi:

  • index.html
  • js/jquery-1.7.2.min.js
  • js/lightbox.js
  • css/lightbox.css
  • images/close.png
  • images/loading.gif
  • images/next.png
  • images/prev.png
  • Plus a few files for the demo page

2. Svaki fajl stavimo u svoj folder

Napomena: HTML fajlove ne prebacujete kod sebe, njih već imate – to su vaše HTML strane.

Sve što želimo da koristimo na našem sajtu mora biti u ROOT folderu. Tamo već imamo neke podfoldere kako bi bolje organizovali sajt.

Fajlove iz foldera lightbox2,51 prebacujemo u naš ROOT folder, i to svaki fajl u svoj odgovarajući folder. Znači otvorimo folder CSS, kopiramo lightbox.css i stavimo u naš ROOT folder u naš folder CSS. Onda otvorimo folder images, kopiramo sve što je u njemu ( sa sve folderom examples) i stavimo  u naš ROOT folder u naš folder images. Otvorimo folder JS , kopiramo sve što je u njemu i stavimo  u naš ROOT folder u naš folder JS (ovaj folder nemamo, pa treba prvo da ga napravimo u ROOT folderu – služiće nam kasnije za ostale skripte).

3. Povežemo fajlove (CSS i JS)

Naš sajt (strane) su HTML fajlovi (index.html, galerija.html isl.), ostali fajlovi (stil.css, header.jpg isl) su pomoćni fajlovi. Povezivanje fajlova se radi u HTML fajlu. MI sada pravimo galeriju pa ćemo raditi u galerija.html stani i tamo ćemo povezivati pomoćne fajlove.

- CSS već znamo kako se povezuje  (desni klik bilo gde u kodu — CSS styles -Attach Style Sheet, ili ikonica u CSS panelu.), pa povežemo lightbox.css (kada se pojavi prozor za Attach CSS, kliknemo na BROWSE i nađemo fajl lightbox.-css, nalazi se u CSS folderu).

- JS fajlove povezujemo na dva načina: Preko komande INSERT ili Kopiranjem koda sa DEMO strane.

1. Kopiramo kod sa DEMO strane.

Otvorimo fajl index.html koji se nalazi u folderu lightbox2.51 koji smo ranije preuzeli. Kliknemo na HOW TO USE dugme sa leve strane i kopiramo dve linije koda za povezivanje skripti.

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

 

lightbox-js-include

 

Kod koji smo kopirali postavimo na naš sajt – u fajl galerija.html, u HEAD deo strane.

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

 Ovo je povezivanje ili uključivanje JS skripte. src u kodu označava source – mesto gde se nalazi fajl.

Redosled povezivanja fajlova je veoma bitan. Prvi fajl uvek mora biti Baza Efekata u ovom slučaju jQuery, sledeći fajlovi su ostali pomoćni efekti (ukoliko postoje) i poslednji fajl je sama skripta koju koristimo (u ovom slučaju lightbox.js)

Sada je skripta povezana i može da se koristi – povezana je samo na strani galerija.html, ukoliko želimo da je koristimo i na dgrugim stranama, moramo je i tamo povezati.

4. Napravimo HTML elemente, na mesto koje želimo u BODY delu

Skripte služe da nekom delu sajta dodaju efekte. Deo sajta -HTML elemente sami pravimo. Ova skripta služi za‚galeriju, odnosno imamo male slike i kada neko klikne na sliku otvara se velika slika, a ekran u pozadini se zatamni. 

Znači treba da sprmimo malu sliku i odgovarajuću veliku sliku. Malu sliku ubacimo na mesto gde želimo da se vidi (u denu kolonu) i linkujemo je ka većoj slici. Prvo ćemo pripremiti desnu kolonu, odnosno obrisaćemo sadržaj.

  <div id="treci-red">
    <div class="leva-kolona">
    
    Content for  class "leva-kolona" Goes Here

    </div>
    <div class="desna-kolona">
    
    </div>
    <div class="clearfix"></div>
  </div>
</div>

 Slike ubacujemo komandom INSERT, pa moramo da pazimo gde se nalazi kursor miša jer će upravo na tom mestu da se ubaci slika. Kliknemo mišem u desnu kolonu (između otvarajućeg i zatvarajućeg taga), pa zatim INSERT — IMAGE, ili ikona za sliku u INSERT panelu. Izaberite malu sliku iz foldera EXAMPLES koji se nalazi u folderu IMAGES. Male slike nise naziv thumb-1.jpg, a odgovarajuća velika slika je image-1.jpg.

Ukoliko se pojavi prizor za ALT tekst tu upišemo opis slike. ALT – alternativni tekst služi za čitače ekrana, ljudi koji ne vide koriste screen reader – čitač ekrana i čitaju sadržaj vaše slike.

Kod za sliku je IMG tag koji ima prvu osnovnu osobinu SRC – source ili mesto gde se nalazi slika, a može sadržati i dimenzije slike, width i height.

<img src="images/examples/thumb-1.jpg" width="150" height="150" />

 Sliku treba da linkujemo ka većoj slici, znači pravimo link. Link se pravi tako što selektujemo element (kliknemo na sliku u dizajn delu) i u Properties panelu u polju za link ukucamo adresu, ili u našem slučaju nađemo veliku sliku preko ikone foldera odmah pored polja za link.

link-slika-slika

  

<a href="images/examples/image-1.jpg"><img src="images/examples/thumb-1.jpg" width="150" height="150" /></a>

 

Sačuvamo stranu i pogledamo u browser-u. Ukoliko kliknemo na manju sliku otvoriće se veća, ali bez ikakvih efekata, jer još uvek nema JavaScript-a.

5. Aktiviramo skriptu.

Aktivacija skripte uvek zavisi od programera koji je pravio skriptu, odnosno ne postoji univerzalni način. Uputstvo za aktivaciju se nalazi na DEMO strani.

Aktivacija podrazumeva dodavanje određenog koda našem HTML elementu kome želimo da dodelimo efekat skripte.

Ova skripta se aktivira tako što se linku doda osobina rel="lightbox"

Da se podsetimo osobina linkova, prva osobina je HREF, pa TARGET i TITLE. Osobine elementa se nalaze u otvarajućem tagu i obvojene su razmakom, sintaksa OSOBINA=“VREDNOST“. Novu osobinu dodajemo tako što stanemo mišem pored poslednje osobine i stisnemo SPACE, DW će nam ponuditi spisak šta želimo da dodamo.

<a href="http://blic.rs" target="_blank" title="posetite sajt Blica" >neki tekst</a>

 U našem slučaju stanemo mišem pored navodnika …/image.jpg“ kliknemo SPACE, izaberemo rel i unutar navodnika ukucamo reč lightbox.

<a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" width="150" height="150" /></a>

 Skripta je aktivirana, snimimo fajl i pogledamo sajt u browser-u.

Obzirom da pravimo galeriju treba da ubacimo još slika. Stanemo mišem u dizajn delu pored postiojeće slike i ubacimo drugu malu sliku (thumb-2.jpg), linkujemo je ka većoj slici (image-2.jpg) i aktiviramo dodavajući osobinu  rel="lightbox"  novom linku. 

<a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" width="150" height="150" /></a>
<a href="images/examples/image-2.jpg" rel="lightbox"><img src="images/examples/thumb-2.jpg" width="150" height="150" /></a>

 Ukoliko želimo da ove slike pripadaju istoj galeriji, odnosno da se pojave strelice za listanje slika kada otvorimo jednu sliku, moramo promeniti osobinu linkova, tako što pored reči lightbox dodamo ime galerije u ugaonoj zagradi, npr. rel="lightbox[galerija]" 

<a href="images/examples/image-1.jpg" rel="lightbox[galerija]"><img src="images/examples/thumb-1.jpg" width="150" height="150" /></a>
<a href="images/examples/image-2.jpg" rel="lightbox[galerija]"><img src="images/examples/thumb-2.jpg" width="150" height="150" /></a>
<a href="images/examples/image-3.jpg" rel="lightbox[galerija]"><img src="images/examples/thumb-3.jpg" width="150" height="150" /></a>
<a href="images/examples/image-4.jpg" rel="lightbox[galerija]"><img src="images/examples/thumb-4.jpg" width="150" height="150" /></a>

 Opis slike, ili naslov, dodaje se kao osobina linka titile

<a href="images/examples/image-1.jpg" rel="lightbox[galerija]" title="Ovo je opis slike - npr. Hrana na stolu"><img src="images/examples/thumb-1.jpg" width="150" height="150" /></a>

 6. Promenimo izgled i efekte

 Izgled se menja u CSS fajlu (lightbox.css), a efekti se menjaju u JS fajlu (lightbox.js).

1. Izmene efekata.

Otvorimo fajl lightbox.js, podešavanja efekata se uglavnom nalaze na početku fajla (u retkim slučajevima su na kraju fajla). Sivi tekst predstavlja komentare, odmah ispod komentara nalazi se kod za skriptu:

 

options = new LightboxOptions
lightbox = new Lightbox options
*/

(function() {
  var $, Lightbox, LightboxOptions;

  $ = jQuery;

  LightboxOptions = (function() {

    function LightboxOptions() {
      this.fileLoadingImage = 'images/loading.gif';
      this.fileCloseImage = 'images/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = "Image";
      this.labelOf = "of";
    }

 Ovde možemo promeniti trajanje promene veličine slike (resize) , kao i trajanje nestajanja slike (fade). Takođe možemo promeniti tekst Image i of, odnosno prevedemo na srpski, Slika i od. Kod izmene JS fajlova bitno je paziti da ne obrišemo neki znak (zarez, navodnike isl.)

2. Izmena izgleda

JS generiše neki HTML kod, odnosno ova skripta stvara neke HTML elemente. Ti elementi su formatirani u fajlu lightbox.css. Da bi znali koji format pripada određenom elementu koristimo INSPECT ELEMENT (ispitaj element) opciju u browseru. Google Chrome i novije verzije Mozilla imaju ugrađenu ovu opciju, za starije browsere treba skinuti dodatak Firebug.

Promenićemo boju fonta opisa slike.

Otvorimo sajt u browseru, kliknemo na malu sliku, i na velikoj slici stanemo mišem na deo koji želimo da promenimo (u našem slučaju opis slike), desni klik – inpect element (ili ispitaj element). Otvoriće se Panel na dnu ekrana. Na desnoj strani panela nalaze se HTML elementi, a na levoj strani je CSS. 

 

inspect-element

 

Ovde vidimo da se tekst koji želimo da promenimo nalazi u elementu span sa klasom lb-caption

<span class="lb-caption" style="display: inline;">Alternately you can press the right arrow key.</span>

 I da je njegov izgled definisan u fajlu lightbox.css na liniji 159. 

.lb-data .lb-caption {
font-size: 13px;
font-weight: bold;
line-height: 1em;
}

 Što znači da treba da otvorimo fajl lightbox.css, pronađemo liniju 159 i tamo izvršimo promene koje želimo, ili dodamo nove osobine.

INSPECT ELEMENT nam samo pomaže da pronađemo element i mesto u CSS-u gde je formatiran. Nije uvek jednostavno pronaći element, treba de se oslanjamo na imena elemenata i njihov raspored u kodu.

Npr. Treba promeniti boju okvira i zaobljenost ivica. Inspect element, kada stanemo na okvir, daje nam sledeće:

inspect-element2

 

U delu za HTML vidimo neki element a sa klasom lb-prev.  A u CSS delu taj element nema belu boju (što je boja okvira koju želimo da promenimo). Ovog puta moramo da pronađemo element koji želimo da promenimo jer nismo uspeli da stanemo tačno na okvir. Ovo se desilo jer preko okvira postoje i drugi elementi koji se preklapaju.

Da bi našli okvir, tražimo sledeće:

U CSS delu treba biti definisana bela pozadina (background-color:white ili #fff). U HTML delu treba nam neki spoljni element, znači kliknemo mišem na sledeći element koji je iznad trenutno izabranog, u ovom slučaju DIV CLASS=LB-NAV, obyirom da i on nema definisanu belu boju idemo na sledeći element. Mada smo mogli predpostavit da elementi koji nose naziv NAV služe za navigaciju, odnosno strelice levo i desno. Sledeći element je IMG što je slika pa nam sada ne treba. Element iznad je DIV CLASS=LB-CONTAINER, takođe nema belu boju.  Okvir je u ovom slučaju element DIV CLASS=LB-OUTERCONTAINER. sa CSS-om koji je definisan u fajlu lightbox.css na liniji 35. 

.lb-outerContainer {
position: relative;
background-color: white;
width: 250px;
height: 250px;
margin: 0 auto;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}

 I u ovom delu CSS-a izvršimo izmene koje želimo.

Dalje izmene radimo pomoću INSPECT ELEMENT-a. 

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.