Integrasjon av Plogger og Lightbox JS

27. December 2006

I forbindelse med fotogalleriet på Greatest Bits, hadde jeg lyst til å lage noe fancy som samtidig var funksjonelt. Løsningen jeg har testet ut er Lightbox JS integrert med det eksisterende fotogalleriet Plogger.

Litt bakgrunn

Lightbox JS

Fra Lightbox JS’ nettsted, fritt oversatt:

Lightbox JS er et enkelt, beskjedent skript for å overdekke bilder på en side. Det er enkelt å sette opp og fungerer i alle moderne nettlesere.

Beskrivelsen er ikke nødvendigvis veldig god, så jeg går like gjerne for min egen: Lightbox JS er et sett JavaScript som tilbyr ekstra visuell effekt ved fremvisning av bilder. Demo finnes på Greatest Bits.

Plogger

Fra Ploggers nettsted, fritt oversatt:

Plogger er neste generasjon programvare for fotogalleri, basert på åpen kildekode

Jeg har benyttet Plogger i noen anledninger, og det er så langt jeg har sett definitivt den beste applikasjonen for webbaserte fotogalleri.

Slik går du frem

Åpne din favoritteditor, åpne Plogger-filen “gallery.php” og søk frem følgende streng:
<a accesskey="v" href="'.$config["baseurl"].'images/'.$row["path"].'">'.$imgtag.'</a>. Strengen erstatter du med følgende streng:
<a accesskey="v" href="'.$config["baseurl"].'images/'.$row["path"].'" rel="lightbox">'.$imgtag.'</a>. Last deretter opp filen til ditt nettsted.
Pakk ut og last opp Lightbox JS i henhold til installasjonsveiledningen.
Åpne Lightbox JS-filen “lightbox.js” i mappen “js” og søk frem følgende streng: var fileLoadingImage = "images/loading.gif";. Denne endrer du til var fileLoadingImage = "/images/loading.gif";. Tilsvarende gjør du for linjen under, det vil si legger til / foran “images“.
Last opp lightbox.js på nytt.
Test herligheten. Fungerer det ikke har du gjort noe galt.

Fotogalleriet degraderer, det vil si at den fungerer også for de uten støtte for JavaScript.

Eventuelle feil og tilbakemeldinger kan postes som en kommentar.

Abonner på kommentarer til denne artikkelen, alle kommentarer eller nye artikler.
Legg igjen trackback fra din egen side.

Det ser lekkert ut, men det går etter min mening litt for sakte.

Kommentar av Anders Ekkje Slettebø — 27. December 2006 20:14

Det er nok en “feature” i Lightbox JS, muligens i kombinasjon med litt utdatert maskinvare? Hvor sakte snakker vi, og hvor går det sakte?

Kommentar av Martin — 27. December 2006 20:30

Jeg synes også det går for sakte. Ventetiden på “animasjonen” eller “resizingen” av visnings-vinduet, samt at jeg ikke ser når/om bildet i seg selv laster, er det som trekker ned for min del.

Kommentar av Kyrre Baker — 27. December 2006 22:27

Er det selve lastingen av bildet, eller re-skaleringen av bildet som tar tid?

Animasjonen vises når bildet lastes. Når bildet er ferdig lastet, vises det etter en glidende effekt. For bilder som ikke er mellomlagret (cache) vil det nødvendigvis gå med en del tid til lasting, ettersom bildene er relativt store. Jeg er enig i at det er et minus at man ikke ser hvor mye som er lastet av bildet underveis i prosessen, men ser samtidig ikke helt hvordan jeg skal lage en fremdriftsindikator.

Kommentar av Martin — 28. December 2006 2:23

Det er nok den “glidende” effekten som gjør at det virker tregt for meg. Det, kombinert med at jeg ikke ser om/når bildet laster. Med javascript av i nettleseren spretter bildene frem på skjermen som regninger i romjula.

