Martin Bekkelund

En blogg om IT

Integrasjon av Plogger og Lightbox JS

onsdag 27. desember 2006 • 13 kommentarer

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

  1. Å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.
  2. Pakk ut og last opp Lightbox JS i henhold til installasjonsveiledningen.
  3. Å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“.
  4. Last opp lightbox.js på nytt.
  5. 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. :-)

Følg @MartinBekkelund på Twitter!

13 kommentarer

  1. Anders Ekkje Slettebø
    27. desember 2006 20.14

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

    Svar på denne kommentaren

  2. Martin
    27. desember 2006 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?

    Svar på denne kommentaren

  3. Kyrre Baker
    27. desember 2006 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.

    Svar på denne kommentaren

  4. Martin
    28. desember 2006 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.

    Svar på denne kommentaren

  5. Kyrre Baker
    28. desember 2006 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.

    Svar på denne kommentaren

  6. Martin
    28. desember 2006 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. :-)

    Svar på denne kommentaren

  7. Kyrre Baker
    28. desember 2006 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”.

    Svar på denne kommentaren

  8. Martin
    28. desember 2006 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.

    Svar på denne kommentaren

  9. Espen Willersrud
    29. desember 2006 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!

    Svar på denne kommentaren

  10. Martin
    30. desember 2006 2.15

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

    Svar på denne kommentaren

  11. Stian
    5. januar 2007 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 :)

    Svar på denne kommentaren

  12. Martin
    6. januar 2007 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.

    Svar på denne kommentaren

Har du synspunkter? Legg igjen en kommentar!

Ingen anonyme kommentarer! Ved å trykke Send kommentar samtykker du i at du er kjent med personvernpolitikken og vil overholde retningslinjene for bekkelund.net.

Abonner uten å kommentere

RSS og trackback

Med RSS kan du abonnere på nye kommentarer som postes til denne artikkelen.

Du kan legge igjen et trackback fra ditt eget nettsted ved å benytte trackback-adressen til denne artikkelen. Eventuelle tracback ser du under.

Flere artikler

Enda flere artikler? Besøk arkivet.

Bekkelund.net er en blogg av Martin Bekkelund, hvor han lufter sine tanker om IT og IT-politikk. Martin arbeider til daglig som seniorrådgiver, foredragsholder og skribent i IT-bransjen, hvor han veileder bedrifter og organisasjoner i strategisk bruk av IT. Les mer...

Facebook Twitter LinkedIn Flickr Vimeo Google Reader Martin Bekkelunds blogg Martin Bekkelunds RSS-kanal

© 1995-2012 Martin Bekkelund
Opphavsrett • RSS • Kontakt