Annons:
Etikettwebbdesign
Läst 12862 ggr
johan
2007-03-25 14:53

Bygg ett eget fotoalbum med JavaScript och CSS

Bild 1. Klicka för att öppna i full storlek.

Att bygga ett fotoalbum till din hemsida är inte svårt. Med några enkla knep gör du snabbt ett snyggt och dynamiskt fotoalbum som fungerar i alla lägen.

Målen

Med rätt teknik är det inte svårt att bygga ett fotoalbum till din hemsida. För mig är det viktigt att fotoalbumet uppfyller dessa krav:

Det ska:

  • se inbjudande ut
  • vara enkelt att använda
  • gå snabbt att visa bilder
  • vara enkelt för mig att lägga till nya bilder
  • fungera i alla webbläsare

Att det ska se inbjudande ut är givetvis i allra högsta grad en smaksak. Mina smaklökar gillar det enkla, rena och nästan övertydliga. Det hänger ihop med att det ska vara enkelt att förstå. När jag visar bilder på nätet är det ofta för familjemedlemmar. Mina föräldrar är inte speciellt datorvana, så det måste vara väldigt enkelt. Med CSS kan vi presentera albumet som vi vill.

Något som jag själv ogillar med fotoalbum är att behöva klicka på en bild, klicka Bakåt-knappen för att komma tillbaka till bildlistan, välja nästa bild och fortsätta så. Jag föredrar att när jag väljer en bild så uppdateras bara bildvisningen, men allt annat är kvar. Detta löser vi med JavaScript och lite DOM Scripting.

Det måste vara riktigt riktigt enkelt för mig att lägga till nya bilder. Annars kommer jag aldrig mig för att uppdatera det. Helst ska jag bara behöva lägga upp en bild, skapa en länk till den och skriva en beskrivning av bilden. Resten ska sköta sig själv.

Slutligen måste det fungera i alla webbläsare. Albumet måste fungera även om man inte har en webbläsare som stöder CSS eller JavaScript, eller om man av en eller annan anledning valt att stänga av dessa funktioner.

Så här kommer mitt färdiga album att se ut.

Exempel på det färdiga fotoalbumet

Till vänster är länkar till alla bilder som finns i mitt album. När jag klickar på en länk så visas bilden stort till höger och beskrivningstexten byts automatiskt ut utan att ladda om hela sidan.

Om användaren inte har JavaScript aktiverat fungerar länkarna ändå, men bilden visas på en egen sida. Det fungerar även att navigera med bara tangentbord.

För att lägga till nya bilder så lägger jag till en till länk. Resten sköter sig själv.

Förkunskaper

För att helt och fullt kunna ta till dig alla delar av den här artikeln behöver du ha grundläggande kunskaper om (X)HTML, CSS och lite JavaScript. Även om du inte kan speciellt mycket om detta kan du ändå ha nytta av artikeln och använda koden på dina egna sidor.

HTML-koden

HTML-koden i albumet är väldigt enkel. Den innehåller en rubrik, en instruktion, en punktlista med länkar och utrymme för storbild och bildbeskrivning.

<head>

<title>Mitt fotoalbum</title>

</head>

<h1>Mitt fotoalbum</h1>

Välkommen till mitt fotoalbum på nätet.

Klicka på länkarna för att se bilden.

</p>

  • Humla</a></li>

  • Rep</a></li>

  • Stenar</a></li>

  • Fjäril</a></li>

  • Prästkragar</a></li>

    </ul>

    Välj en bild ovan</p>

    </div>

    </body>

    </html>

    I HTML-koden finns ingen kod som beskriver utseendet. Det finns heller inget JavaScript som bestämmer hur sidan ska fungera. I webbläsaren ser det nu ut så här:

    Album utan JavaScript och CSS

    Så här skulle sidan se ut om användaren inte hade stöd för CSS. Inte världens snyggaste kanske, men väldigt tydlig. Om användaren klickar på en länk laddas bilden in och denna sida försvinner. Kanske inte världens roligaste, men det fungerar trots att det inte är något JavaScript. Det skulle till och med fungera i en mobiltelefon.

    Som du kan se i koden har vissa element id-attribut och class-attribut.

      </ul>

      Välj en bild ovan</p>

      </div>

       
      Class-attributen är för att kunna formge sidan med CSS. ID-attributen är för att vi ska kunna haka på JavaScript och ändra funktionaliteten om man har JavaScript. Med hjälp av ID-attributen kan vi påverka ett enskilt element med JavaScript-kod.

      >> Ladda ned Version 1 av Fotoalbumet

      JavaScript and the Temple of DOM

      Att ändra delar av sidan med JavaScript kallas för DOM Scripting. ”DOM” står för Document Object Modell och en beskriver hela sidan som en trädstruktur och gör att man kan programmera mot den.

      På DOM:en finns olika objekt för att till exempel komma åt fönstret (window), med objektet document kommer man åt allt innehåll och det går även att jobba mot varje enskilt element i sidan.

      Alla objekt har olika egenskaper som kan hämtas ut eller ändras. Egenskaperna matchar alla attribut som ett HTML-element kan ha, t ex href på en länk eller src på en bild. Med DOM:en kan du även ändra annat, som t ex ett elements innehåll som kan ändras med egenskapen innerHTML.

      För att hjälp till att jobba med DOM:en finns det även metoder, vilket är som funktioner kan gör olika saker. Två metoder som används väldigt mycket är getElementById och getElementsByTagName. Metoden getElementById hämtar ett element med ett visst id så att det går att programmera mot det, t ex för att ändra texten i bildbeskrivningen. Metoden getElementsByTagName hämtar en lista med element av en viss typ, t ex alla länkar.

      DOM:en har också olika händelser. Händelser kan vara t ex när sidan har laddats klart, när användaren klickar på en länk, när fönstret ändrar storlek, när man trycker en tangent och många fler händelser. Detta kallas events på programmeringsspråk och är ett mycket viktigt koncept inte minst för webbsidor.

      För att lära dig mer om DOM Scripting rekommenderar jag mycket varmt Jeremy Kieths bok DOM Scripting – Web Design with JavaScript and the Document Object Model.

      Klicka på mig!

      För att snabbt få fotoalbumet att fungera kan vi lägga på JavaScript direkt på HTML-koden. Vi ska fånga upp när användaren klickar på en länk och köra ett JavaScript som byter ut bilden.

      I sidhuvudet i HTML-filen, mellan och kan du lägga in denna kod: