Galleria: bildgalleriet i JavaScript som startade på monc.se

Galleria var ett fritt bildgalleri i JavaScript som släpptes på den här adressen, monc.se/galleria, i början av 2008. Det byggde på jQuery och blev ett av de mest spridda galleriskripten åren innan HTML5 och mobilwebben tog över. Den här sidan berättar historien kort och visar hur man bygger samma sak i dag.

En webb där bildgallerier var svåra

År 2007 byggdes de flesta snygga bildgallerierna i Flash. Den som ville göra samma sak med HTML, CSS och JavaScript fick kämpa med Internet Explorer 6 och 7. De webbläsarna hanterade bilder, genomskinlighet och marginaler på sitt eget sätt. jQuery hade kommit året innan och gjorde det plötsligt rimligt att skriva effekter och bildbyten som fungerade i alla webbläsare.

Från blogginlägg till eget projekt

Idén växte fram i bloggen. Sommaren 2007 publicerades inlägget Lightweight Image Gallery with Thumbnails på monc.se. Det var ett litet galleri med miniatyrbilder som snabbt började länkas från forum och designbloggar. Vintern 2008 kom Galleria som ett eget projekt med en egen sida, demoexempel och skriptfilen jquery.galleria.js.

Spridningen gick fort. I början av mars 2008 dök Galleria upp i länksamlingar och bloggar på flera språk. Den franska Framablog beskrev det den 6 mars 2008 som ett mycket snyggt sätt att visa foton på en webbplats. Snart byggde andra utvecklare tillägg som gjorde Galleria tillgängligt i bland annat WordPress.

Vad som hände sedan

Galleria flyttade senare till en egen domän, galleria.io, och skrevs om i flera versioner. I projektets paketfil står företaget worse is better UG som upphovsman. David Hellsing (aino.com) och Frank Ludwig (wib.io) står som medverkande. Den senaste versionen, 1.6.1, finns kvar på npm. Källkoden ligger på GitHub under MIT-licensen och har omkring 1 700 stjärnor.

I oktober 2026 leder galleria.io till en sida där domänen säljs. Koden går fortfarande att hämta, men projektet har ingen aktiv hemsida längre.

Så bygger du ett bildgalleri i dag

Mycket av det Galleria löste med JavaScript sköter webbläsaren själv i dag. Ett modernt galleri behöver sällan något bibliotek alls:

• Lat inläsning: loading="lazy" på bilderna gör att de bara laddas när de närmar sig skärmen.
• Rätt storlek: srcset och sizes låter webbläsaren välja en lagom stor bildfil för skärmen.
• Bläddring: CSS-egenskapen scroll-snap-type ger ett svepbart galleri utan skript.
• Förstoring: elementet <dialog>, öppnat med showModal(), fungerar som ljuslåda och hanterar fokus och Esc-tangenten åt dig.

Vi går igenom hela bygget steg för steg i guiden Bildgalleri med JavaScript – bygg ett eget från grunden.

Källor

• GalleriaJS/galleria på GitHub (källkod, licens och medverkande)
• Framablog, 6 mars 2008
• Arkiverade versioner av monc.se/galleria i Internet Archive

Läs också om de andra projekten från samma tid: Tripoli och bloggen David’s Kitchen.