Avtor: -primož-
23.10.09
| Slovenski lightbox efekt |
| HTML vodiči |
 Naj 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>
<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). |
| Sorodni vodiči | |
Moje-Mesto.com
Slovenska spletna stran s HTML, CSS, Windows in Photoshop vodiči.
