05. Webbdesignskolan

Webbdesignskolan: Lytebox

2009-02-01 17:03 #0 av: Anna

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

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!

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

annaattlid.se

Anmäl
2009-02-01 17:06 #1 av: IdaL

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

Anmäl
2009-02-01 17:06 #2 av: evisj

ska absolut prova genast! :)

Anmäl
2009-02-01 17:09 #3 av: Marija

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

Anmäl
2009-02-01 17:11 #4 av: Anna

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

Anmäl
2009-02-01 17:13 #5 av: Adrina

Jätte bra!

Anmäl
2009-02-01 17:53 #6 av: NettanLindholm

jättebra skrivet !

Anmäl
2009-02-01 18:46 #7 av: neonrosa

Mycket bra!

Anmäl
2009-02-01 19:53 #8 av: evisj

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?

Anmäl
2009-02-07 12:29 #9 av: IdaL

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

Anmäl
2009-03-06 11:13 #10 av: Mari

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

Anmäl
2009-03-06 11:43 #11 av: Zartha

Tack!....Mycket braGlad 

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

Anmäl
2009-03-06 16:02 #12 av: Anna

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

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

annaattlid.se

Anmäl
2009-03-08 21:29 #13 av: Fiaa2

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

Anmäl
2009-04-08 18:11 #14 av: Jojaton

#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
@bellasantorino på Instagram

Anmäl
2009-04-08 20:21 #15 av: Anna

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

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

annaattlid.se

Anmäl
2009-04-08 22:15 #16 av: Jojaton

#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
@bellasantorino på Instagram

Anmäl
2009-04-11 20:29 #17 av: Jojaton

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
@bellasantorino på Instagram

Anmäl
2009-04-12 18:27 #18 av: dijete

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

Anmäl
2009-04-12 19:09 #19 av: [Zoie]

å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

Anmäl
2009-04-12 19:26 #20 av: LnKarlsson

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.. :/

Anmäl
2009-04-19 18:16 #21 av: IdaL

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

Anmäl
2009-05-16 15:06 #22 av: Anna

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:

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

Ber om ursäkt för detta!

 

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

annaattlid.se

Anmäl
2009-05-20 19:51 #23 av: Jojaton

#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
@bellasantorino på Instagram

Anmäl
2009-05-20 19:52 #24 av: Anna

#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

Anmäl
2009-05-20 19:53 #25 av: Jojaton

#24 Ska titta efter då :)

Johanna
@bellasantorino på Instagram

Anmäl
2009-09-06 00:04 #26 av: IdaT

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 "<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
" 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.

Anmäl
2009-09-06 00:09 #27 av: dijete

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

Anmäl
2009-09-06 00:19 #28 av: IdaT

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

Anmäl
2009-09-06 00:21 #29 av: Anna

#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

Anmäl
2009-09-06 00:31 #30 av: IdaT

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

Anmäl
2009-09-09 22:22 #31 av: IdaT

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.

Anmäl
2009-09-09 23:05 #32 av: dijete

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

Anmäl
2009-09-10 12:45 #33 av: Mari

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

Anmäl
2009-09-14 14:27 #34 av: ElinSvensson

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

Anmäl
2009-11-18 15:04 #35 av: PaulineH

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

 

Anmäl
2009-11-18 17:02 #36 av: Mari

Ä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

Anmäl
2009-11-20 18:20 #37 av: PaulineH

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

Anmäl
2009-11-25 00:59 #38 av: Mari

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

Anmäl
2009-12-11 20:10 #39 av: PaulineH

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!

Anmäl
2010-02-28 20:18 #40 av: [Ebfotograf]

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 ?

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

Anmäl
2010-03-23 22:18 #41 av: Gummimonster

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?

Anmäl
2010-03-23 22:19 #42 av: Mari

#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

Anmäl
2010-03-23 22:33 #43 av: Gummimonster

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

Anmäl
2010-03-23 23:13 #44 av: Mari

#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

Anmäl
2010-07-30 22:20 #45 av: martinaahh

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

Anmäl
2010-07-30 22:26 #46 av: Juicy

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

Anmäl
2010-07-30 22:33 #47 av: [Ebfotograf]

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?

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

Anmäl
2010-07-30 22:58 #48 av: martinaahh

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.

Anmäl
2010-07-30 23:11 #49 av: Juicy

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

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.