Annons:
Etikett06-javascript
Läst 9077 ggr
dijete
9/21/09, 10:20 PM

Javascript: Lytebox

Bild 1. Klicka för att öppna i full storlek.

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 -taggar (dvs relativt långt upp på sidan).


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:


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 ) skriver du in samma kod som ovan, dvs:



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 -tagg i länkkoden.

Liten bild eller text här

**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:

Liten bild eller text här

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.

Annons:
IdaL
11/22/09, 4:39 PM
#1

Jättebra skrivit!

Denna kommentar har tagits bort.
dijete
12/9/09, 10:55 PM
#3

Putt!

[Mharya]
12/27/09, 3:45 PM
#4

Är Lytebox gratis?

IdaL
12/27/09, 6:59 PM
#5

#4 100% gratis Flört

Mari
12/27/09, 9:59 PM
#6

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??

Sajtvärd för Djurfoto
www.mariekengren.se

Annons:
[Mharya]
12/28/09, 12:29 AM
#7

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

Mari
12/28/09, 12:50 AM
#8

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

Någon annan som upplever samma sak som jag?

Sajtvärd för Djurfoto
www.mariekengren.se

AnnaKlara
12/30/09, 2:37 PM
#9

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

dijete
12/30/09, 2:44 PM
#10

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

NikkieNikon
1/13/10, 4:28 PM
#11

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

dijete
1/13/10, 8:43 PM
#12

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

[Ebfotograf]
1/23/10, 7:20 PM
#13

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

Annons:
dijete
1/24/10, 12:44 AM
#14

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

[Ebfotograf]
1/24/10, 11:46 AM
#15

#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 ?

Jojaton
1/24/10, 2:00 PM
#16

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

Johanna - Instagram

[Ebfotograf]
1/24/10, 6:50 PM
#17

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

Jojaton
1/24/10, 6:51 PM
#18

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

Liten bild eller text här

Alltså den.

Johanna - Instagram

[Ebfotograf]
1/24/10, 6:55 PM
#19

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

Koden ser ut så här :

Jojaton
1/24/10, 7:29 PM
#20

det ska vara

Johanna - Instagram

Annons:
[Ebfotograf]
1/24/10, 7:31 PM
#21

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

Jojaton
1/24/10, 7:51 PM
#22

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 - Instagram

[Ebfotograf]
1/24/10, 7:58 PM
#23

#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.

dijete
1/24/10, 8:12 PM
#24

/mapp/fil.jpg ska det vara ^^

[Ebfotograf]
1/24/10, 8:33 PM
#25

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

Jojaton
1/24/10, 8:43 PM
#26

#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 - Instagram

[Ebfotograf]
1/24/10, 8:45 PM
#27

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

Annons:
Jojaton
1/24/10, 8:55 PM
#28

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

Johanna - Instagram

[Ebfotograf]
1/24/10, 11:03 PM
#29

#28 - Ja

Futurity
1/24/10, 11:51 PM
#30

Har du lagt det i en mapp då?

 
 
 
 

[Ebfotograf]
1/25/10, 6:59 PM
#31

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

Jojaton
1/25/10, 7:02 PM
#32

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

Johanna - Instagram

Mari
1/25/10, 7:04 PM
#33

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

Sajtvärd för Djurfoto
www.mariekengren.se

[Ebfotograf]
1/26/10, 4:56 PM
#34

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

Annons:
Mari
1/26/10, 5:02 PM
#35

#34 Jag ser inga bilder alls i din portfolio?

Sajtvärd för Djurfoto
www.mariekengren.se

[Ebfotograf]
1/26/10, 5:28 PM
#36

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

Futurity
1/26/10, 5:40 PM
#37

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

 
 
 
 

[Ebfotograf]
1/26/10, 6:11 PM
#38

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

Futurity
1/26/10, 6:20 PM
#39

#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!

 
 
 
 

[Ebfotograf]
1/26/10, 6:30 PM
#40

#39 - Ska prova

Mari
1/26/10, 6:35 PM
#41

#36 Japp har firefox, kollar igen med explorer

Sajtvärd för Djurfoto
www.mariekengren.se

Annons:
Mari
1/26/10, 6:39 PM
#42

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.

