Annons:
Etikett05-webbdesignskolan
Läst 9717 ggr
Anna
2/1/09, 5:03 PM

Webbdesignskolan: Lytebox

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

Här kommer del två i vår artikelserie som handlar om webbdesign och koder. I den här delen tar vi med hjälp av 5 enkla steg upp hur man använder sig av Lytebox - som är en annan variant på Lightbox, det populära javascriptgalleriet.

Om man använder sig av iframes på sin hemsida men vill ha Lightboxgalleriet finns det en annan lösning. Den heter Lytebox och fungerar på samma sätt som Lightbox och ser ungefär likadan ut!

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.

steg1.jpg

Steg 2

Öppna ditt webbhotell och ladda upp samliga 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.

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

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Annons:
IdaL
2/1/09, 5:06 PM
#1

Suuuper bra Anna! :) De har du gjort bra ^^

evisj
2/1/09, 5:06 PM
#2

ska absolut prova genast! :)

Marija
2/1/09, 5:09 PM
#3

Kanon! Tror många kommer dra nytta av den här artikeln =)

//Marija, medarbetare på Hästfoto.ifokus

Anna
2/1/09, 5:11 PM
#4

Tilläggas bör att jag lärde mig detta själv för ca 2 timmar sedan, så jag reserverar mig för eventuella missar i beskrivningen… ;)

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Adrina
2/1/09, 5:13 PM
#5

Jätte bra!

NettanLindholm
2/1/09, 5:53 PM
#6

jättebra skrivet !

Annons:
neonrosa
2/1/09, 6:46 PM
#7

Mycket bra!

evisj
2/1/09, 7:53 PM
#8

Jag får inte mina bilder till orginal storleken, kan det bero på storleken av Framesen? Jag tror det kan vara det.. men hur rättar man till det? Oskyldig Tror ni man måste ändra layouten helt?

IdaL
2/7/09, 12:29 PM
#9

*putt* Alttid bra o ha sånna här artiklar ;'D

Mari
3/6/09, 11:13 AM
#10

#8 Hur menar du? Visar lytebox bara bilden liten och inte över hela skärmen? Isåfall kan det bero på att den är "instängd" i en frame, dock vet jag ej hur man fixar det problemet men om något vet så hojta gärna till!

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

Zartha
3/6/09, 11:43 AM
#11

Tack!….Mycket braGlad 

Men var finner jag Del 1.?…utav denna "artikelserie som handlar om webbdesign och koder."

--------------------------------------------------------------

ObestämdFörst när vår hjärna ser ett mönster och en aha-upplevelse kommer ur det påstådda, sker en klang mot den egna erfarenheten och kunskap uppstårFörvånad

Anna
3/6/09, 4:02 PM
#12

#11 Gå in under Artiklar i menyn och välj sedan kategorin "Webbdesignskolan".

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Fiaa2
3/8/09, 9:29 PM
#13

Mycket bra! Men där det står "Liten bild eller text här" hur ska man länka den lilla bilden där? :)

Annons:
Jojaton
4/8/09, 6:11 PM
#14

#13 Ja det ska man ;)

Jag får det inte att funka. Bilderna vill inte öppna sig i lyteboxen utan öppnas i min iframe bara.

Johanna - Instagram

Anna
4/8/09, 8:21 PM
#15

#14 har du laddat ner scriptet och laddat upp det på hemsidan?

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Jojaton
4/8/09, 10:15 PM
#16

#15 Ja. Åh, blir alltid såhär för mig när jag ska ha sådana gallerier. Orkar inte koda mitt egna just nu…

Johanna - Instagram

Jojaton
4/11/09, 8:29 PM
#17

Blir så sjuuukt sur, ingen som kan hjälpa mig? Har laddat ner scriptet, laddat upp det på hemsidan, lagt in alla koder PRECIS där de ska vara och ändå funkar det inte… Gråter

Johanna - Instagram

dijete
4/12/09, 6:27 PM
#18

Jag har enskilda sidor alltså inte iframe på min sida, ska jag sätta koden endast på galleri sidan då eller? på alla sidor; information,osv

[Zoie]
4/12/09, 7:09 PM
#19

åh gud vad bra! :)
hur ska man få den där lilla bilden så man kan trycka på den så blir den större ? :D

LnKarlsson
4/12/09, 7:26 PM
#20

Det funkade utmärkt för mig, med undantag från att ikonerna inte syntes. Stäng, nästa och föregående alltså, det gick att klicka men de syntes inte. Och jag hade laddat upp alla ikoner.. :/

