Image: Dreamweaver distance course logo
 
   

Fördjupningslektion 6: sida 1 av 8

 

 

Till kursens framsida

Sida 2 av 8 »

 

 

 

Fördjupningslektion 6

Nu ska vi alltså lära oss att infoga ett så kallat lightbox-galleri på våra sidor. Det är en väldigt populär typ av bildbläddrare som finns på alla möjliga webbsidor där ute, i allt från glada amatörers fotosidor till storföretags bildgallerier -- du kanske känner igen det när vi väl börjat använda det.

Lightbox-galleriet är dessutom fullspäckat med finesser och saker man kan ändra på, så vi kommer att ha fullt upp! Till exempel så går vissa av finesserna utmärkt att kombinera med saker vi gick igenom tidigare i den här kursen, så vi ska naturligtvis ser hur vi kan få det att funka.

När vi är klara kommer du att ha ett imponerande bildgalleri!

 

 

 

1. Lightbox

Nu ska vi se hur vi skapar ett så kallat Lightbox-galleri. Det är en automatisk gallerifunktion som är väldigt utspridd på nätet; chansen är faktiskt stor att du redan sett och använt ett sådant.

Klicka på någon av bilderna nedan så kommer den att visas i större format på din skärm. Om du då för pekaren över bilden så kommer knapparna Next (alltså "nästa") eller Prev (står för "previous" som betyder "förra") att dyka upp. Du kan klicka på de knapparna för att bläddra vidare till nästa bild i galleriet. Längst ned i galleriet finns knappen Close, som du klickar på för att stänga det (men du kan även stänga galleriet genom att klicka var som helst utanför det).

 

 

De tre bilderna i mitt exempel är hämtade ur Seers (Ryan Arésteguis) fotogalleri på public domain-galleriet www.sxc.hu.

Själva gallerikoden och alla bitar som utgör galleriet skapades av och är copyright © Lokesh Dhakar (www.lokeshdhakar.com).

Jag har ändrat litet i filerna som utgör galleriet så att vi har lättare att använda dem, och vi laddar ned dem i nästa stycke, men de som vill ha originalfilerna kan hämta dem på Dynamic Drive: http://dynamicdrive.com/dynamicindex4/lightbox2.

Då ska vi se hur man gör!

 

 

 

1. Ladda ned gallerifilerna

Jag har samlat alla gallerifiler som behövs i en enda zip-fil som du kan ladda ned genom att klicka här:

 

Ladda ned lightbox-galleri.zip

 

Då får du frågan om du vill spara eller öppna filen. Välj helst att spara filen så att du har kvar den även i framtiden.

Obs: Om du använder Firefox och sparar zip-filen så hamnar den antagligen direkt i mappen Hämtade filer (eller Downloaded Files på engelska). Den ligger i sin tur i mappen Mina dokument (eller Dokument i nyare Windows-versioner, eller Documents på engelska).

Du hittar enklast till din dokumentmapp genom att klicka på Startknappen (eller den runda Windowsknappen) längst ned till vänster på din skärm. Då visas startmenyn, och i den finns en knapp som leder till din dokumentmapp. I den mappen finns alltså Hämtade filer eller Downloaded Files, och det är dit din nedladdade fil hamnade.

 

När du sparat och hittat zip-filen på din dator så kan du öppna den genom att dubbelklicka på den.

 

Då ser du vad den innehåller: En vanlig mapp som heter lightbox-galleri.

Markera den mappen och kopiera den...

 

... och klistra in den i roten, alltså utanför alla mappar, i din lokala webbplats.

 

Du kan stänga zip-filen nu, men det kan vara klokt att inte slänga bort den ifall du behöver den igen någon gång i framtiden.

 

 

 

2. Få galleriet att fungera

Nu ska vi få galleriet att funka. Vi ska börja med en enda bild så vi ser om det hela fungerar som det ska.

 

 

2.1. Förbered för galleriet

Gör en ny, tom sida som vanligt. Spara den så att den får ett namn. Se till att den sparas någonstans i din lokala webbplats rot, alltså utanför alla mappar. Jag döper min sida till lightbox.html.

Det går förstås utmärkt att använda en sida du redan skapat saker i om du vill, men som vanligt så är det enklast att testa något första gången på en tom sida där inget annat stör.

 

 

 

2.2. Sätt in koden för galleriet

 Öppna din nya sida.

Markera och kopiera det här kodstycket...

<script type="text/javascript" src="lightbox-galleri/js/prototype.js"></script>
<script type="text/javascript" src="lightbox-galleri/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox-galleri/js/lightbox.js"></script>
<link rel="stylesheet" href="lightbox-galleri/css/lightbox.css" type="text/css" media="screen" />

 

... och klistra in det i sidans <head>-sektion, alltså någonstans mellan <head> och </head>. Kodstycket måste finnas i <head>-sektionen på alla sidor som ska använda galleriet.

 

Dessutom: Tänk på att om du någon gång vill använda galleriet i en sida som ligger i en mapp så måste du förstås klistra in kodstycket i den sidans <head>-sektion med -- och sedan måste du även ändra på kodstyckets fyra sökvägar så att de hittar till rätt ställe. Sökvägarna är de kodbitar som står inom citationstecknen efter parametrarna src, på styckets första tre rader, samt efter href på den sista.

Alla fyra sökvägarna i kodstycket leder ju till mappen lightbox-galleri, men om sidan galleriet används i ligger i en mapp så finns det ju ingen sådan destination där. Först måste du i så fall leda ut sökvägarna ur mappen, så kan de själva leta rätt på lightbox-galleri därifrån.

För att få sökvägarna att backa ut ur mappen sidan ligger i så skriver du bara ../ före själva sökvägen, såhär:

<script type="text/javascript" src="../lightbox-galleri/js/prototype.js"></script>

Då hoppar sökvägen först en mapp bakåt, sedan börjar de leta efter mappen lightbox-galleri.

 

 

 

2.3. Få galleriet att visa en bild

Sådär! Nu har vi en sida som kan använda sig av galleriet. Då ska vi börja med det enklaste: Vi ska få galleriet att visa en bild om besökaren klickar på en länk.

Jag ska nu göra en länk i min lightbox-sida som öppnar den här bilden i ett galleri:

Bild: Hund med boll
hund-med-boll.jpg   Bilden hämtades från Stock Xchange (www.sxc.hu)

 

Om du vill använda samma bild så är det förstås bara att spara den genom att högerklicka på den och välja "Spara bild som" eller liknande i menyn som dyker upp. Spara bilden i din webbplats. Den får gärna ligga i en bildmapp om du vill ha ordning på dina bilder. Det är även vanligt att göra en särskild mapp just för galleribilder. Det spelar ingen roll exakt var galleribilderna ligger; vi behöver inte krångla med sökvägar för dem. Det går faktiskt utmärkt att visa bilder som ligger på helt olika ställen i samma galleri.

Själv är jag en ordningssam själ, så jag har gjort en mapp i min webbplats som jag döpt till galleribilder. Jag har sparat bilden ovan, hund-med-boll.jpg, i den mappen, och vill alltså nu kunna visa bilden i ett lightbox-galleri.

 

 

 

2.3.1. Gör en länk till en bild

Då börjar jag med att skapa en länk som leder direkt till den bilden. Det är inget konstigt alls: Jag skriver bara en textsnutt på sidan.

 

Sedan markerar jag den del av texten som ska bli en länk (i det här fallet hela texten jag just skrev in).

 

Eftersom länken ska leda till bilden hund-med-boll.jpg så klickar jag bara på länkknappen så att fönstret Insert Hyperlink visas. Där bläddrar jag fram till bilden hund-med-boll.jpg i mappen galleribilder och klickar på OK...

 

... så har den markerade texten nu blivit till en länk som leder till just den bilden! Enkelt, va?

Så hur blir det när man provar länken? Testa!

Lightbox-exempel 1: En bild på sidan
(Sidan http://distans.svefi.net/webb/mholmgren2/lightbox1.html öppnas i en ny webbläsarflik eller webbläsarfönster.)

 

Inte så imponerande, eller hur? När man klickar på länken i min lightbox-sida så öppnas bara bilden på en egen sida som vanligt. Så hur får vi bilden att visas i galleriet? Jo, då måste först vi tala om för webbläsaren att länkens destination ska visas i galleriet, och det gör man genom att koppla länken till lightbox-koden. Och som tur är så är det väldigt simpelt.

 

 

 

2.3.2. Koppla länken till galleriet

Börja med att klicka på vyknappen Split (Dela) så att du ser både sidans design och dess kod.

Markera (eller klicka i) länken i din designvy. Då hamnar ju markören på just den länkens kod i kodvyn. (Vi gör på det här viset så att vi snabbt hittar precis rätt kod att ändra på. Just i det här fallet är det ju inte så svårt att hitta den länkens kod, men om du har en massa andra saker på din sida så är nog det här det enklaste sättet att hitta rätt.)

I mitt fall ser länkens kod ut såhär:

 

 

För att få länkens kod att kopplas till galleriet klämmer jag bara in parametern rel="lightbox" i koden. Såhär blir det då hos mig:

 

 

Nu sparar jag sidan lightbox.html och laddar upp den till min webbplats på nätet. Jag laddar även upp mappen lightbox-galleri, som ju innehåller själva gallerikoden, samt mappen galleribilder, där jag har bilden som ska visas i galleriet. (Om du testar sidan på din webbplats på nätet men inget laddas in när du klickar på en gallerilänk i den så beror det oftast på att du helt enkelt glömt att ladda upp den länkens bild till din webbplats på nätet.)

Hur blir det då?

Lightbox-exempel 2: En bild i galleriet
(Sidan http://distans.svefi.net/webb/mholmgren2/lightbox2.html öppnas i en ny webbläsarflik eller webbläsarfönster.)

 

Så ska det se ut! Mycket bättre, eller hur?

(Om du besöker sidan ovan med t ex Internet Explorer så kan det hända att det står "null" till vänster i galleriet som bilden visas i. Det beror i så fall på att den bilden ännu inte fått någon text -- null betyder "ingenting". Detta är något vi fixar till i steg 3.5.)

Men det här är ju bara en enda bild. Hur lägger jag in flera? Och om jag skulle lägga in fler länkar till olika bilder (eller rentav samma bild) på sidan och ge alla länkarna parametern rel="lightbox" så skulle varje länks bild visserligen visas i Lightbox-galleriet -- men de skulle ändå inte vara sammankopplade så att man kan klicka vidare från en bild till nästa, utan varje bild skulle ändå vara separat från de andra.

Så hur gör man för att koppla samman flera bilder så man kan bläddra mellan dem?

 

 

 

Till kursens framsida

Sida 2 av 8 »