Guide: Hur man lägger in Lightbox till sin blogg
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
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? =)
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? :)
Scriptet laddas inte in hos dig, kanske att du ska uppdatera det?