Lightbox framhäver bilder
Lightbox är en JavaScript applikation som används för att visa stora bilder mot en nedtonad bakgrund.
Om du klickar på en av bilderna på www.divide.it/tour så förstår du vad jag menar.
Steg 1:
Ladda ner Lightbox2 och ladda upp filerna till ditt webbhotell.
Steg 2: Lägg in dessa kodsnuttar mellan <head> och </head> i precis den här ordningen. Se till att sökvägarna är korrekta. Om du t.ex. har laddat upp filerna till public_html/js/ så bör det fungera. Om du laddat upp dem till public_html/lightbox/ så får du lägga till /lightbox/ först i sökvägen.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Steg 3: Inkludera css-filen genom att lägga till följande kodsnutt mellan dina head-taggar. Kontrollera sökvägen en extra gång.
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Steg 4: Kontrollera CSS-filen och säkerställ att bilderna prev.gif och next.gif finns i rätt mapp.
Kontrollera ocksåe att bilderna loading.gif och close.gif som finns refererade höght upp i lightbox.js finns på rätt plats. Om inte behöver du ta reda på sökvägen.
Om sökvägarna till dessa bilder inte blir rätt så kommer du inte att se några Close, Prev eller Next knappar när du tittar på bilder. Scriptet ska fungera i övrigt så det går bra att testa genom att klicka på en bild när du gått igenom de följande stegen.
Steg 1: Lägg till ett rel="lightbox" attribut till någon länk för att aktivera lightboxen.
<a href="images/bild.jpg" rel="lightbox" title="Min bildtext">Min bild</a>
Om du vill visa en liten bild som länk gör du en vanlig bildlänk på följande sätt.
<a href="images/min_lilla_bild.jpg" rel="lightbox" title="Min bildtext"><img src="images/min_stora_bild.jpg" /></a>
Du använder title-attributet för att lägga till bildtexter som ovan.
Steg 2: Om du har en sammanhängande bildserie kan du gruppera dessa bilder på ett enkelt sätt och därigenom göra det möjligt att bläddra till nästa bild direkt i lightboxen. Det enda du behöver ändra är att lägga till gruppnamnet inom hårda parenteser [gruppnamn].
<a href="images/bild_1.jpg" rel="lightbox[fisketur]">Bild #1</a>
<ahref="images/bild_2.jpg" rel="lightbox[fisketur]">Bild #2</a>
<ahref="images/bild_3.jpg" rel="lightbox[fisketur]">Bild #3</a>
Det finns ingen begränsning på hur många bilder du kan ha per sida eller bildserie.
Det var allt. Nu bör du kunna klicka runt bland bilderna och njuta.
Det enda som kan strula är sökvägarna så tänk igenom dem en extra gång. Placera filerna i mappen js där du har andra javascrip och filen i mappen css där du har andra bilder samt bildfilerna där du har andra bilder för minst förvirring.
Ett exempel
Om du klickar på en av bilderna på www.divide.it/tour så förstår du vad jag menar.
Fördelar
- Användaren slipper komma till en ny sida för att se bilden.
- Om det finns bilder och formulär på samma sida riskerar inte informationen i formulären att försvinna bara för att man klickade på en bild (se ovan).
- Lightbox förladdar automatiskt nästa bild i serien vilket minskar den upplevda väntetiden.
- Det är både vackert och funktionellt och bidrar till att förbättra sidan.
Installation
Steg 1:
Ladda ner Lightbox2 och ladda upp filerna till ditt webbhotell.
Steg 2: Lägg in dessa kodsnuttar mellan <head> och </head> i precis den här ordningen. Se till att sökvägarna är korrekta. Om du t.ex. har laddat upp filerna till public_html/js/ så bör det fungera. Om du laddat upp dem till public_html/lightbox/ så får du lägga till /lightbox/ först i sökvägen.
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
Steg 3: Inkludera css-filen genom att lägga till följande kodsnutt mellan dina head-taggar. Kontrollera sökvägen en extra gång.
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Steg 4: Kontrollera CSS-filen och säkerställ att bilderna prev.gif och next.gif finns i rätt mapp.
Kontrollera ocksåe att bilderna loading.gif och close.gif som finns refererade höght upp i lightbox.js finns på rätt plats. Om inte behöver du ta reda på sökvägen.
Om sökvägarna till dessa bilder inte blir rätt så kommer du inte att se några Close, Prev eller Next knappar när du tittar på bilder. Scriptet ska fungera i övrigt så det går bra att testa genom att klicka på en bild när du gått igenom de följande stegen.
Aktivera
Steg 1: Lägg till ett rel="lightbox" attribut till någon länk för att aktivera lightboxen.
<a href="images/bild.jpg" rel="lightbox" title="Min bildtext">Min bild</a>
Om du vill visa en liten bild som länk gör du en vanlig bildlänk på följande sätt.
<a href="images/min_lilla_bild.jpg" rel="lightbox" title="Min bildtext"><img src="images/min_stora_bild.jpg" /></a>
Du använder title-attributet för att lägga till bildtexter som ovan.
Steg 2: Om du har en sammanhängande bildserie kan du gruppera dessa bilder på ett enkelt sätt och därigenom göra det möjligt att bläddra till nästa bild direkt i lightboxen. Det enda du behöver ändra är att lägga till gruppnamnet inom hårda parenteser [gruppnamn].
<a href="images/bild_1.jpg" rel="lightbox[fisketur]">Bild #1</a>
<ahref="images/bild_2.jpg" rel="lightbox[fisketur]">Bild #2</a>
<ahref="images/bild_3.jpg" rel="lightbox[fisketur]">Bild #3</a>
Det finns ingen begränsning på hur många bilder du kan ha per sida eller bildserie.
Det var allt. Nu bör du kunna klicka runt bland bilderna och njuta.
Det enda som kan strula är sökvägarna så tänk igenom dem en extra gång. Placera filerna i mappen js där du har andra javascrip och filen i mappen css där du har andra bilder samt bildfilerna där du har andra bilder för minst förvirring.
Kommentarer
(jobbade åt blogg.se tidigare, så jag har ganska bra koll på deras grejer)