Annons:
IdaL
4/19/09, 6:16 PM
#21

asså när jag försöka lägga upp de och sparar får jag upp att "Internetplatsen är inte tillgänglig"

Anna
5/16/09, 3:06 PM
#22

Jag har kommit på varför det inte fungerar för vissa!

Man måste gå in i iframe-koden och skriva dit att den heter DisplayFrame. La till detta i artikeln under steg 3.

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:

Ber om ursäkt för detta!

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Jojaton
5/20/09, 7:51 PM
#23

#22 Fungerar fortf inte… Funkar (eller ja, next, colse och prev knapparna syns inte, men) så länge jag inte har den i en iframe, men när jag länkar från en sida in i en iframe så lägger den av typ :P

Johanna - Instagram

Anna
5/20/09, 7:52 PM
#24

#23 För mig fungerade den felfritt såfort jag la in name="DisplayFrame" på hannastridsberg.se. Kolla källkoderna där och se om du hittar något som skiljer sig från dina?

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

Jojaton
5/20/09, 7:53 PM
#25

#24 Ska titta efter då :)

Johanna - Instagram

IdaT
9/6/09, 12:04 AM
#26

I css-filen för LyteBoxen, ska man då ta bort dom färger på knapparna man inte vill ha? Varför måste man skriva " " på index-sidan?

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

dijete
9/6/09, 12:09 AM
#27

#26 Du har ju svart som standard. Därför att du ska skriva det på din portfolio sida annars har du inget som anropar .css filen.

Annons:
IdaT
9/6/09, 12:19 AM
#28

#27 Men om jag inte vill ha svart? Dessutom blir det ju segare att ladda med onödig kod. Flört Men jag förstår att jag ska ha det i portfolion, men varför på index-sidan?

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

Anna
9/6/09, 12:21 AM
#29

#28 Använder man sig av iframes måste man ha det på indexsidan. Annars blir ju bara overlayeffekten över själva iframen. Har du koden på indexsidan också blir overlayen över hela sidan, som man ofta vill.

Anna, värd på Hästfoto och Webbutveckling

annaattlid.se

IdaT
9/6/09, 12:31 AM
#30

#29 Okej, då var det som jag misstänkte, att det bara gäller vid iframes, men ville vara säker. Flört Dock kvarstår andra frågan, om man vill byta färg, är det bara att ta bort koderna för dom andra färgerna då?

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

IdaT
9/9/09, 10:22 PM
#31

Ingen som har svar på frågan i #30?

Att våga är att förlora fotfästet en liten stund. Att inte våga är att förlora sig själv. - Søren Kierkegaard
Följ min vardag med djuren på bloggen.

dijete
9/9/09, 11:05 PM
#32

#30 Man lär sig inget om man inte testar, Testa!

Mari
9/10/09, 12:45 PM
#33

#30 Det spelar ingen roll om de färgerna du inte använder är kvar, det märks inte något alls om du tar bort dem i snabbhetsfrågan då det är så pass litet.

Är det färgen du vill byta så länkar du bara om bilderna (de med pilarna osv) och kodar in den nya färgen. Fungerade felfritt för mig.

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

ElinSvensson
9/14/09, 2:27 PM
#34

Haha, jag fattar verkligen ingenting!
Så aja, jag ger upp Flört

Annons:
PaulineH
11/18/09, 3:04 PM
#35

Nu är jag mer eller mindre en idiot vad gäller datorer - bara en varning!;) Ser det som ett smärre mirakel att jag överhuvudtaget fått upp den halvtaskiga hemsida jag har.

Hur som haver så har jag laddat ner lytebox-filen, men den ligger bara i en zippad photoshopfil som jag varken kan öppna via internet eller via photoshop. Inte heller verkar jag kunna ladda upp via webhotellet. Nån som kanske har någon liten aning om vad jag borde göra med den…?

Mari
11/18/09, 5:02 PM
#36

Är det verkligen en photoshopfil??? Är det inte en .rar eller .zip? Isåfall behöver du ett sånt program på din dator så du kan öppna den och komma åt alla filerna däri

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

PaulineH
11/20/09, 6:20 PM
#37

# 36 Den står som zip-fil, dock med ps-logga. Försöker du öppna den är det bara möjligt i photoshop, då det inte går att välja andra alternativ. Har gått igenom den ganska grundligt men kommer liksom inte runt problemet. Det var väl å andra sidan över två år sedan jag öppnade zip-filer sist, men jag vill minnas att det inte såg ut såhär i alla fall?

… men å andra sidan så är jag som sagt lätt inkompetent när det kommer till allt som inte har med bildredigering att göra när det gäller datorer!;)

Mari
11/25/09, 12:59 AM
#38

#37 Det är säkert något krux att datorn är inställd på att sånna filer ska öppnas med Ps fast det inte fungerar :) Du har inte testat att högerklicka - öppna som? Eller vad det heter, man brukar få upp en lista på tänkbara program då

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

PaulineH
12/11/09, 8:10 PM
#39

38# Jo, du har nog rätt i att det är nått skit eller att det finns nån inställning som gör det. …:/

I Öppna Som alternativet går också bara att välja internet eller photoshop, samma sak om man går in på egenskaper hos filen och försöker välja därifrån.

hehe, dock har jag precis lejat bort jobbet till en bekant som får göra det (samt ny, snygg layout) mot betalning, så det verkar som jag slipper ta itu med problemet!XD Lite lat-variant kanske, men känner inte att jag orkar gå igenom hela datorskrället för at leta problem. Dessutom räcker nog inte kunskapen till det heller skulle jag tro.:P

Tackar och bockar ändå för svaren!

[Ebfotograf]
2/28/10, 8:18 PM
#40

Jag har lytebox på min hemsida men själva lyteboxen funkar bara på "urhemsidan" och inte www.ebfotografi.webb.se

Vad kan det vara för fel ?

Gummimonster
3/23/10, 10:18 PM
#41

Jag gillar både Lightbox och Lytebox (de är ju nästan samma sak..), men tror ni att det går att få in det i t ex Blogspot?

Annons:
Mari
3/23/10, 10:19 PM
#42

#41 Det ska men fungerar inte felfritt tyvärr. Jag testade att ha det förra året men fick aldrig det att fungera till 100% om du googlar på lytebox + blogspot så har jag för mig att man hittar några halvdanna guider att följa på engelska

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

Gummimonster
3/23/10, 10:33 PM
#43

#42 Det har jag, och de förklarar inte riktigt det viktigaste, vad man ska göra när man väl har alla koder och blablabla. Ush. Jag vill väldigt gärna kunna använda det, det verkar ju vara ett bra program, men pappa får väl hjälpa mig senare.

Mari
3/23/10, 11:13 PM
#44

#43 jag fick till det genom att länka till själva programmet från min hemsida, skriva in de viktiga koderna i headern på alla bloggsidorna och sedan även växla över till html när man la upp bilder för att där skriva in i bildkoden själva lyteboxkodningen.

Har för mig att det var så jag gjorde, jag krånglade väldigt med det men fick tillslut till det men då ville inte bilderna öppna sig normalt utan antligen blev det jättestora bilder/rutor med en liten bild innuti eller så blev det en väldit liten bild/ruta med scrollar

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

martinaahh
7/30/10, 10:20 PM
#45

Tänkte höra med er här inne vad det kan vara för fel när "prev, next, loading" och dom bilderna inte funkar när allt annat gör det och när jag laddat upp dem på hemsidan? Vet inte alls vad det är för fel :/

Juicy
7/30/10, 10:26 PM
#46

#45 Kolla så att de ligger i rätt mapp och har rätt sökväg.

ronjanyman.se
Instagram: Ronnybonny

[Ebfotograf]
7/30/10, 10:33 PM
#47

Det funkar inte för mig på min andra hemsida där har jag webs.com och webb.se har fått det att funka förut, men har glömt av hur man gör.

Hur gör man?

martinaahh
7/30/10, 10:58 PM
#48

Okej, hur menar du då? :)  jag har laddat upp lytebox.css & lytebox.js dom ligger bland alla andra "sidor" dvs. index.htm, galleri.htm osv. Sedan gjorde jag en mapp där jag lade in alla bilderna.

Annons:
Juicy
7/30/10, 11:11 PM
#49

#48 Bilderna måste finnas där koderna säger att de finns. Heter en bild next.jpg och ligger i mappen images kan du inte hänvisa den till bilder/next.jpg.

ronjanyman.se
Instagram: Ronnybonny

martinaahh
7/30/10, 11:28 PM
#50

#49 jaha, tack så jättemycket! :) Jag hade döpt mappen till image, och inte images som det skulle vara. Nu funkar det!

Upp till toppen
Annons: