Slovenski lightbox efekt

lightbox_thumbNaj bo vaša spletna stran v koraku s časom.


OGLEJTE SI LIGHTBOX



Navodila za uporabo:

Prenesite si vse datoteke. Najdete jih med Prenosi (HTML).


Preden začnete vstavljati in urejati efekt se prepričajte, da imate mape z imenom images, js in css na istem mestu, kot svoj HTML dokument!

V glavo ( med <head> in </head> ) svojega HTML dokumenta vstavite spodnjo kodo:

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


Nato naredite thumb (manjšo sliko) vaše večje slike, ki bi jo radi prikazali z lightbox efektom.

Manjša slika bo delovala, kot povezava na večjo sliko, ki se bo odprla na zasenčenem ozadju.


HTML Koda:

<a href="/PotDoVelikeSlike" rel="lightbox" title="Naslov"><img src="/PotDoMaleSlike" height="višina" width="širina"></a>


V primeru skupine uporabite namesto rel="lightbox" rel="lightbox[ime_skupine]"


Pa si poglejmo primera:

1. Skupina slik z lightboxom

 

OGLEJTE si skupino z lightboxom


HTML koda:

<html>

<head>
<meta http-equiv="Content-Language" content="sl">
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="/js/lightbox.js" type="text/javascript"></script>
</head>

<body>

<p><a href="/images/slika_velika.png" rel="lightbox[skupina]" title="Naslov 1"><img border="0" src="/images/slika_mala.png" width="150" height="120"></a>
<a href="/images/slika2_velika.png" rel="lightbox[skupina]" title="Naslov 2"><img border="0" src="/images/slika2_mala.png" width="150" height="120"></a></p>

</body>

</html>


*Sliki sestavljata skupino, zato lahko kliknemo Naslednja in Prejšnja.


2. Le ena slika (brez thumba) z lightbox efektom

 

OGLEJTE si uporabo le ene slike.


HTML koda:

 

<html>

<head>
<meta http-equiv="Content-Language" content="sl">
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="/js/lightbox.js" type="text/javascript"></script>
</head>

<body>

<p><a href="/images/slika3_velika.png" rel="lightbox" title="Le ena slika"><img border="0" src="/images/slika3_velika.png" width="150" height="120"></a></p>

</body>

</html>


*Nastavili smo manjšo širino in višino, kot dejansko je in iz tega naredili thumb. Če boste delali tako pazite na razmerje stranic, da slika ne bo popačena!



Upravljanje datotek:



Datoteka lightbox.js v mapi js

Vrstica 52: Nastavite prosojnost ozadja (sedaj 0.8)

Vrstica 55: Nastavite hitrost prikaza slike (sedaj 7)


Slovenski lightbox lahko najdete med prenosi (HTML).

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.