20/11/2025
I en verden, hvor visuelt indhold er konge, er det afgørende at præsentere dine billeder, videoer og HTML-elementer på en elegant og brugervenlig måde. Her kommer Fancybox ind i billedet – et populært JavaScript-bibliotek, der er designet til at gøre netop dette. Uanset om du ønsker at vise et billede i fuld skærm, afspille en video uden at forlade siden, eller præsentere en iframe med avanceret indhold, tilbyder Fancybox en responsiv og fuldt tilpasselig løsning. Denne artikel vil guide dig gennem brugen af Fancybox, fra grundlæggende opsætning til avancerede funktioner, herunder dens integration med AJAX-ZOOM for en endnu mere imponerende multimedieoplevelse.
Hvad er Fancybox?
Fancybox er et JavaScript-bibliotek, der giver dig mulighed for at vise billeder, videoer og enhver form for HTML-indhold i en elegant 'lightbox' eller modalvindue. Det er bygget med moderne webdesign i tankerne og tilbyder en række funktioner, som du ville forvente af et professionelt værktøj:
- Berøringsaktiveret: Perfekt til mobile enheder med understøttelse af touch-gestus, inklusive knib-for-zoom.
- Responsivt design: Tilpasser sig automatisk skærmstørrelsen for at give en optimal visningsoplevelse på tværs af alle enheder.
- Fuldt tilpasseligt: Masser af indstillinger og en robust API til at skræddersy udseendet og funktionaliteten.
Afhængigheder og Kompatibilitet
For at Fancybox kan fungere, kræver det jQuery. Selvom jQuery 3+ foretrækkes, er Fancybox kompatibel med jQuery 1.9.1+ og jQuery 2+. Det er blevet grundigt testet i en række browsere og enheder, herunder Chrome, Firefox, IE10/11, Edge, iOS Safari og Nexus 7 Chrome, hvilket sikrer bred kompatibilitet for dine brugere.
Sådan Kommer Du i Gang med Fancybox
At komme i gang med Fancybox er ligetil. Du skal inkludere de nødvendige CSS- og JavaScript-filer i din HTML-fil. Det er vigtigt at huske at indlæse jQuery-biblioteket før Fancybox-filerne.
Her er et grundlæggende HTML-skabelon eksempel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Min side</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>
<!-- Dit HTML-indhold her -->
<!-- JS -->
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
</body>
</html>
Vigtige bemærkninger:
- Inkluder altid jQuery-biblioteket først.
- Hvis du allerede har jQuery på din side, skal du ikke inkludere det en anden gang.
- Inkluder ikke både `fancybox.js` og `fancybox.min.js` filer. Vælg én.
- Nogle funktioner (som Ajax og iframes) vil ikke virke, når du åbner lokale filer på din computer; koden skal køre på en webserver.
Download og Installation
Du kan downloade den seneste version af Fancybox fra GitHub, eller du kan linke direkte til Fancybox-filerne via cdnjs. For dem, der foretrækker pakkehåndtering, kan Fancybox også installeres via Bower eller npm:
# Bower
bower install fancybox --save
# NPM
npm install @fancyapps/fancybox --save
Anvendelse af Fancybox
Der er flere måder at aktivere Fancybox på:
1. Initialiser med data-attributter:
Den mest simple måde er at tilføje `data-fancybox`-attributten til et link. En billedtekst kan tilføjes med `data-caption`-attributten:
<a href="image.jpg" data-fancybox data-caption="Min billedtekst">
<img src="thumbnail.jpg" alt="" />
</a>
Ved denne metode anvendes standardindstillingerne. Du kan tilpasse dem via `data-options`-attributten.
2. Initialiser med JavaScript:
Vælg elementer med en jQuery-selector og kald `fancybox`-metoden:
<script type="text/javascript">
$("[data-fancybox]").fancybox({
// Indstillinger her
});
</script>
For elementer, der eksisterer nu eller i fremtiden, kan du bruge `selector`-indstillingen:
$().fancybox({
selector: '[data-fancybox="images"]',
loop: true
});
3. Manuel aktivering via JavaScript:
Fancybox kan aktiveres direkte fra JavaScript uden et trigger-element. For eksempel at vise en simpel besked:
$.fancybox.open('<div class="message"><h2>Hej!</h2><p>Du er fantastisk!</p></div>');
Gruppering af Elementer (Gallerier)
For at oprette et galleri skal du bruge den samme `data-fancybox`-værdi for hvert element i gruppen. Hver gruppe skal have en unik værdi:
<a href="image_1.jpg" data-fancybox="gruppe1" data-caption="Billedtekst #1">
<img src="thumbnail_1.jpg" alt="" />
</a>
<a href="image_2.jpg" data-fancybox="gruppe1" data-caption="Billedtekst #2">
<img src="thumbnail_2.jpg" alt="" />
</a>
Fancybox forsøger automatisk at detektere indholdstypen baseret på URL'en. Hvis det ikke kan detekteres, kan typen indstilles manuelt med `data-type`-attributten (f.eks. `data-type="image"`).
Indholdstyper i Fancybox
Fancybox understøtter en bred vifte af indholdstyper:
- Billeder: Standardmåden er at bruge miniaturebilleder, der linker til større billeder. Du kan også forudindlæse billeder fuldt ud, eller vise dem med det samme, mens dataene modtages, ved at angive `data-width` og `data-height`. Fancybox understøtter også `srcset` for responsive billeder og kan beskytte billeder mod højreklik-download med indstillingen `protect: true`.
- Inline HTML: Brug et skjult HTML-element med et unikt ID, og link til det med `data-src="#dit-id"`. Fancybox tilføjer en lille lukkeknap (medmindre deaktiveret) og anvender ingen yderligere stilarter udover centrering, hvilket giver dig fuld kontrol via CSS.
- Ajax: Indlæs indhold via AJAX ved at tilføje `data-type="ajax"` og `data-src="din_url"`. Du kan også definere en selector med `data-filter` for kun at vise en del af svaret.
- Iframe: Vis eksternt indhold (webpages, PDF'er) i en iframe. Brug `data-type="iframe"` og `data-src="din_url"`. Du kan kontrollere iframe's dimensioner via CSS eller JavaScript. Fancybox forsøger at forudindlæse iframes og justere størrelsen, men der er begrænsninger på grund af 'Same Origin Policy'.
- Indlejret Indhold: Fancybox understøtter indlejring fra populære sites som YouTube, Vimeo, Google Maps og Instagram ved blot at angive sidens URL i `href`-attributten. Video-dimensioner kan styres med CSS, og video-parametre kan specificeres via URL'en eller JavaScript for mere kontrol (f.eks. `autoplay`, `controls`).
Fancybox Indstillinger (Options)
Fancybox tilbyder et væld af indstillinger til at tilpasse funktionaliteten og udseendet. Her er nogle af de mest almindelige:
- `loop`: Aktiver uendelig gallerinavigation (standard: `false`).
- `margin`: Plads omkring billedet, ignoreret ved zoom eller lille viewport (standard: `[44, 0]`).
- `gutter`: Vandret plads mellem slides (standard: `50`).
- `keyboard`: Aktiver tastaturnavigation (standard: `true`).
- `arrows`: Vis navigationspile ved skærmkanterne (standard: `true`).
- `infobar`: Vis infobar (tæller og pile øverst) (standard: `false`).
- `toolbar`: Vis værktøjslinje (knapper øverst) (standard: `true`).
- `buttons`: Hvilke knapper der skal vises i øverste højre hjørne (f.eks. `['slideShow', 'fullScreen', 'thumbs', 'close']`).
- `smallBtn`: Vis lille lukkeknap for HTML/inline/ajax indhold (standard: `'auto'`).
- `protect`: Deaktiver højreklik for billeder (standard: `false`).
- `modal`: Gør indholdet 'modalt' (deaktiverer tastaturnavigation, skjuler knapper osv.) (standard: `false`).
- `image.preload`: Forudindlæs billeder (standard: `'auto'`).
- `ajax.settings`: Indstillinger for AJAX-anmodninger.
- `iframe.preload`: Forudindlæs iframe (standard: `true`).
- `animationEffect`: Åbn/luk animationstype (f.eks. `'zoom'`, `'fade'`, `'zoom-in-out'`).
- `animationDuration`: Varighed i ms for åbn/luk animation (standard: `366`).
- `transitionEffect`: Overgangseffekt mellem slides (f.eks. `'fade'`, `'slide'`, `'circular'`).
- `transitionDuration`: Varighed i ms for overgangsanimation (standard: `366`).
- `mobile`: Specifikke indstillinger for mobile enheder (f.eks. `clickContent`, `clickSlide`).
- `lang` / `i18n`: Internationalisering af tekster.
Du kan indstille instansindstillinger ved at sende et gyldigt objekt til `fancybox()`-metoden:
$('[data-fancybox]').fancybox({
thumbs: {
autoStart: true
}
});
Globale standardindstillinger kan justeres via `$.fancybox.defaults`-navneområdet:
$.fancybox.defaults.animationEffect = "fade";
Individuelle elementer kan have brugerdefinerede indstillinger via `data-options`-attributten, der indeholder et korrekt formateret JSON-objekt.
Fancybox API: Avanceret Kontrol
Fancybox API'en tilbyder metoder til at styre Fancybox-instanser, hvilket giver dig mulighed for at udvide plugin'et og integrere det med andre webapplikationer.
Kerne-metoder:
Disse metoder påvirker/håndterer instanser:
- `$.fancybox.close(all)`: Lukker kun den aktuelt aktive eller alle Fancybox-instanser.
- `$.fancybox.open(items, opts, index)`: Åbner Fancybox med det samme. `items` kan være en samling af jQuery-objekter eller et array af simple objekter, hvilket er nyttigt for at skabe indholdsfiltre eller manuelt definerede gallerier.
Instans-metoder:
Når du har en reference til en Fancybox-instans (f.eks. `var instance = $.fancybox.getInstance();`), er følgende metoder tilgængelige:
- `instance.next(duration)`: Gå til næste gallerielement.
- `instance.previous(duration)`: Gå til forrige gallerielement.
- `instance.jumpTo(index, duration)`: Skift til valgt gallerielement.
- `instance.update()`: Opdater position og indhold af alle slides.
- `instance.setContent(slide, content)`: Indlæs brugerdefineret indhold i sliden.
- `instance.close()`: Luk instansen.
Events (Begivenheder):
Fancybox udløser flere begivenheder, som du kan lytte til for at udføre brugerdefineret kode:
- `onInit`: Når instansen er initialiseret.
- `beforeLoad`: Før indholdet af en slide indlæses.
- `afterLoad`: Når indholdet af en slide er indlæst.
- `beforeShow`: Før åbningsanimationen starter.
- `afterShow`: Når indholdet er indlæst og animeret.
- `beforeClose`: Før instansen forsøger at lukke (returner `false` for at annullere lukningen).
- `afterClose`: Efter instansen er lukket.
- `onActivate`: Når instansen bringes i forgrunden.
- `onDeactivate`: Når en anden instans er aktiveret.
Event callbacks kan indstilles som funktionsegenskaber i indstillings-objektet ved initialisering, eller du kan tilknytte event-handlere til alle instanser med `$(document).on('eventName.fb', function(e, instance, slide) { ... });`.
Moduler i Fancybox
Fancybox-koden er opdelt i moduler, der udvider kernefunktionaliteten. Du kan bygge din egen Fancybox-version ved at udelade unødvendige moduler. Hvert modul kan tilpasses og styres programmatisk:
- `fullScreen`: `autoStart` (standard: `false`).
- `touch`: `vertical` (tillad lodret træk, standard: `true`), `momentum` (fortsat bevægelse efter slip, standard: `true`).
- `hash`: `null` (sæt `false` for at deaktivere hashændring).
- `media`: Brugerdefinerede mediatyper.
- `slideShow`: `autoStart` (standard: `false`), `speed` (standard: `4000`).
- `thumbs`: `autoStart` (vis miniaturer ved åbning, standard: `false`), `hideOnClose` (skjul miniaturegitter ved lukning, standard: `true`).
Eksempel på aktivering af miniaturevisning ved start:
$('[data-fancybox="images"]').fancybox({
thumbs: {
autoStart: true
}
})
AJAX-ZOOM med Fancybox: En Kraftfuld Kombination
Når du har brug for avancerede zoom- og 360/3D-visningsfunktioner ud over standardbilledvisning, er integrationen af AJAX-ZOOM med Fancybox en fremragende løsning. AJAX-ZOOM er et robust værktøj til dyb zoom og præsentation af 360-graders og 3D-indhold.
Dette gøres typisk ved hjælp af en specifik wrapper-udvidelse: `jquery.axZm.openAjaxZoomInFancyBox.js`. Denne udvidelse udløser og administrerer AJAX-ZOOM-visningen inde i Fancybox og gør den første generation af Fancybox responsiv.
For at anvende denne integration skal du inkludere jQuery, Fancybox JavaScript/CSS, AJAX-ZOOM kerne JavaScript/CSS og `$.axZm.openAjaxZoomInFancyBox`-udvidelsen i din HTML.
Definering af Indhold i AJAX-ZOOM Viewer
Du kan definere indholdet, du vil indlæse i AJAX-ZOOM, ved hjælp af forskellige URL-parametre:
- `zoomData` parameter:
Kan sendes som en CSV-streng, hvor billedstier er adskilt af et lodret streg-tegn (`|`). Dette kræver en modificeret Fancybox-version for Fancybox generation 1, men fungerer uden problemer med Fancybox 2. Eksempel:jQuery.openAjaxZoomInFancyBox({axZmPath: '../axZm/', queryString: 'example=23&zoomData=/pic/zoom/boutique/boutique_001.jpg|/pic/zoom/boutique/boutique_002.jpg'})
Alternativt kan `zoomData` være en komprimeret og serialiseret PHP-array-streng for at skjule stier og forkorte URL'en. AJAX-ZOOM dekomprimerer automatisk strengen. - `zoomID` eller `zoomFile` parameter:
Disse parametre bestemmer, hvilket billede der skal indlæses først i et galleri. `zoomID` er billedets nummer (startende fra 1), mens `zoomFile` er den fulde sti med filnavnet. - `zoomDir` parameter:
Indlæs en hel mappe med billeder. Du kan angive den fulde sti eller en sti relativt til `$zoom['config']['pic']` indstillingen i `zoomConfig.inc.php`. - `3dDir` parameter:
Indlæs 360/3D-animationer. Angiv stien til mappen, der indeholder billederne. For 3D (multirow) skal kildebillederne placeres i undermapper (f.eks. `/row_1`, `/row_2`).
AJAX-ZOOM som IFRAME
Du kan også indlæse AJAX-ZOOM-indhold i en responsiv Fancybox som en IFRAME:
<a onclick="jQuery.openAjaxZoomInFancyBox({href: 'example33_vario.php?zoomData=/pic/zoom/estate/house_01.jpg', iframe: true})" href="javascript:void(0)">IFRAME galleri</a>
$.openAjaxZoomInFancyBox(options) parametre:
Denne wrapper-funktion har en række indstillinger:
| Option | Standard | Beskrivelse |
|---|---|---|
axZmPath | 'auto' | Sti til /axZm mappe (f.eks. /test/axZm/). |
queryString | null | Enkelt streng, der definerer billeder, der indlæses. |
loadingMsg | 'Loading, please wait...' | Ventebesked. |
axZmCallBacks | {} | AJAX-ZOOM callbacks. |
fullScreenApi | false | Forsøg at åbne AJAX-ZOOM i browsers fuldskærmstilstand. |
iframeMode | false | Aktiver iframe-tilstand. Alias: iframe. |
scrolling | 'no' | Scroll iframe. |
href | null | Alias for queryString til iframes. |
boxMargin | 30 | Margen af boksen til browserkanten. |
boxPadding | 10 | Boksens polstring. |
boxCenterOnScroll | true | Centrer boks ved scroll. |
boxOverlayShow | true | Vis Fancybox-overlay. |
boxOverlayOpacity | 0.75 | Opacitet af overlay. |
boxOverlayColor | '#777' | Farve på overlay. |
boxTransitionIn | 'fade' | Overgangstype ved åbning ('elastic', 'fade' eller 'none'). |
boxTransitionOut | 'fade' | Overgangstype ved lukning. |
boxSpeedIn | 300 | Overgangshastighed ved åbning. |
boxSpeedOut | 300 | Overgangshastighed ved lukning. |
boxEasingIn | 'swing' | Easing-funktion ved åbning. |
boxEasingOut | 'swing' | Easing-funktion ved lukning. |
boxShowCloseButton | true | Vis lukkeknap. |
boxEnableEscapeButton | true | Luk boks, når brugeren trykker Esc. |
boxOnClosed | function(){} | Callback, når boksen er lukket. |
boxOnComplete | function(){} | Callback, når boksen er åbnet. |
Det er vigtigt at bemærke, at ved at sende `example=someNumber` til AJAX-ZOOM via `queryString`, kan standardindstillinger fra `/axZm/zoomConfig.inc.php` blive overskrevet i `/axZm/zoomConfigCustom.inc.php`.
Ofte Stillede Spørgsmål (FAQ)
Spørgsmål: Hvorfor hopper faste elementer, når Fancybox åbner/lukker?
Svar: Dette skyldes, at Fancybox midlertidigt fjerner scrollbaren for at forhindre, at siden scroller bagved lightbox'en. Du kan afhjælpe dette ved at tilføje CSS-klassen `compensate-for-scrollbar` til dine fast positionerede elementer. Fancybox måler scrollbarens bredde og anvender denne værdi som `margin-right` via denne CSS-klasse. Hvis dit element har `width:100%`, skal du positionere det ved hjælp af `left` og `right` egenskaberne i stedet for.
Spørgsmål: Hvordan tilpasser jeg billedteksten (caption)?
Svar: Du kan bruge `caption`-indstillingen, som accepterer en funktion. Denne funktion kaldes for hvert grupperet element. Inden i funktionen refererer `this` til det klikkede element. Du kan returnere HTML for din tilpassede billedtekst, for eksempel for at tilføje et download-link eller hente billedtekst fra et andet element på siden.
Eksempel på tilføjelse af download-link:
$( '[data-fancybox]' ).fancybox({
caption: function( instance, item ) {
var caption, link;
if ( item.type === 'image' ) {
caption = $(this).data('caption');
link = '<a href="' + item.src + '">Download billede</a>';
return (caption ? caption + '<br />': '') + link;
}
}
});
Spørgsmål: Hvordan opretter jeg en brugerdefineret knap i værktøjslinjen?
Svar: Du kan oprette en brugerdefineret knap ved at definere en skabelon i `$.fancybox.defaults.btnTpl` og derefter inkludere den i din `buttons`-liste. Du kan dynamisk opdatere knappens egenskaber (f.eks. `href`) ved hjælp af `beforeShow`-callback'en.
Eksempel på download-knap:
// Opret skabelon for download-knap
$.fancybox.defaults.btnTpl.download = '<a download class="fancybox-button fancybox-download"></a>';
// Vælg hvilke knapper der skal vises som standard
$.fancybox.defaults.buttons = [
'slideShow',
'fullScreen',
'thumbs',
'download',
'close'
];
// Opdater download-URL dynamisk
$( '[data-fancybox]' ).fancybox({
beforeShow: function( instance, current ) {
$('.fancybox-download').attr('href', current.src);
}
});
Spørgsmål: Hvordan flytter jeg miniaturegitteret?
Svar: Der er ingen JavaScript-indstilling til at ændre miniaturegitterets position direkte. Fancybox er dog designet, så du kan bruge CSS til at ændre position eller dimension for hver blok (f.eks. indholdsområde, billedtekst eller miniaturegitter). Dette giver dig frihed til at ændre udseendet af modalvinduet fuldstændigt.
Samlet set tilbyder Fancybox en omfattende og fleksibel løsning til at præsentere dit webindhold på en visuelt tiltalende måde. Ved at kombinere det med AJAX-ZOOM kan du yderligere forbedre brugeroplevelsen med dyb zoom og avancerede 360/3D-visninger, hvilket gør din hjemmeside mere dynamisk og engagerende for dine besøgende.
Hvis du vil læse andre artikler, der ligner Fancybox & AJAX-ZOOM: Avancerede Lysbokse til Web, kan du besøge kategorien Teknologi.