Altså: Jeg venter gjerne disse tre – fire sekundene dersom det er noe jeg vil se på. Jeg har ikke så dårlig tid når jeg er ute å “ser på bilder”. Men at scriptet fordrøyer visningen er det ingen tvil om.

En annen sak jeg la merke til er at jeg ikke kan “lukke bildet” dersom “Close X” kommer utenfor vinduet mitt. Noe som relativt ofte skjer etter som jeg alltid har nettleseren min i en “gitt bredde” på skjermen. I vanlige fall trykker jeg “tilbakeknappen” i nettleseren min når jeg har sett på et bilde, men det går jo ikke her da konseptet med dette scriptet også dreper tilbakeknappen.

Kommentar av Kyrre Baker — 28. December 2006 11:22

Jeg plundret også litt med å lukke bildet, dersom “Close X” kom utenfor vinduet. Imidlertid er det ikke verre enn at man blar nedover som på en hvilken som helst annen nettside. Straks bildet er lastet, er det kun CSS som står for visningen, inntil det lukkes. Jeg ser at dette utgjør et lite brukervennlighetsproblem, så jeg får se om jeg finner på noe smart, fjerner det, eller driter i det. Det er uansett dere som besøkende som er målgruppen, og dermed også viktig å nå, så meninger mottas selvfølgelig.

Kommentar av Martin — 28. December 2006 16:51

Imidlertid er det ikke verre enn at man blar nedover som på en hvilken som helst annen nettside

Hos meg er stort sett problemet at jeg må bla sidelengs og akkurat det prøver jeg å unngå så ofte som mulig da jeg må “navigere” meg bort fra den delen av skjermen musepekeren ofte befinner seg på når jeg “surfer”.

Kommentar av Kyrre Baker — 28. December 2006 18:35

Dette er et evig dilemma for enhver fotoside. På den ene siden ønsker man relativt store bilder, på den andre siden må de få plass i nettleseren. Jeg har for de største bildene benyttet en størrelse på 800 piksler i den største dimensjonen, selv om det finnes unntak.

Kommentar av Martin — 28. December 2006 19:39

Kunne jo også vært fint å kunne gå rett til neste bilde, uten å måtte gå ut av “lightbox”, hvis du skjønner hva jeg mener!

Kommentar av Espen Willersrud — 29. December 2006 18:25

Enig, Espen. Samtidig er ikke dette mulig i en urørt Plogger-installasjon, heller. Så vidt jeg vet.

Kommentar av Martin — 30. December 2006 2:15

Lightbox JS er bare helt utrolig genialt. Har brukt det i noen dager og hadde planlagt å lage et slags galleri med det – manuelt. Men jeg må nesten sjekke ut Plogger nå og se om det duger til noe. Takk for tipset

Kommentar av Stian — 5. January 2007 18:08

Plogger dekker 98 % av mine behov. Jeg skulle helst sett at det var ett nivå mindre på galleriet. Slik det er nå består Plogger av både “Collections” og “Albums”, eksempelvis:

Main page – Nature – Colors – Grodalen

Jeg skulle gjerne kuttet ut “Colors”, eller det Plogger kaller “Albums”. Det burde være mer fleksibelt med tanke på hvor mange nivå man ønsker, slik at man kan bygge arkitekturen selv.

I tillegg er koden noe røten. Ikke at den nødvendigvis er dårlig, men tilpasninger og eget utseende er ikke veldig sexy. Jeg skulle gjerne hatt en tema-funksjon, slik som i WordPress.

Fordelen er derimot at det er lett å mikke i grensesnittet, koden er ganske standardkonform, CSS brukes i stor grad (dog ikke til alt), og RSS fungerer ut av boksen.

Kommentar av Martin — 6. January 2007 1:28

Martin Bekkelund

Abonner

Martin på nettet

Siste fem kommentarer

Med Martins øyne

Leseliste