06 Javascript

Javascript: Lytebox

2009-09-21 22:20 #0 av: dijete

En artikel om det populära javascript-galleriet Lytebox, en version av Lightbox. Artiklen beskriver hur du använder galleriet.

 

Vill du ha ett snyggt men enkelt galleri som funkar via javascript? Då är kanske Lytebox något för dig. Lytebox är ett galleri gjort av Dolem.
Lytebox funkar även om du har iframes vilket inte är vanligt i dagens javascript-gallerier. Följ stegen nedan för att installera.

Steg 1

Gå in på http://dolem.com/lytebox och ladda ner scriptet under "How to use". Där kan du även se exempel på hur Lyteboxen ser ut.

Steg 2

Öppna ditt webbhotell och ladda upp samtliga filer som du precis laddat ner. Det är en css-fil som heter lytebox.css, en javascriptfil som heter lytebox.js samt en katalog med bildfiler. Dessa bildfiler får du ladda upp enskilt, du kan inte ladda upp hela katalogen.

Steg 3

Gå in på din index-fil (där du kodat layouten till din hemsida). Skriv in följande kod inom dina <head>-taggar (dvs relativt långt upp på sidan).

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

Du ska även gå ner till din iframe-kod och skriva in att den heter "DisplayFrame". Då kan den exempelvis se ut såhär:

<iframe name="DisplayFrame" src="start.html" frameborder="0" width="620" height="460" border="0" scrolling="auto"></iframe>
Steg 4

Öppna dina gallerier på ditt webbhotell. Har du t.ex tre gallerier - hästsport, porträtt och rörelse, öppna upp samtliga. I dessa (inom <head>) skriver du in samma kod som ovan, dvs:

<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
Steg 5

Nu är det dags att peka om dina bildkoder så att de öppnas i Lyteboxen. Det gör du genom att skriva dit en <rel>-tagg i länkkoden.

<a href="bilden.jpg" rel="lytebox" title="bildbeskrivning">Liten bild eller text här</a>

Spara och öppna din hemsida för att se om det fungerar.

Next & Previous-knappar

 

Vill du inkludera flera bilder med hjälp av "Next" och "Prev"-knappar?
Många vill att man ska kunna klicka på en "Next"-knapp och en "Previous"-knapp när bilden är öppnad för att byta till nästa eller föregående bild. För att göra detta, skriv på följande sätt i bildkoderna:

<a href="bilden.jpg" rel="lytebox[vacation]" title="bildbeskrivning">Liten bild eller text här</a>

Hoppas det fungerar och att det kommer till användning för er!



Artikeln är skriven av Attlid på Hästfoto iFokus, den är lånad med tillstånd från henne. Tack så hemskt mycket för lånet. Orginalartikeln hittar du här!
Första delen i artikeln är dock skriven av mig.

 

Anmäl
2009-11-22 16:39 #1 av: IdaL

Jättebra skrivit!

Anmäl
2009-12-09 22:55 #3 av: dijete

Putt!

Anmäl
2009-12-27 15:45 #4 av: [Mharya]

Är Lytebox gratis?

Anmäl
2009-12-27 18:59 #5 av: IdaL

#4 100% gratis Flört

Anmäl
2009-12-27 21:59 #6 av: Mari

Jag har problem med lytebox !

Fungerar felfritt och snabbt i firefox men när jag testar i explorer går det så segt så segt. Någon som vet vad felet är?

Kolla gärna hemsidan min och säg om ni ser om jag har någon kod fel eller vad det kan vara?
Eller är det bara jag som upplever att det går sjukt segt med explorer??

Anmäl
2009-12-28 00:29 #7 av: [Mharya]

#6: På min data funkar den perfekt i explorer. :)

Anmäl
2009-12-28 00:50 #8 av: Mari

#7 Hm, undrar varför det går så segt när jag kollar då?

Någon annan som upplever samma sak som jag?

Anmäl
2009-12-30 14:37 #9 av: AnnaKlara

#6 Lite segt går det, dock inget jag blir störd av.
Jag har alltså explorer

Anmäl
2009-12-30 14:44 #10 av: dijete

Explorer är känt för att vara en seg webbläsare.

Anmäl
2010-01-13 16:28 #11 av: NikkieNikon

Måste man ha webbhotell?
Har dessvärre inte råd med det i dagsläget.

Anmäl
2010-01-13 20:43 #12 av: dijete

#11 Nejdå, det behövs inte, funkar ändå Glad

Anmäl
2010-01-23 19:20 #13 av: [Ebfotograf]

Det funkar inte för mig, jag har lagt in alla koder och sånt. Men det funkar inte endå.

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 00:44 #14 av: dijete

#13 Har du kollat så du angett rätt sökväg?

Anmäl
2010-01-24 11:46 #15 av: [Ebfotograf]

#14 - Det funkar nu men inte när man ska trycka på den lilla bilden. Det finns ingen bild där. Hur fixar man det ?

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 14:00 #16 av: Jojaton

#15 Var finns det ingen bild? Är det den stora bilden som inte visas eller den lilla bilden som inte "finns"?

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-24 18:50 #17 av: [Ebfotograf]

#16 - Det är en lilla bilden som inte "finns".

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 18:51 #18 av: Jojaton

Har du laddat upp den och länkat den rätt? Hur ser din kod ut för att öppna bilden?

<a href="bilden.jpg" rel="lytebox" title="bildbeskrivning">Liten bild eller text här</a>

Alltså den.

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-24 18:55 #19 av: [Ebfotograf]

#18 - Så ser den ut, och jag har länkat den till mappen jag har bilderna i.

Koden ser ut så här :

<a href="galleri/Stor 1.jpg" rel="lightbox [vacation]" title="Vattenbild"><img scr="/galleri/Liten 1.jpg" border="0"></a>

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 19:29 #20 av: Jojaton

det ska vara <img src=" och inte scr som du skrivit, hjälper det?

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-24 19:31 #21 av: [Ebfotograf]

#20 - Oj, har nog skrivit slarvigt. Nu är det ett kryss istället

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 19:51 #22 av: Jojaton

Har du mellanrum i filerna? För det är inget att rekommendera.

Men är du säker på att du länkat rätt?

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-24 19:58 #23 av: [Ebfotograf]

#22 - Jag provade med att inte ha mellanrum men det funkade inte, jag tror att jag har länkat rätt eftersom det funkar på dom stora filerna.

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 20:12 #24 av: dijete

/mapp/fil.jpg ska det vara ^^

Anmäl
2010-01-24 20:33 #25 av: [Ebfotograf]

#24 - Jag har gjort så men det funkar inte

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 20:43 #26 av: Jojaton

#23 Menade inte att du skulle ta bort mellanrummen bara i koden, utan att filerna du laddar inte upp ska innehålla mellanslag.

Testa att länka hela adressen, alltså http://dinwebbadress.se/mapp/fil.jpg och se om det är någon skillnad.

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-24 20:45 #27 av: [Ebfotograf]

#26 - Det funkade inte det heller. Jag använder Manufrog som webbhotell

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 20:55 #28 av: Jojaton

Och du är alldeles säker på att du har laddat upp bilden? Jag kommer inte på något som kan vara fel.

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-24 23:03 #29 av: [Ebfotograf]

#28 - Ja

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-24 23:51 #30 av: Futurity

Har du lagt det i en mapp då?

Anmäl
2010-01-25 18:59 #31 av: [Ebfotograf]

#30 - Jag, och jag provade att lägga " Liten1.jpg" utan för också och ändra i kodningen men det funkade inte.

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-25 19:02 #32 av: Jojaton

Testa att ladda upp bilden igen. Och testa och se om den visas när du inte länkat.

Johanna
@bellasantorino på Instagram

Anmäl
2010-01-25 19:04 #33 av: Mari

#31 Har du detta någonstans ute på nätet så man kan kolla vad som blivit fel?

Anmäl
2010-01-26 16:56 #34 av: [Ebfotograf]

#33 - Jag har Portfolion på min hemsida www.ebfotografi.webb.se

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-26 17:02 #35 av: Mari

#34 Jag ser inga bilder alls i din portfolio?

Anmäl
2010-01-26 17:28 #36 av: [Ebfotograf]

#35 - Har du Firefox eller liknande? Bilderna syns inte i FireFox konstigt nog...

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-26 17:40 #37 av: Futurity

Är det okey om jag kollar lite på din kodning och ser om jag hittar felet?

Anmäl
2010-01-26 18:11 #38 av: [Ebfotograf]

#37 - Det går bra, ska jag lägga upp kodningen här  (fast det blir ju lite väl långt.. ) eller ?

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-26 18:20 #39 av: Futurity

#38 Det är nog ingen fel på kodningen. Det är bilden som du använder som ikon som inte funkar.  Ta bara en tex  bilden stor_1 och sätt den där du skrvit liten_1 och testa!

Anmäl
2010-01-26 18:30 #40 av: [Ebfotograf]

#39 - Ska prova

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-26 18:35 #41 av: Mari

#36 Japp har firefox, kollar igen med explorer

Anmäl
2010-01-26 18:39 #42 av: Mari

Konstigt att det ej fungerar i firefox. Tyvärr kommer jag ej åt källinformationen så jag kan inte se din kodning, jag gör antagligen fel (?) men det verkar som att det är dina minibilder som inte fungerar som de ska.

Att bilderna inte syns i firefox kom jag på nu är säkert för att de är felkodade, firefox brukar inte visa bilder som det i explorer är ett rött kryss över.