Sajtvärd för Djurfoto
www.mariekengren.se

Futurity
1/26/10, 7:09 PM
#43

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

 
 
 
 

[Ebfotograf]
1/26/10, 7:23 PM
#44

#39 - Det funkade inte det heller :(

Mari
1/26/10, 7:42 PM
#45

#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?

Sajtvärd för Djurfoto
www.mariekengren.se

Futurity
1/26/10, 8:29 PM
#46

#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.

 
 
 
 

IdaL
1/26/10, 10:13 PM
#47

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

[Ebfotograf]
1/27/10, 4:42 PM
#48

#47 - Ida TACK! Nu funkar det Skrattande

Annons:
IdaL
1/27/10, 5:36 PM
#49

#48 Ingen fara Flört

NikkieNikon
2/9/10, 8:17 PM
#50

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

NikkieNikon
2/9/10, 8:23 PM
#51

nej haha det var inget :p

dijete
2/9/10, 8:30 PM
#52

Du är hopplös, "Picha" Skrattande

MoaW
2/13/10, 5:31 PM
#53

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

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

MoaW
2/13/10, 6:04 PM
#54

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?

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

MoaW
2/13/10, 6:16 PM
#55

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

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

Annons:
MoaW
2/15/10, 10:01 PM
#56

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

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

IdaL
2/15/10, 10:29 PM
#57

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

MoaW
2/15/10, 11:39 PM
#58

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

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

MoaW
2/15/10, 11:40 PM
#59

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

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

MoaW
2/16/10, 10:07 PM
#60

#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

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

IdaL
2/16/10, 11:45 PM
#61

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

MoaW
2/16/10, 11:50 PM
#62

#61 tack så mycket Flört

HundGlädje.nu - Hundkurser, Dogwalking och Fotografering.
För ökad kontakt och förståelse.

Annons:
[Ebfotograf]
2/19/10, 12:10 AM
#63

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?

[Ebfotograf]
2/19/10, 6:28 PM
#64

Måste man lägga in iframe koden ?

[Ebfotograf]
2/21/10, 11:32 PM
#65

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å ?

IdaL
2/21/10, 11:57 PM
#66

#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

[Ebfotograf]
2/22/10, 12:40 PM
#67

#66 - Det funkar inte det heller..

putte12
2/22/10, 7:05 PM
#68

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.

[Ebfotograf]
2/24/10, 2:55 PM
#69

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

Annons:
Katter3
2/27/10, 12:38 PM
#70

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

Mvh Johanna
www.fotografjohanna.se

[Ebfotograf]
3/7/10, 3:27 PM
#71

Det funkar inte för mig!

dijete
3/7/10, 8:54 PM
#72

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

[Ebfotograf]
3/7/10, 9:16 PM
#73

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

putte12
3/14/10, 11:09 AM
#74

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

Searchingmoonwolf
4/3/10, 7:20 PM
#75

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

Lindaaxelsson
6/12/10, 4:39 PM
#76

Funkar galleriet utan iframes? :)

Annons:
dijete
6/13/10, 2:21 AM
#77

#76 Japp! :)

Lindaaxelsson
6/14/10, 7:19 PM
#78

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

/ Linda :)

IdaL
6/14/10, 7:48 PM
#79

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

[Ebfotograf]
7/30/10, 2:49 PM
#80

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!

AnnaKlara
9/11/10, 7:34 PM
#81

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

MichaelE
9/11/10, 9:29 PM
#82

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

LosGinos
9/17/10, 2:24 PM
#83

Att byta färg på knapparna fungerar inte.

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

Annons:
LosGinos
9/17/10, 2:28 PM
#84

Skojade bara med er! Fungerar fin fint :)

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

LosGinos
9/17/10, 2:51 PM
#85

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

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

CamillaS
1/17/11, 7:32 PM
#86

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?

[Minivirk]
6/24/11, 6:00 PM
#87

Jag har min hemsida via blogg.se undrar hur man får till det då? För man kan ju inte ladda upp filer på det sättet som ni beskriver här… och så hittar jag inte någon iframe?

Om det är någon som kan hjälpa så är jag tacksam!

Upp till toppen
Annons: