Lightbox – skripta za slike

Dragan Filipović Kurs, Treći deo - Skripta Comments (2)

Lightbox je veoma popularna skripta za lepše prikazivanje slika na sajtu.

Ponovićemo korake za rad sa skriptama:

1. Preuzmemo fajlove i stavimo ih u odgovarajuće foldere.

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

Fajlovi su:

  • 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

index.html fajl je strana sa informacijama, nju ne treba da prebacimo na naš sajt. Sve ostale fajlove preuzmemo.

2. Povezivanje fajlova

CSS – povežemo css fajl koji smo preuzeli (desni klik, css styles ,attach css. ili kraće preko ikonice za povezivanje css u css panelu.)

JS – u HEAD delu stavimo sledeća 2 reda (ili 3 reda u zavisnosti od verzije skripte):

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

3. Izrada HTML dela

Skripta služi za ‘uvećavanje’ slike, odnosno kada neko klikne na malu sliku treba da se otvori veća slika. Ovo znači da treba da ubacimo malu sliku i da je linkujemo ka većoj.

U desnoj koloni ubacite malu sliku (o-meni-slika-tn.jpg ovo tn označava thumbnail) – Insert -image, ili preko Assets panela. Ukucamo alternativni tekst – opis slike.

Selektujemo sliku i napravimo link ka većoj slici. U Properties baru pored polja za link kliknemo na ikonicu foldera (browse) pronađemo veću sliku (o-meni-slika.jpg).

4. Aktivacija skripte

Skripta se aktivira tako što linku dodamo novi atribut rel=“lightbox“

npr.

<a href="images/o-meni-slika.jpg" rel="lightbox">slika1</a>

Ukoliko imate više slika, onda koristite atribut  rel=“lightbox[roadtrip]“ koji omogućava da listate slike.

npr.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a> 
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a> 
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Comments (2) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Komentara (2)

  • Marko Bakic

    |

    Ukoliko sve ovo uradimo i kad ubacujemo atribut rel nece da se pojavi u padajucem meniju ligntbox, gde bi mogla da bude greska?

    Thumb up 0 Thumb down 0

    Odgovori

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.