Anmäl
2010-01-26 19:09 #43 av: Futurity

#42 Du får klicka på Denna  ram -> Visa endast denna ram och sedan visa källkod.

 

Anmäl
2010-01-26 19:23 #44 av: [Ebfotograf]

#39 - Det funkade inte det heller :(

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-26 19:42 #45 av: Mari

#44 är det kanske så att länkningen för de små bilderna blivit fel, eller ja att de bara hamnat på fel ställe när du har laddat upp dem på serverplatsen?

Anmäl
2010-01-26 20:29 #46 av: Futurity

#44 Märkte nu, vad för album ska du ha? Du har skrvit koder för lightbox men du skriver här på lytebox.

Anmäl
2010-01-26 22:13 #47 av: IdaL

För det första, har du laddat upp alla mapparna till lightboxen? dvs. mapparna som heter "css", "js" och "images"? och sen för det andra så har inte mellanrum i dina filnamn som du har på dom stora bilderna i dina koder.

sen får du skriva hela url:en i länken till dina bilder. Eftersom att alla "kommer" in på din sida via din webb.se så luras webbläsaren att dina bilder ska ligga på www.ebfotografi.webb.se/galleri/filnamn.jpg men det gör dom inte eftersom dom ligger på din temporära adress.

Testa att ändra det jag sagt så tror jag det funkar Flört

Anmäl
2010-01-27 16:42 #48 av: [Ebfotograf]

#47 - Ida TACK! Nu funkar det Skrattande

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-01-27 17:36 #49 av: IdaL

#48 Ingen fara Flört

Anmäl
2010-02-09 20:17 #50 av: NikkieNikon

Haha! Nu har jag äntligen fått till mitt, har bara ett problem dock, CLOSE-rutan är helvit utan text, hur ändrar man det?

Anmäl
2010-02-09 20:23 #51 av: NikkieNikon

nej haha det var inget :p

Anmäl
2010-02-09 20:30 #52 av: dijete

Du är hopplös, "Picha" Skrattande

Anmäl
2010-02-13 17:31 #53 av: MoaW

next och prev bilderna visas inte för mig, har antagligen gjort nåt fel nånstans, men hittar det inte Obestämd

Anmäl
2010-02-13 18:04 #54 av: MoaW

hmm, felet var tydligen att jag hade samma bild efter... då ville den inte växla.. men problemet nu är att det inte funkar så bra i ie... inga knappar syns och bakgrunden blir inte mörk. Ska det funka i ie?

Anmäl
2010-02-13 18:16 #55 av: MoaW

här är sidan, nån som har ie får gärna kolla vad som är fel: http://72.29.84.63/~hundfocu/galleri.htm

Anmäl
2010-02-15 22:01 #56 av: MoaW

Nån som har en aning om varför det inte funkar i ie för mig? eller kan rekommendera nåt annat galleri?

Anmäl
2010-02-15 22:29 #57 av: IdaL

#56 Ska du inte ha det i en iframe finns ju lightbox som har samma utseende på ett ungefär.

Anmäl
2010-02-15 23:39 #58 av: MoaW

#57 jo jag vet, men hade hoppats på att slippa ladda ner det Tungan ute

Anmäl
2010-02-15 23:40 #59 av: MoaW

#57 har du nån länk, eller är det bara att söka? Flört får nog bli lightbox

Anmäl
2010-02-16 22:07 #60 av: MoaW

#57 Oj, sorry att jag skrev "jag vet" när det var jag själv som hade frågat. Haha va visst lite för trött igår Tungan ute

Anmäl
2010-02-16 23:45 #61 av: IdaL

#60 haha, det finns en länk ja, HÄR finns lightbox Glad

Anmäl
2010-02-16 23:50 #62 av: MoaW

#61 tack så mycket Flört

Anmäl
2010-02-19 00:10 #63 av: [Ebfotograf]

Nu har lightbox dampat på min hemsidan konstigt nog, bilderna kommer inte upp när jag trycker på dom. Kan det vara något med att jag inte betalat min räkning på manufrog ännu ? Eller är det något i kodning?

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-02-19 18:28 #64 av: [Ebfotograf]

Måste man lägga in iframe koden ?

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-02-21 23:32 #65 av: [Ebfotograf]

Det funkar inte för mig när jag har hemsidan framme men när den väl är under uppdatering funkar det, varför blir det så ?

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-02-21 23:57 #66 av: IdaL

#65 Eftersom du använder dig av den korta sökvägen och bara skriver in namnet dvs lytebox.css så funkar det inte med din domän. Du använder dig av webb.se som är kopplad till din tempoära adress dvs att när hemsidan försöker söka upp lyteboxen söker den efter www.ebfotografi.webb.se/lytebox.css och den funkar ju inte eftersom att den inte finns på den adressen.

