blueimp Gallery: Alsidig billed- og videogalleri

14/05/2025

★★★★★Rating: 4.98 (8121 votes)
Indholdsfortegnelse

Hvad er blueimp Gallery?

blueimp Gallery er en kraftfuld og alsidig JavaScript-plugin, der giver webudviklere mulighed for at integrere et touch-venligt, responsivt og yderst tilpasseligt billed- og videogalleri, carousel og lightbox på deres hjemmesider. Det er optimeret til at fungere problemfrit på tværs af både mobile og desktop webbrowsere og tilbyder en rig brugeroplevelse med en lang række funktioner.

How to create a swipe gallery using JavaScript?
SwiperBox is a tiny JavaScript swiper library to create a touch-enabled, mobile-friendly gallery with support for swipe and drag events. 1. Download the package and insert the SwiperBox.js script into the HTML file. 2. Define an array of items to be displayed in the gallery. '',

Nøglefunktioner og Fordele

Dette galleri er designet med fokus på brugervenlighed og funktionalitet. Blandt dets fremtrædende egenskaber finder vi:

  • Touch-venlig navigation: Muliggør ubesværet swipe-navigation på touch-enheder.
  • Responsivt design: Tilpasser sig automatisk til forskellige skærmstørrelser, hvilket sikrer en optimal visning på enhver enhed.
  • Tilpasningsmuligheder: Et bredt udvalg af indstillinger giver dig mulighed for at skræddersy galleriet til dine specifikke behov.
  • Multimedieunderstøttelse: Kan vise både billeder og videoer, herunder understøttelse af HTML5 video, YouTube og Vimeo.
  • Overgangeffekter: Tilføjer en professionel æstetik med glidende overgange mellem elementer.
  • Slideshow-funktionalitet: Mulighed for automatisk afspilning af indholdet.
  • Fuldskærmstilstand: Giver brugerne mulighed for at se indholdet i fuldskærm.
  • On-demand indlæsning: Optimerer ydeevnen ved kun at indlæse indhold, når det er nødvendigt.
  • Tastaturgenveje: Forbedrer tilgængeligheden med intuitive tastaturkommandoer.

Installation og Opsætning

At komme i gang med blueimp Gallery er en ligetil proces. Du kan installere pakken via NPM eller manuelt inkludere de nødvendige filer.

Via NPM:

npm install blueimp-gallery

Manuel installation:

Kopier de nødvendige css, img og js mapper til din hjemmeside.

Lightbox Opsætning:
  1. Inkluder stylesheet: Tilføj følgende linje i <head> sektionen af din HTML-fil:
    <link rel="stylesheet" href="css/blueimp-gallery.min.css" />
  2. Tilføj Galleri-widget: Indsæt følgende HTML-snippet i <body> sektionen:
    <div id="blueimp-gallery" class="blueimp-gallery" aria-label="image gallery" aria-modal="true" role="dialog"> <div class="slides" aria-live="polite"></div> <h3 class="title"></h3> <a class="prev" aria-controls="blueimp-gallery" aria-label="previous slide" aria-keyshortcuts="ArrowLeft"></a> <a class="next" aria-controls="blueimp-gallery" aria-label="next slide" aria-keyshortcuts="ArrowRight"></a> <a class="close" aria-controls="blueimp-gallery" aria-label="close" aria-keyshortcuts="Escape"></a> <a class="play-pause" aria-controls="blueimp-gallery" aria-label="play slideshow" aria-keyshortcuts="Space" aria-pressed="false" role="button"></a> <ol class="indicator"></ol> </div>

    Husk at aria-controls attributten skal matche id attributten for din galleri-widget.

  3. Inkluder script: Tilføj følgende script-tag nederst i <body> sektionen:
    <script src="js/blueimp-gallery.min.js"></script>
  4. Opret links: Opret en liste af links til dine billeder. Du kan også inkludere thumbnails:
    <div id="links"> <a href="images/banana.jpg" title="Banana"> <img src="images/thumbnails/banana.jpg" alt="Banana" /> </a> <a href="images/apple.jpg" title="Apple"> <img src="images/thumbnails/apple.jpg" alt="Apple" /> </a> <a href="images/orange.jpg" title="Orange"> <img src="images/thumbnails/orange.jpg" alt="Orange" /> </a> </div>
  5. Initialiser Galleriet: Tilføj følgende JavaScript-kode efter inkluderingen af galleri-scriptet:
    document.getElementById('links').onclick = function (event) { event = event || window.event; var target = event.target || event.srcElement; var link = target.src ? target.parentNode: target; var options = { index: link, event: event }; var links = this.getElementsByTagName('a'); blueimp.Gallery(links, options); };

