Guide: Hur man lägger in Lightbox till sin blogg

Tid: 5min
Resultat:


Detta är något som jag lagt ner några timmar på att fatta, så jag tänkte berätta exakt hur jag gjorde. Lightbox är ett javascript som gör att det blir snyggt att titta på bilder på hemsidan.

1. Går till http://www.huddletogether.com/projects/lightbox2/#how. Klicka på Download och ladda hem scriptet.
2. Nu måste du ladda upp filerna som du har laddat hem. Eftersom man inte kan ladda upp filer på blogg.se så valde jag att ladda upp dom på min dropbox. www.dropbox.com
3. Klicka på Design/Redigera stilmapp och kopiera in denna koden längst ner i css-filen:


#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://dl.dropbox.com/u/5392921/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://dl.dropbox.com/u/5392921/lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }


4. Klicka på Design/Kodmallar och kopiera in denna koden precis under <head>-taggen:

<script type="text/javascript" src="Här skriver du adressen för sökvägen..min är https://dl.dropbox.com/u/5392921/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="Här skriver du adressen för sökvägen..min är https://dl.dropbox.com/u/5392921/lightbox/js/scriptaculous.js?load=effects,builder"></script>

<script type="text/javascript" src="Här skriver du adressen för sökvägen..min är https://dl.dropbox.com/u/5392921/lightbox/js/lightbox.js"></script>


5. Nu återstår en sista sak, och det är att redigera raderna 49 och 50 i filen lightbox.js. Öppna dropboxen och redigera direkt i filen så att det blir följande kod:

fileLoadingImage:        'Här skriver du adressen för sökvägen..min är https://dl.dropbox.com/u/5392921/lightbox/images/loading.gif'     
fileBottomNavCloseImage: 'Här skriver du adressen för sökvägen..min är https://dl.dropbox.com/u/5392921/lightbox/images/closelabel.gif'

Varsegod

Kommentarer
Postat av: 月姫 Tsukii ♥

riktigt bra skrivet! =) Har inte tagit tummen ur att ta tag i mitt mini galleri som jag tänkte ha på blogg.se, inte hittat nån bra sida att ladda upp innehållet på, går det bra att man direktlänkar dina uppladningar? =)

2010-08-06 @ 17:09:24
URL: http://tsukii.se
Postat av: Eja

Fan va awesome! Jag lyckas dock inte själv få det att fungera. Gissar på att det är denna kod som ställer till det: https://dl.dropbox.com/u/5392921/lightbox/js/scriptaculous.js?load=effects,builder



Min ser nämligen ut så här: https://dl-web.dropbox.com/get/lightbox/js/scriptaculous.js?w=a20bd4fe



Har testat att klistra in load=effects,builder, på slutet av koden, men det fungera naturligtvis inte. Har du någon bra lösning på problemet, eller skulle jag kunna kopiera dina koder mot att jag länkar källan? :)

2010-11-14 @ 01:22:55
URL: http://lillskitrus.blogg.se/
Postat av: Lena

Scriptet laddas inte in hos dig, kanske att du ska uppdatera det?

2011-01-14 @ 17:45:12

Kommentera inlägget här:

Namn:
Kom ihåg mig?

E-postadress: (publiceras ej)

URL/Bloggadress:

Kommentar:

Trackback
RSS 2.0