Vodič je stariji od 2 godine i možda nije u potpunosti aktualan. Za provjeru, koristite “pitaj učitelja”.

fancyBox – prikaz uvećanih fotografija na vašem webu

fancyBox – prikaz uvećanih fotografija na vašem webu
Autor članka: Igor Kovačić
Kategorije: Programiranje
Datum objave: 30.07.2013

Postoje razni alati za uvećavanje fotografija na web stranicama. fancyBox je jako dobro rješenje bogatih mogućnosti, bazirano na jQuery biblioteci, jednostavno za implementaciju i prilagodbe.

Nedostatak je cijena – za komercijalnu upotrebu potrebno je kupiti fancyBox. Cijena iznosi približno 100,00kn za jednu, odnosno 500,00kn za bezbroj različitih domena.

1. korak: pozivanje odgovarajućih JavaScript i CSS datoteka

Potrebne JavaScript datoteke:

  • jQuery
  • fancyBox

Potrebne CSS datoteke:

  • fancyBox

jQuery se može preuzeti na više načina:

  1. preuzimanjem posljednje verzije sa stranica jquery.com
  2. pozivanjem sa adrese http://code.jquery.com/jquery-latest.min.js

 

Preporučujemo prvi način s obzirom da eventualna nedostupnost adrese code.jquery.com može uzrokovati greške u funkcioniranju stranice.

Ostale datoteke preuzimite na stranicama fancyBoxa.

Nakon preuzimanja datoteka, pozovite potrebne datoteke na sljedeći način:

<!-- jQuery library -->
<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- fancyBox -->
<link rel="stylesheet" href="js/jquery.fancybox.css" type="text/css" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>

Napomena: prilagodite staze sukladno strukturi foldera i nazivima datoteka.

Dobre prakse:

  • uvijek nastojite koristiti minificiranu verziju CSS i JS datoteka, tako ćete ubrzati učitavanje stranice
  • spajajte CSS fileove koji se koriste na svim stranicama u jedan file, isto vrijedi i za JS
  • servirajte CSS i JS fileove s poddomena
  • jQuery pozivajte unutar HTML head tagova, a ostale JS datoteke prije zatvaranja HTML body taga

2. korak: dodavanje fotografije ili galerije slika

Struktura pogodna za fancyBox je sljedeća:

<a class="fancybox" rel="gallery" href="big_image_1.jpg">
	<img src="thumb_1.jpg" alt="Photo 1 name" />
</a>
<a class="fancybox" rel="gallery" href="big_image_2.jpg">
	<img src="thumb_2.jpg" alt="Photo 2 name" />
</a>

Ovaj kod dodajemo na mjesto gdje će se ispisati umanjene sličice.

Href vrijednost anchor taga mora biti adresa velike fotografije, dok src vrijednost img taga mora biti adresa male fotografije.

Fotografije koje grupiramo u galeriju trebaju imati jedna rel atribut na anchor tagu. Ukoliko prikazujete samo jednu fotografiju, možete preskočiti rel atribut.

CSS prikaza malih fotografija uredite po želji.

3. korak: postavljanje JavaScript koda

JS kod možete dodati u poseban file, unutar head ili body tagova.

Kod koji je pogodan za ubacivanje unutar head tagova:

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

Primjer uživo

Za više, pročitajte dokumentaciju na fancyBoxovim stranicama.

Nadamo se da je ovaj vodič koristio. ;-)

Komentirajte prvi!

Pratite komentare na članak 'fancyBox – prikaz uvećanih fotografija na vašem webu' putem RSS feeda.

Ostavite komentar na ovaj članak

Uvredljivi i spam komentari biti će obrisani. Ukoliko se Vaš komentar ne pojavi odmah, pričekajte da ga odobrimo ;-). Odgovore na pitanje brže ćete dobiti ukoliko nas kontaktirate putem forme pitajte učitelja.