Tilpasning af Udseende og Funktionalitet

blueimp Gallery tilbyder en bred vifte af muligheder for at tilpasse galleriets udseende og adfærd.

Synlige Kontroller:

For at vise gallerikontroller som 'forrige' og 'næste' knapper, tilføj klassen blueimp-gallery-controls til din galleri-widget:

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" ...>

Indholdstilpasning (Contain):

For at strække mindre billeder til containerens dimensioner, mens billedets aspektforhold bevares, tilføj klassen blueimp-gallery-contain:

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-contain" ...>

Carousel Opsætning:

For at vise billederne som et inline carousel i stedet for en lightbox, skal du tilføje klassen blueimp-gallery-carousel og fjerne close elementet:

<!-- Galleriet som inline carousel --> <div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel" aria-label="image carousel"> <div class="slides" aria-live="off"></div> <h3 class="title"></h3> <a class="prev" aria-controls="blueimp-gallery-carousel" aria-label="previous slide"></a> <a class="next" aria-controls="blueimp-gallery-carousel" aria-label="next slide"></a> <a class="play-pause" aria-controls="blueimp-gallery-carousel" aria-label="play slideshow" aria-pressed="true" role="button"></a> <ol class="indicator"></ol> </div>

Initialiser carousel med følgende JavaScript:

blueimp.Gallery(document.getElementById('links').getElementsByTagName('a'), { container: '#blueimp-gallery-carousel', carousel: true });

Responsiv Billedunderstøttelse

Gallery understøtter responsive billeder ved hjælp af srcset og sizes attributter, samt sources objektet:

var gallery = blueimp.Gallery([ { title: 'Banana', href: 'https://example.org/images/banana-1024w.jpg', srcset: 'https://example.org/images/banana-800w.jpg 800w,' + 'https://example.org/images/banana-1024w.jpg 1024w,' + 'https://example.org/images/banana-1600w.jpg 1600w', sizes: '(min-width: 990px) 990px, 100vw', thumbnail: 'https://example.org/images/banana-75.jpg' }, { title: 'Apple', href: 'https://example.org/images/apple.png', sources: [ { type: 'image/svg+xml', srcset: 'https://example.org/images/apple.svg' }, { type: 'image/webp', srcset: 'https://example.org/images/apple.webp' } ] } ]);

Disse egenskaber kan også defineres via data-srcset og data-sizes attributter i HTML:

<div id="links"> <a title="Banana" href="images/banana-1024w.jpg" data-srcset="images/banana-800w.jpg 800w, images/banana-1024w.jpg 1024w, images/banana-1600w.jpg 1600w" data-sizes="(min-width: 990px) 990px, 100vw"> <img src="images/banana-75.jpg" alt="Banana" /> </a> <a title="Apple" href="images/apple.png" data-sources='[{"type": "image/svg+xml", "srcset": "images/apple.svg"}, {"type": "image/webp", "srcset": "images/apple.webp"}]'> Apple </a> </div>

Tastaturgenveje

Kontroller galleriet nemt med disse tastaturgenveje:

  • Enter: Viser/skjuler kontroller.
  • Escape: Lukker galleriet.
  • Mellemrum: Starter/pauser slideshow.
  • Venstre Pil: Går til forrige billede.
  • Højre Pil: Går til næste billede.

Bemærk, at disse genveje er deaktiveret som standard, når carousel-tilstanden er aktiv.

Videounderstøttelse

Gallery understøtter problemfrit HTML5 videoer, YouTube og Vimeo integration.

What is pswipe in Vue?
pswipe is a Vue component that helps you create a responsive, mobile-friendly image gallery/lightbox using the PhotoSwipe library. 1. Import and register the Photoswipe. // options 2. Add your own images to the Photoswipe component.

HTML5 Video:

Du kan vise MP4, Ogg eller WebM videoer. Brug type og href egenskaberne:

blueimp.Gallery([ { title: 'Fruits', type: 'video/mp4', href: 'https://example.org/videos/fruits.mp4', poster: 'https://example.org/images/fruits.jpg' } ]);

For flere videoformater kan du bruge sources egenskaben:

blueimp.Gallery([ { title: 'Fruits', type: 'video', sources: [ { type: 'video/mp4', src: 'https://example.org/videos/fruits.mp4' }, { type: 'video/ogg', src: 'https://example.org/videos/fruits.ogv' } ], poster: 'https://example.org/images/fruits.jpg' } ]);

YouTube og Vimeo Integration:

Integrer YouTube og Vimeo videoer ved at angive type som text/html og bruge youtube eller vimeo egenskaberne med video-ID'et:

// YouTube blueimp.Gallery([ { title: 'A YouTube video', type: 'text/html', href: 'https://www.youtube.com/watch?v=VIDEO_ID', youtube: 'VIDEO_ID', poster: 'https://img.youtube.com/vi/VIDEO_ID/maxresdefault.jpg' } ]); // Vimeo blueimp.Gallery([ { title: 'A Vimeo video', type: 'text/html', href: 'https://vimeo.com/VIDEO_ID', vimeo: 'VIDEO_ID', poster: 'https://secure-b.vimeocdn.com/ts/POSTER_ID.jpg' } ]);

Udvidet Funktionalitet med Event Callbacks

Gallery giver dig mulighed for at reagere på forskellige begivenheder under galleriets livscyklus ved hjælp af event callbacks:

  • onopen: Kaldes når galleriet initialiseres.
  • onopened: Kaldes efter initialiseringens overgang er færdig.
  • onslide: Kaldes når der skiftes billede.
  • onslideend: Kaldes efter overgangen til næste billede er færdig.
  • onslidecomplete: Kaldes når indholdet af et billede er indlæst.
  • onclose: Kaldes når galleriet er ved at lukkes.
  • onclosed: Kaldes efter galleriet er lukket og overgangen er færdig.
blueimp.Gallery(links, { onopen: function() { /* ... */ }, onopened: function() { /* ... */ }, onslide: function(index, slide) { /* ... */ }, // ... andre callbacks });

Tilføjelse af Ekstra Elementer

Du kan udvide galleriet med yderligere HTML-elementer, såsom en beskrivelse:

  1. Tilføj et element (f.eks. en <p> tag) til din galleri-widget:
    <p class="description"></p>
  2. Definer stilarter i din CSS:
    .blueimp-gallery > .description { position: absolute; top: 30px; left: 15px; color: #fff; display: none; } .blueimp-gallery-controls > .description { display: block; }
  3. Tilføj beskrivelsesdata til dine links via data-description attributten:
    <a href="images/banana.jpg" title="Banana" data-description="Dette er en banan.">Banana</a>
  4. Brug en onslide callback til at opdatere beskrivelsen:
    blueimp.Gallery(document.getElementById('links'), { onslide: function(index, slide) { var text = this.list[index].getAttribute('data-description'), node = this.container.find('.description'); node.empty(); if (text) { node[0].appendChild(document.createTextNode(text)); } } });

jQuery Plugin

blueimp Gallery tilbyder også et jQuery plugin, der forenkler integrationen.

Opsætning:

  1. Inkluder jQuery og jquery.blueimp-gallery.min.js efterfulgt af de valgfrie udvidelser.
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="js/jquery.blueimp-gallery.min.js"></script>
  2. Tilføj data-gallery attributten til dine links:
    <a href="images/banana.jpg" title="Banana" data-gallery></a>

Dette registrerer en global klikhåndtering, der åbner links i lightboxen. Den tidligere onclick håndtering er ikke længere nødvendig.

Data-attributter og Gruppering:

Indstillinger kan defineres som HTML5 data-attributes på galleri-widgetten. Du kan også gruppere links i forskellige gallerier ved hjælp af data-gallery attributten med en gyldig ID-streng:

<div id="fruits"> <a href="images/banana.jpg" title="Banana" data-gallery="#blueimp-gallery-fruits"></a> <a href="images/apple.jpg" title="Apple" data-gallery="#blueimp-gallery-fruits"></a> </div> <div id="vegetables"> <a href="images/tomato.jpg" title="Tomato" data-gallery="#blueimp-gallery-vegetables"></a> <a href="images/onion.jpg" title="Onion" data-gallery="#blueimp-gallery-vegetables"></a> </div>

Krav og Browserunderstøttelse

blueimp Gallery er et standalone bibliotek uden eksterne afhængigheder. Det understøtter de fleste moderne browsere, herunder Chrome, Safari, Firefox, Opera, Edge og Internet Explorer 7+.

Licens

Gallery er udgivet under MIT-licensen, hvilket giver stor frihed til brug og distribution.

Konklusion

blueimp Gallery er et fremragende valg for enhver, der ønsker at tilføje et professionelt og funktionsrigt galleri til deres hjemmeside. Dets fleksibilitet, tilpasningsmuligheder og brede medieunderstøttelse gør det til et værdifuldt værktøj for webudviklere.

Hvis du vil læse andre artikler, der ligner blueimp Gallery: Alsidig billed- og videogalleri, kan du besøge kategorien Software.

Go up