Jag tror att det är det som ger ditt problem Flört

Anmäl
2010-02-22 12:40 #67 av: [Ebfotograf]

#66 - Det funkar inte det heller..

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-02-22 19:05 #68 av: putte12

Ebfotograf: du har säkert samma problem som jag. använder mig även jag av en webb.se domän för att få kortare url än till mitt riktiga webhotell.

Jag tror problemet är att webb.se adressen automatiskt gör att hela din hemsida läggs i en frame som heter "page".

För min fungerade lytebox perfekt om jag gick in direkt på adresse till sidan i webhotellet, surfade jag däremot via den korta url så fungerar det inte.

Så är det någon som vet hur man kan lösa detta. Har försökt läsa mig till utan att finna något svar.

Anmäl
2010-02-24 14:55 #69 av: [Ebfotograf]

#68 - Har exakt samma problem! Det funkar inte på själva "hemsideadressen" utan bara på "urhemsidan"

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-02-27 12:38 #70 av: Katter3

Jag får inte next, prev och close att synas. Måste ha gjort något fel...

Anmäl
2010-03-07 15:27 #71 av: [Ebfotograf]

Det funkar inte för mig!

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-03-07 20:54 #72 av: dijete

Det är bara för att du har .webb.se, det är vidarebefodringsadressen och din sida läggs i en iframe.

Anmäl
2010-03-07 21:16 #73 av: [Ebfotograf]

Det funkar med Lightbox nu så det får blir lightbox istället!

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-03-14 11:09 #74 av: putte12

#72 - Går det att lösa på något sätt så att det fungerar?

Anmäl
2010-04-03 19:20 #75 av: Searchingmoonwolf

Undrar va för skillnad det är mellan Lytebox och Lightbox? Varför har Lytebox blivit så populärt (jämfört med tex Lightbox)?

Vet ni några andra sätt att visa bilder?

Råkar ni veta några enkla program för att visa bilderna (program där man inte själv behöver använda mer än en bild)?

Tackar! Cool

Anmäl
2010-06-12 16:39 #76 av: Lindaaxelsson

Funkar galleriet utan iframes? :)

Anmäl
2010-06-13 02:21 #77 av: dijete

#76 Japp! :)

Anmäl
2010-06-14 19:19 #78 av: Lindaaxelsson

Okej, hur ska man då göra med detta steg:

<iframe name="DisplayFrame" src="start.html" frameborder="0" width="620" height="460" border="0" scrolling="auto"></iframe>

/ Linda :)

Anmäl
2010-06-14 19:48 #79 av: IdaL

#78 Tror du bara hoppar över de steget då Flört

Anmäl
2010-07-30 14:49 #80 av: [Ebfotograf]

Nu har jag samma problem som förut på en annan hemsida, jag använder webs.com och webb.se

Scriptet fungerar på webs sidan men som vanligt inte på webb, jag har klarat det förut men nu funkar det inte. Jag har provat att direkt länka till webs.com men det funkar inte, har jag gjort fel?

Tacksam för svar snarast!

Häls.
Elinore Björkbacke - www.ebfotografi.com, www.neoverona.se
Medarbetare på Australian Shepherd

Anmäl
2010-09-11 19:34 #81 av: AnnaKlara

Fungerar det även om man inte använder iframes?

Anmäl
2010-09-11 21:29 #82 av: MichaelE

#82 tror inte det, jag föredrar Lightbox då det inte ställer något krav på iframes.

Anmäl
2010-09-17 14:24 #83 av: LosGinos

Att byta färg på knapparna fungerar inte.

Sajtvärd för Hockey iFokus.
SM-Guld: 1965, 2003, 2005 & 2016 CHL: 2016 & 2017
Med vänlig hälsning Brian

Anmäl
2010-09-17 14:28 #84 av: LosGinos

Skojade bara med er! Fungerar fin fint :)

Sajtvärd för Hockey iFokus.
SM-Guld: 1965, 2003, 2005 & 2016 CHL: 2016 & 2017
Med vänlig hälsning Brian

Anmäl
2010-09-17 14:51 #85 av: LosGinos

Skojade inte alls xD! 
Den fungerar inte online.. Men offline fungerar den..

Sajtvärd för Hockey iFokus.
SM-Guld: 1965, 2003, 2005 & 2016 CHL: 2016 & 2017
Med vänlig hälsning Brian

Anmäl
2011-01-17 19:32 #86 av: CamillaS

Kan man använda lytebox i frontpage?
Jag kan inget om kodning, men tänkte om man kan typ klistra in koden på något vis så att den kommer på rätt ställe och fungerar?

Anmäl

Det finns en till kommentar till den här diskussionen. Den är bara synlig för medlemmar på iFokus. För att läsa kommentaren, logga in eller registrera dig på iFokus.