How does Fancybox work?

Fancybox: Skab elegante pop-ups

05/12/2025

★★★★★Rating: 4.56 (11553 votes)

Fancybox er et yderst populært og alsidigt JavaScript-bibliotek, der giver webudviklere mulighed for at præsentere billeder, videoer og andet HTML-indhold på en elegant og brugervenlig måde. Med Fancybox kan du skabe flotte "lightbox"-effekter, hvor indhold vises i et modalvindue oven på den eksisterende side, hvilket forbedrer brugeroplevelsen markant. Biblioteket er designet til at være touch-venligt, responsivt og fuldt tilpasningsdygtigt, hvilket gør det til et oplagt valg for moderne webprojekter, der skal fungere fejlfrit på tværs af alle enheder – fra desktops til smartphones.

What is Fancybox code?
fancyBox code is split into several files (modules) that extend core functionality. You can build your own fancyBox version by excluding unnecessary modules, if needed. Each one has their own js and/or css files. Some modules can be customized and controlled programmatically. List of all possible options: autoStart : false,
Indholdsfortegnelse

Hvad er Fancybox?

Grundlæggende er Fancybox en JavaScript-drevet løsning, der transformerer simple links til interaktive pop-up-vinduer. I stedet for at indlæse et nyt billede eller en ny side, vises indholdet direkte i en overlay-boks. Dette giver en mere flydende og intuitiv brugeroplevelse, da brugerne ikke behøver at forlade den oprindelige side. Fancybox understøtter en bred vifte af indholdstyper, herunder billeder, videoer (YouTube, Vimeo), AJAX-forespørgsler, iframe-indhold og endda inline HTML-elementer, der er gemt på siden.

Kom godt i gang med Fancybox

For at implementere Fancybox på din hjemmeside skal du først inkludere de nødvendige CSS- og JavaScript-filer. Det er også essentielt at sikre, at du har jQuery-biblioteket indlæst, da Fancybox bygger oven på dette framework. jQuery 3+ anbefales for optimal ydeevne, men biblioteket er kompatibelt med jQuery 1.9.1+ og nyere versioner.

Installation

Du kan enten downloade de seneste Fancybox-filer fra GitHub eller inkludere dem direkte via et Content Delivery Network (CDN) som cdnjs. Alternativt kan du benytte pakkehåndteringssystemer som Bower eller npm.

Her er et grundlæggende HTML-eksempel på, hvordan du inkluderer filerne:

<!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>

Vigtigt: Sørg for at inkludere jQuery-biblioteket før Fancybox-filerne. Hvis jQuery allerede er inkluderet på din side, skal du ikke inkludere det igen. Inkluder kun én af Fancybox' JavaScript-filer (enten fancybox.js eller fancybox.min.js).

Grundlæggende Brug med Data-attributter

Den mest simple måde at aktivere Fancybox på er ved at tilføje attributten data-fancybox til et link. Du kan også tilføje en billedtekst med data-caption.

<a href="stoerrebillede.jpg" data-fancybox data-caption="Min billedtekst"> <img src="thumbnail.jpg" alt="" /> </a>

Når du bruger denne metode, anvendes standardindstillingerne. Disse kan naturligvis tilpasses yderligere via "Options"-sektionen eller ved brug af data-options-attributten.

Initialisering med JavaScript

Du kan også initialisere Fancybox ved hjælp af JavaScript ved at vælge elementer med en jQuery-selector og kalde fancybox()-metoden:

<script type="text/javascript"> $("[data-fancybox]").fancybox({ // Dine indstillinger her }); </script>

Denne metode tilknytter kun klikhåndteringen til de elementer, der aktuelt er valgt. For at håndtere elementer, der tilføjes dynamisk, kan du bruge selector-indstillingen:

$("body").fancybox({ selector: "[data-fancybox=\"images\"]", loop: true });

Avanceret Brug og Indholdstyper

Fancybox er utroligt fleksibel og understøtter en række forskellige indholdstyper:

Billeder

Standardbrugen er med links til større billeder, der vises via thumbnails:

<a href="billede.jpg" data-fancybox="billeder" data-caption="Min billedtekst"> <img src="thumbnail.jpg" alt="" /> </a>

Fancybox kan forudindlæse billeder, men du kan også vælge at vise dem med det samme. Dette gøres ved at angive billedets faktiske dimensioner med data-width og data-height:

<a href="billede.jpg" data-fancybox="billeder" data-width="2048" data-height="1365"> <img src="thumbnail.jpg" alt="" /> </a>

For at optimere indlæsningstider på mobile enheder understøtter Fancybox også srcset, hvilket giver dig mulighed for at vise forskellige billeder baseret på viewport-bredden:

<a href="medium.jpg" data-fancybox="billeder" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w"> <img src="thumbnail.jpg" alt="" /> </a>

Du kan også beskytte dine billeder mod download ved højreklik ved at aktivere protect: true:

$("[data-fancybox]").fancybox({ protect: true });

Inline HTML

For at vise inline HTML-indhold skal du oprette et skjult element med et unikt ID og derefter linke til det ved hjælp af data-src-attributten:

<div style="display: none;" id="skjult-indhold"> <h2>Hej!</h2> <p>Du er fantastisk.</p> </div> <a data-fancybox data-src="#skjult-indhold" href="javascript:;">Vis skjult indhold</a>

Fancybox tilføjer automatisk en luk-knap, og du kan nemt styre dimensionerne via CSS.

AJAX

For at indlæse indhold via AJAX tilføjer du data-type="ajax":

<a data-fancybox data-type="ajax" data-src="min_side.com/sti/til/ajax/" href="javascript:;">AJAX indhold</a>

Du kan også specificere en jQuery-selector med data-filter for kun at vise en del af svaret:

<a data-fancybox data-type="ajax" data-src="min_side.com/sti/til/ajax/" data-filter="#to" href="javascript:;">AJAX indhold (delvist)</a>

Iframe

Hvis indholdet kan vises i en iframe, kan det præsenteres i Fancybox:

<a data-fancybox data-type="iframe" data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">Webside</a> <a data-fancybox data-type="iframe" data-src="https://mozilla.github.io/pdf.js/web/viewer.html" href="javascript:;">Prøv PDF</a>

Du kan styre iframe-dimensioner med CSS:

.fancybox-slide--iframe .fancybox-content { width: 800px; height: 600px; max-width: 80%; max-height: 80%; margin: 0; }

Eller via JavaScript-indstillinger:

$("[data-fancybox]").fancybox({ iframe: { css: { width: '600px' } } });

Embedding af Medier

Fancybox gør det nemt at integrere indhold fra populære platforme som YouTube, Vimeo og Instagram blot ved at angive URL'en:

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">YouTube video</a> <a data-fancybox href="https://www.instagram.com/p/BNXYW8-goPI/?taken-by=jamesrelfdyer">Instagram billede</a>

Du kan også styre videoafspilning via URL-parametre eller JavaScript-indstillinger:

<!-- YouTube: Skjul kontroller --> <a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=0&showinfo=0">YouTube video</a> <!-- Vimeo: Tilpas farve --> <a data-fancybox href="https://vimeo.com/191947042?color=f00">Vimeo video</a>
$("[data-fancybox]").fancybox({ youtube: { controls: 0, showinfo: 0 }, vimeo: { color: 'f00' } });

Tilpasning med Indstillinger (Options)

Fancybox tilbyder et omfattende sæt af indstillinger, der giver dig fuld kontrol over udseendet og funktionaliteten. Du kan ændre alt fra animationseffekter og overgangstider til knapper, navigation og gestus-kontrol. Disse indstillinger kan defineres globalt eller specifikt for hvert enkelt element.

Generelle Indstillinger

Her er et udpluk af de mest anvendte indstillinger:

  • loop: Aktiverer/deaktiverer uendelig galler navigation.
  • arrows: Viser/skjuler navigationspile.
  • infobar: Viser/skjuler informationsbaren (tæller og pile øverst).
  • toolbar: Viser/skjuler værktøjslinjen med knapper.
  • buttons: Angiver hvilke knapper der skal vises i værktøjslinjen (f.eks. 'slideShow', 'fullScreen', 'thumbs', 'close').
  • protect: Aktiverer billedbeskyttelse mod højreklik.
  • modal: Gør indholdet modal (deaktiverer tastaturnavigation uden for indholdet).
  • animationEffect: Angiver animationseffekten ved åbning/lukning (f.eks. 'zoom', 'fade').
  • transitionEffect: Angiver overgangseffekten mellem slides (f.eks. 'fade', 'slide').
  • touch: Aktiverer/deaktiverer touch-gestus som swipe og pinch-to-zoom.

Global Tilpasning

Du kan ændre standardindstillingerne globalt ved at tilgå $.fancybox.defaults:

$.fancybox.defaults.animationEffect = "fade"; $.fancybox.defaults.transitionDuration = 1000;

Specifikke Indstillinger via Data-attributter

For individuelle elementer kan du bruge data-options-attributten med et JSON-objekt:

<a data-fancybox data-options='{"caption": "Min billedtekst", "src": "https://codepen.io/about/", "type": "iframe"}' href="javascript:;" class="btn">Åbn ekstern side</a>

API og Events

Fancybox tilbyder en robust API, der giver dig mulighed for at styre og interagere med pop-up vinduerne programmatisk. Du kan åbne, lukke, navigere mellem elementer og endda manipulere indholdet.

What types of content can Fancybox support?
Supports images, videos, maps, inline content, iframes and any other HTML content. This is the fifth generation of Fancybox. Both Carousel and Panzoom components are used under the hood and that's what makes this project so unique. In addition, Fancybox is easy to integrate into any JavaScript framework, see samples for React, Vue and Angular.

Kerne-metoder

  • $.fancybox.close( [all] ): Lukker den aktuelle eller alle Fancybox-instanser.
  • $.fancybox.open( items, [opts], [index] ): Åbner Fancybox med specificeret indhold og indstillinger.

Instance-metoder

Når du har en reference til en Fancybox-instans (f.eks. via $.fancybox.getInstance()), kan du bruge metoder som:

  • instance.next( [duration] ): Gå til næste element.
  • instance.previous( [duration] ): Gå til forrige element.
  • instance.jumpTo( index, [duration] ): Spring til et specifikt element.
  • instance.update(): Opdaterer position og indhold.
  • instance.close(): Lukker instansen.

Events

Fancybox udløser en række events, som du kan binde dine egne funktioner til. Disse giver dig mulighed for at udføre handlinger på specifikke tidspunkter i livscyklussen for et pop-up vindue.

  • beforeLoad: Før indhold indlæses.
  • afterLoad: Når indhold er indlæst.
  • beforeShow: Før åbningsanimationen starter.
  • afterShow: Når indholdet er vist.
  • beforeClose: Før vinduet lukkes. Returner false for at afbryde lukningen.
  • afterClose: Efter vinduet er lukket.

Du kan binde events direkte i initialiseringsfunktionen eller globalt ved hjælp af $(document).on('event.fb', function() { ... });.

CSS Tilpasning

Fancybox er designet, så du kan bruge CSS til at ændre position, dimensioner og udseendet af de forskellige elementer som indholdsområdet, billedteksten og thumbnail-galleriet. Dette giver dig frihed til fuldstændigt at ændre modalvinduets look and feel, hvis nødvendigt.

Ofte Stillede Spørgsmål (FAQ)

Q: Hvorfor virker billedzoom ikke korrekt?
A: Sørg for, at du bruger den seneste version af jQuery (mindst v3.2.1).

Q: Hvordan håndterer jeg elementer, der tilføjes dynamisk efter siden er indlæst?
A: Brug selector-indstillingen ved initialisering, eller brug event delegation med $(document).on('click', '[data-fancybox]', function() { ... });.

Q: Kan jeg beskytte mine billeder mod download?
A: Ja, aktiver protect: true i indstillingerne. Bemærk, at dette primært afskrækker uerfarne brugere.

Q: Hvordan kan jeg ændre størrelsen på en iframe?
A: Brug CSS-regler for klassen .fancybox-slide--iframe .fancybox-content eller angiv dimensionerne via JavaScript-indstillingerne for iframe.css.

Konklusion

Fancybox er et kraftfuldt og fleksibelt værktøj til at forbedre brugeroplevelsen på din hjemmeside. Med sin brede understøttelse af indholdstyper, omfattende tilpasningsmuligheder og brugervenlige API, er det et fremragende valg for enhver moderne webudvikler, der ønsker at tilføje elegante og funktionelle pop-up-vinduer til deres projekter.

Hvis du vil læse andre artikler, der ligner Fancybox: Skab elegante pop-ups, kan du besøge kategorien Teknologi.

Go up