Jūs esate sename manualai.lt puslapyje.
Naujasis puslapis yra v2.manualai.lt

Kuriant internetines nuotraukų galerijas labai patogu yra naudoti lightbox efektą. Šį efektą jau dabar galite rasti ne viename puslapyje. Lightbox išvertus iš anglų kalbos yra šviesos dėžutė, tačiau visur yra naudojamas angliškas efekto pavadinimas.

Lightbox efektas

tai yra efektas, kai paspaudžiame ant kokios nors nuotraukos ir tada užtema visas puslapis, o viduryje naršyklės padidėja paspaustoji nuotrauka.

Pavyzdį gyvai galite pamatyti čia: žiūrėti

Parsisiųsti kodą čia: siųstis

Ligtbox efekto techninis aprašymas

Norėdami išgauti šį efektą mums reikės jquery bibltiotekos, jquery ligtbox plugino ir jquery lightbox plugino css stiliaus aprašų. Juos visus galite parsisiųsti iš mūsų arba patikrinti ar nėra naujesnės šio plugino versijos jų oficialiame puslapyje.

Kai jau turite failus, juos reikia įterpti į savo kuriamą puslapį:

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.lightbox-0.5.min.js"></script>
<link rel="stylesheet" type="text/css" 
href="/css/jquery.lightbox-0.5.css" media="screen" />

Dabar pasitelkiant jQuery selektorius pasirenkame elementus, kuriems bus taikomas lightbox efektas:

<script type="text/javascript">
$(function() {
	// naudokite pavyzdį arba...
	$('a[@rel*=lightbox]').lightBox(); 
       // parenka visus a elementus su rel atributo reikšme lightbox
	// arba...
	$('#gallery a').lightBox(); 
       // parenka visus a elementus objekte su ID gallery
	// arba...
	$('a.lightbox').lightBox(); 
       // parenka visus a elementus su klase lightbox
	// arba...
	$('a').lightBox(); 
       // parenka visus puslapio a elementus
	// galima naudoti ir bet kokius kitus jQuery selektorius,
       // arba vieną iš šių pavyzdžių.
});
</script>

Nuorodos

jquery oficialus puslapis

jquery ligtbox efekto oficialus puslapis

mūsų pavyzdys

parsisiųsti pavyzdinius failus