vejskilt   Om FancyBox



Teknisk set er Fancybox en af de ganske mange Lightbox-look-alikes.


Nedenfor er beskrevet, hvordan Fancybox kan installeres og bruges. (Beskrivelsen er i omfang kun en 'komme-igang'):



Anvendelse


Links til individuel kode for en række af de opgaver, der kan løses med FancyBox:


xBillede. Vis enkelt billede
xBillede. Vis 2 eller flere billeder i galleri
xBillede. Automatisk visning af galleri når siden åbnes.
xInline tekst. Visning af inline tekst ved tryk på link.
xInline tekst. Automatisk visning af inline tekst.
xiFrame. Visning af iFrame ved tryk på link.
xiFrame. Automatisk visning af iFrame.
xiFrame. Youtube
xiFrame. Vimeo
xiFrame. GoogleMap, position




Download og dataplacering


  1. Fancybox dokumentation og download kan hentes her Tags typer.

  2. Udpak den downloadede Zip-fil. Udpakkede data placeres automatisk i mappen: fanctapps-fancybox-xxxxxxx. Mappen indeholder meget, som ikke skal indgå i den egentlige anvendelse af FancyBox.

  3. Opret mappen 'fancybox' i roden på det site, hvori FancyBox skal anvendes.

  4. Kopier mapperne 'lib' og 'source' til 'fancybox'-mappen.
    Tags typer
    Det er indholdet i de to mapper, der skal indgå i den egentlige anvendelse af FancyBox.



Links - Header del


På de sider i sitet, hvor FancyBox skal anvendes, indsættes nedenstående kode i deres HEAD-del (stier skal evt. skal tilpasses):


Det nemmeste er, at indsætte koden i en (allerede eksisterende) include-fil. Så er den automatisk til rådighed på alle de sider, der benytter denne fil.
Ellers skal den indsættes på hver side, hvorfra Fancy Box skal kunne benyttes.


Stien for 'jquery.fancybox.pack.js' og 'jquery.fancybox.css' passer til at filerne er lagt i sitets rodmappe med stien '/fancybox/source'. Er filerne lagt andetsteds skal stien tilpasses.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='fancybox/source/jquery.fancybox.pack.js'></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" media="screen" />


Den første linie henter jQuery-biblioteket fra en CDN-server (her Google). Find selv den. der måtte være relevant i situationen.


Den anden linie etablerer link til det primære js-program (og 'tilbehør'), der anvendes i FancyBox. Tilpas evt. linket.


Den tredie linie etablerer link til FancyBox' egen CSS-fil. Tilpas evt. linket.


OBS: I Webdok har det i visse situationer givet problemer med menuen, når den øverste af de tre linier er indsat. Sletning af denne begrænser ikke anvendelsen af FancyBox, men lader menuen fungere.



Optioner


Anvendelsen af FancyBox styres i stor udstrækning af 'optioner', der kan ses her: Tags typer.


I det omfang default-optionerne ikke passer til den aktuelle situation kan korrigerende optioner og værdier indsættes som parametre i 'fancybox-funktionen i det enkelte Event Script. Det gøres sådan:


$(document).ready(function () {
$('.selektor').fancybox({
.
.
autoSize : false,
.
.
});
});


Mellem funktionens parenteser til operatorer () placeres krølleparemterer ({}) og deri placeres optionerne med kommaseparering og : som separator mellem navn og værdi.


Den praktiske anvendelse af optioner vil i et vist omfang fremgå af de eksempler, der kan ses fra tabellen øverst på denne side.



Z-index


FancyBox anvender default Z-index lagene 8000 - 8100. Såfremt menu eller andet 'overskygger' uddata fra FancyBox, rettes problemet lettest ved at løfte FancyBox til f.eks. 28000 - 28100 i programmets egen CSS-fil. Der skal rettes ialt ca. 10 steder.



Standardkode


Koderne nedenfor kan umiddelbart bruges som grundlag for visning af et billede ad gangen ved klik på normalbilledet.


I stedet for "selector" kan anvendes en hvilkensomhelst anden ident. Den skal blot være den samme i både Event- og billed-delen.

Skal der på samme side være både manuelle og automatisk fancy-billede skal der anvendes to forskellige identer.


Event delen


Et Event Script er et lille javaScript der etablerer forbindelse mellem FancyBox-funktionaliteten i HTML-delen af den enkelte side og FancyBox' primære js-program. Den grundlægende opbygning er altid den samme, men indholdet kan / vil variere (minimum selektoren).

Event scriptet placeres normalt nederst i HEAD-delen, men kan også placeres (øverst) i BODY-delen.

Der kan være både maluelle og automatiske billeder på samme side.


Manuel start


Fancybox-billedet vises, når der klikkes på "basis-billedet".


<script>
$ (document).ready(function()
{$("a.selektor").fancybox();});
</script>


Auto start


Fancybox-billedet vises automatisk, når den aktuelle side åbnes.


<script>
$ (document).ready(function()
{$("a.selektor").fancybox().trigger('click');});
</script>



Billed delen

Både normal billede og 'Fancy' billede kan vises med denne kode.

I stedet for 'normalbillede' og 'fancybillede' indsættes sti til og navn på de to billeder. 'Title' skal enten undlades eller tilpasses tekstmæssigt pr billede.

Selektoren 'fancy' kan beholdes uændret, selvom der skal vises flere billeder fra samme side.


<a class="selector" href="fancybillede" title="Titel"><img src="normalbillede" alt="alt" /></a>

Eller f.eks:

<a class="selector" href="fancybillede"><img src="normalbillede" alt="bootstrap" style="float: right; margin-left: 15px" /></a>




















x
x