Martin Bekkelund » Integrasjon av Plogger og Lightbox JS

Martin Bekkelund

Meny: Hovedsiden; Om Martin; Ta kontakt; Foto; RSS

Integrasjon av Plogger og Lightbox JS

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.

Dato:	Onsdag 27. desember 2006
Kategorier:	Foto • Programvare • WWW
RSS:	Abonner på kommentarer til denne artikkelen eller nye artikler fra Martin
Trackback:	Du kan legge igjen trackback fra din egen side.

12 kommentarer til «Integrasjon av Plogger og Lightbox JS»

Anders Ekkje Slettebø
27. desember 2006 klokken 20:14

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

Martin
27. desember 2006 klokken 20:30

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?

Kyrre Baker
27. desember 2006 klokken 22:27

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.

Martin
28. desember 2006 klokken 2:23

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.

Kyrre Baker
28. desember 2006 klokken 11:22

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.

Martin
28. desember 2006 klokken 16:51

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.

Kyrre Baker
28. desember 2006 klokken 18:35

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”.

Martin
28. desember 2006 klokken 19:39

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.

Espen Willersrud
29. desember 2006 klokken 18:25

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!

Martin
30. desember 2006 klokken 2:15

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

Stian
5. januar 2007 klokken 18:08

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

Martin
6. januar 2007 klokken 1:28

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.

Ett trackback / pingback til «Integrasjon av Plogger og Lightbox JS»

Pingback fra Galleriet er oppe | problematisk.net
21. oktober 2007 klokken 20:52

[...] etter en galleri-løsning som tilfredstiller mine behov. Leste for en stund siden om Plogger hos Martin Bekkelund og tenkte jeg skulle prøve det [...]

Legg igjen en kommentar

Før du poster en kommentar må du være kjent med retningslinjene for kommentarposting, samt personvernpolitikken for bekkelund.net.

Felter merket med * må fylles ut. Din e-postadresse vil ikke være synlig.

Formatering med XHTML: Du kan bruke disse elementene til formatering: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> . Tekstbaserte uttrykksikoner konverteres automatisk til bilder. Hjelp til formatering.

Martin Bekkelund er fornøyd bruker av WordPress med hjemmelaget tema.
Du kan abonnere på både artikler som Atom, RSS 2.0 eller RSS 0.92, samt kommentarer som RSS 2.0.
Denne artikkelen ble til ved hjelp av 13 kopper espresso konsumert på 0.429 minutter.