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

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>

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

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