Fotoalbum online : JavaScript och inte JavaScript
Förord
I denna artikel skapar vi ett mycket lättanvänt och användarvänligt JavaScript för bildvisning - för användning i t.ex. ett fotoalbum online. Scriptet laddar in bildens storlek och öppnar ett fönster som bilden passar i. Vi tar också upp det vanliga misstaget att man tar för givet att JavaScript finns i webbläsaren. Scriptet vi skapar fungerar så att man inte behöver ha JavaScript aktiverat för att se bilden.Många har ett behov, eller helt enkelt en önskan, att ha ett fotoalbum på sin hemsida. Dessa fotoalbum varierar oerhört i både kvalitet och funktionalitet – och flera lämnar mycket att önska. Ett vanligt ”fel” som jag upptäcker - inte bara i fotoalbum – är att sidan blir oanvändbar om man inte har JavaScript aktiverat.
Detta kan man på ett ögonblick fixa – och alltså lika snabbt få en mer användarvänlig webbsida. Det är dock många som förbiser detta.
"Onda" är kanske en överdrift, men när man inte har JavaScript aktiverat och länkar till javascript:void(0) dyker upp så blir man lätt irriterad och (om man är som jag) lämnar sidan åt sitt öde.
När man ska visa bilderna i ett nytt fönster får ofta folk för sig att skriva t.ex.
eller
Båda dessa exempel är dåliga, i användarsynpunkt. Om man inte har JavaScript aktiverat i sin webbläsare kommer man aldrig att få se bilderna när man klickar på länken. Vi kommer att göra en lösning där man bara behöver skriva så här:
Med denna enkla lilla kod åstadkommer vi två saker:
1. Även om man inte har JavaScript aktiverat så kommer man att få se bilden.
2. Om JavaScript är aktiverat, så kommer bilden att laddas in i ett nytt fönster – vars storlek är anpassad till bilden.
Om man inser detta och kan JavaScript så ska det inte vara några större svårigheter att skapa ett eget script för att visa bilderna.
Men vi ska skapa ett script tillsammans nu - det är punkt nummer 2, och funktionen ShowImage, vi ska börja med nu!
Detta script innehåller två funktioner: ShowImage och bildPreload_OnLoad. Vi börjar med ShowImage – som är funktionen vi anropar i onclick-eventet i a-elementet. I följande kod hittar du små kommentarer vid vissa linjer – t.ex. //{1.1} – det är för att du ska veta vilken linje i koden jag syftar till när jag senare förklarar den. Så här ser funktionen ut:
Funktionen börjar med att vi stoppar en timer om den är igång (1.1). När vi laddar in bilden i minnet för att hämta dess dimentioner så behöver vi denna timer, och om den redan är igång så måste vi alltså avbryta den först.
Innan bilden laddas in i minnet så ändras muspekaren för a-elementet till ett timglas (se 1.4). På linje 1.2 kontrollerar vi om vi har klickat på en länk tidigare, och återställer muspekaren till ’auto’ om så behövs. Variabeln siInfo innehåller information om länken och bilden vi visade senast (om någon).
På linje 1.3 sparar vi aktuell bilds information i en vektor (Array) med namnet bildInfo. Anledningen till att det är en vektor är att det ger utrymme för att lägga till ytterligare information om man vill utöka scriptet.
När man klickar en länk så laddas bilden först in i minnet – den blir "cachad". Detta för att vi med JavaScript ska kunna ta reda på hur bred och hög bilden är. Beroende på hur snabb uppkoppling man har kan detta ta lite tid. Därför ändrar vi muspekaren till ett timglas på linje 1.4. Denna kommer senare att återställas till ’auto’ – som alltså innebär att webbläsaren själv bestämmer vilken muspekare som visas (på länkar brukar det ju vara en hand).
Linje 1.5 är en liten specialare. Här startar vi en timer som anropar funktionen bildPreload_OnLoad. I den funktionen kollar vi om bilden är inladdad eller inte, och agerar därefter. När jag använde bildPreload.onload så fungerade inte scriptet i webbläsaren Opera 7., och därför var jag tvungen att använda en timer istället.
På linje 1.6 laddar vi in bilden i minnet.
På linje 1.7 returnerar vi false. Om vi skulle returnera true istället, så skulle länken vi klickat på följas. Då skulle vi alltså få se bilden i det aktuella fönstret, och inte i en popup.
Den här funktionen anropas alltså via en timer (se 1.5). Det är här vi kontrollerar om bilden är inladdad i minnet - och sedan visar bilden om den är det. Här är koden för funktionen:
På linjen 2.1 kontrollerar vi om bilden är inladdad med hjälp av egenskapen "complete". Om den är inladdad så avbryter vi timern (2.2), annars hoppar vi ut ur funktionen (2.3) och låter timern anropa funktionen igen tills bilden är inladdad.
När bilden är inladdad och vektorn bildInfo existerar kommer vi till rad 2.5. Där kopierar vi bildInfo till en lokal variabel (aktuellBild) och sätter bildInfo till null så att vi har det ur världen. På rad 2.7 kontrollerar vi om bilden variabeln verkligen innehåller information om just den länk vi klickade på.
På rad 2.8 och 2.9 lägger vi in bildens storlek i variablerna fonstrets_bredd och fonstrets_hojd samt lägger till en liten marginal.
På rad 2.10 öppnar vi fönstret med namnet "_blank", så att det blir nya fönster för alla bilder vi klickar på.
På rad 2.11 ändrar vi a-elementets muspekare till 'auto' igen. Om timern avbryts innan den hinner hit så återställs muspekare på rad 1.2.
Nu är det i princip klart! Men en liten sak är kvar: Variablerna timerObjekt (timern), bildPreload (bilden) och bildInfo (vektorn med information) måste vara globala - och alltså definieras utanför alla funktioner. För enkelhetens skulle följer här scriptet i sin helhet med kommentarer i klartext.
Om du inte jobbat med JavaScript så mycket tidigare så vill jag till slut snabbt berätta hur du använder detta. Starta anteckningar (notepad) och kopiera in scriptkoden här ovanför. Spara filen som "showimage.js" och spara i en mapp.
Skapa ny en till textfil i samma mapp och döp den till "showimage.html". Skriv följande:
Spara och öppna filen i din webbläsare. Klicka på länkarna så ska bilderna visas i nya fönster med rätt storlek - om du gjort allt rätt vill säga. Du kan givetvis byta ut texten i a-elementen mot bilder, om du vill att man ska klicka på en liten bild för att få se en större.
Scriptet är testat och fungerar i Opera 7, Mozilla Firefox 1.0 Preview Release samt Internet Explorer version 4, 5, 5.5 och 6
Detta kan man på ett ögonblick fixa – och alltså lika snabbt få en mer användarvänlig webbsida. Det är dock många som förbiser detta.
Den onda länken till void(0)
"Onda" är kanske en överdrift, men när man inte har JavaScript aktiverat och länkar till javascript:void(0) dyker upp så blir man lätt irriterad och (om man är som jag) lämnar sidan åt sitt öde.När man ska visa bilderna i ett nytt fönster får ofta folk för sig att skriva t.ex.
Bildeneller
Bilden){kind=link}
Båda dessa exempel är dåliga, i användarsynpunkt. Om man inte har JavaScript aktiverat i sin webbläsare kommer man aldrig att få se bilderna när man klickar på länken. Vi kommer att göra en lösning där man bara behöver skriva så här:
Bilden
Med denna enkla lilla kod åstadkommer vi två saker:
1. Även om man inte har JavaScript aktiverat så kommer man att få se bilden.
2. Om JavaScript är aktiverat, så kommer bilden att laddas in i ett nytt fönster – vars storlek är anpassad till bilden.
Om man inser detta och kan JavaScript så ska det inte vara några större svårigheter att skapa ett eget script för att visa bilderna.
Men vi ska skapa ett script tillsammans nu - det är punkt nummer 2, och funktionen ShowImage, vi ska börja med nu!
Funktionen ShowImage
Detta script innehåller två funktioner: ShowImage och bildPreload_OnLoad. Vi börjar med ShowImage – som är funktionen vi anropar i onclick-eventet i a-elementet. I följande kod hittar du små kommentarer vid vissa linjer – t.ex. //{1.1} – det är för att du ska veta vilken linje i koden jag syftar till när jag senare förklarar den. Så här ser funktionen ut:
function ShowImage(src)
{
if(timerObjekt) clearInterval(timerObjekt); //{1.1}
if(bildInfo && bildInfo.length>=1 && src!=bildInfo[0]) { // {1.2}
bildInfo[0].style.cursor = 'auto';
}
bildInfo = new Array(src); // {1.3}
if(src&&src.style&&src.style.cursor) {
src.style.cursor = 'wait'; // {1.4}
}
timerObjekt = setInterval('bildPreload_OnLoad()', 100); // {1.5}
bildPreload.src = src; // {1.6}
return false; // {1.7}
}
Funktionen börjar med att vi stoppar en timer om den är igång (1.1). När vi laddar in bilden i minnet för att hämta dess dimentioner så behöver vi denna timer, och om den redan är igång så måste vi alltså avbryta den först.
Innan bilden laddas in i minnet så ändras muspekaren för a-elementet till ett timglas (se 1.4). På linje 1.2 kontrollerar vi om vi har klickat på en länk tidigare, och återställer muspekaren till ’auto’ om så behövs. Variabeln siInfo innehåller information om länken och bilden vi visade senast (om någon).
På linje 1.3 sparar vi aktuell bilds information i en vektor (Array) med namnet bildInfo. Anledningen till att det är en vektor är att det ger utrymme för att lägga till ytterligare information om man vill utöka scriptet.
När man klickar en länk så laddas bilden först in i minnet – den blir "cachad". Detta för att vi med JavaScript ska kunna ta reda på hur bred och hög bilden är. Beroende på hur snabb uppkoppling man har kan detta ta lite tid. Därför ändrar vi muspekaren till ett timglas på linje 1.4. Denna kommer senare att återställas till ’auto’ – som alltså innebär att webbläsaren själv bestämmer vilken muspekare som visas (på länkar brukar det ju vara en hand).
Linje 1.5 är en liten specialare. Här startar vi en timer som anropar funktionen bildPreload_OnLoad. I den funktionen kollar vi om bilden är inladdad eller inte, och agerar därefter. När jag använde bildPreload.onload så fungerade inte scriptet i webbläsaren Opera 7., och därför var jag tvungen att använda en timer istället.
På linje 1.6 laddar vi in bilden i minnet.
På linje 1.7 returnerar vi false. Om vi skulle returnera true istället, så skulle länken vi klickat på följas. Då skulle vi alltså få se bilden i det aktuella fönstret, och inte i en popup.
Funktionen bildPreload_OnLoad
Den här funktionen anropas alltså via en timer (se 1.5). Det är här vi kontrollerar om bilden är inladdad i minnet - och sedan visar bilden om den är det. Här är koden för funktionen:
function bildPreload_OnLoad() {
if( bildPreload.complete ) { // {2.1}
clearInterval(timerObjekt); // {2.2}
} else {
return; // {2.3}
}
if(bildInfo) { // {2.4}
var aktuellBild = bildInfo; // {2.5}
bildInfo = null; // {2.6}
if(aktuellBild[0]==bildPreload.src) { // {2.7}
fonstrets_bredd = bildPreload.width + 22; // {2.8)
fonstrets_hojd = bildPreload.height + 22; // {2.9}
var w = window.open(aktuellBild[0],null _blank',null width=' + fonstrets_bredd + ', height=' + fonstrets_hojd); //{2.10}
if(aktuellBild[0].style && aktuellBild[0].style.cursor) { //{2.11}
aktuellBild[0].style.cursor = 'auto';
}
}
}
}På linjen 2.1 kontrollerar vi om bilden är inladdad med hjälp av egenskapen "complete". Om den är inladdad så avbryter vi timern (2.2), annars hoppar vi ut ur funktionen (2.3) och låter timern anropa funktionen igen tills bilden är inladdad.
När bilden är inladdad och vektorn bildInfo existerar kommer vi till rad 2.5. Där kopierar vi bildInfo till en lokal variabel (aktuellBild) och sätter bildInfo till null så att vi har det ur världen. På rad 2.7 kontrollerar vi om bilden variabeln verkligen innehåller information om just den länk vi klickade på.
På rad 2.8 och 2.9 lägger vi in bildens storlek i variablerna fonstrets_bredd och fonstrets_hojd samt lägger till en liten marginal.
På rad 2.10 öppnar vi fönstret med namnet "_blank", så att det blir nya fönster för alla bilder vi klickar på.
På rad 2.11 ändrar vi a-elementets muspekare till 'auto' igen. Om timern avbryts innan den hinner hit så återställs muspekare på rad 1.2.
Hela koden!
Nu är det i princip klart! Men en liten sak är kvar: Variablerna timerObjekt (timern), bildPreload (bilden) och bildInfo (vektorn med information) måste vara globala - och alltså definieras utanför alla funktioner. För enkelhetens skulle följer här scriptet i sin helhet med kommentarer i klartext.
<script type="text/javascript">
var bildPreload = new Image();
var bildInfo = new Array();
var timerObjekt;
// Funktionen som anropas från länken
function ShowImage(src)
{
if(timerObjekt) clearInterval(timerObjekt); // Stoppar ev. timer
if(bildInfo && bildInfo.length>=1 && src!=bildInfo[0]) { // Återställer muspekare
bildInfo[0].style.cursor = 'auto';
}
bildInfo = new Array(src ); // Sparar bildens info i en vektor
if(src&&src.style&&src.style.cursor) {
src.style.cursor = 'wait'; // Ändrar muspekare till timglas
}
timerObjekt = setInterval('bildPreload_OnLoad()', 100); // Startar timer
bildPreload.src = src; // Laddar in bilden
return false;
}
// Funktionen som kollar om bilden är inladdad
function bildPreload_OnLoad() {
if( bildPreload.complete ) { // Är bilden inladdad?
clearInterval(timerObjekt); // Ja. Stoppa timer
} else {
return; // Nej, lämna funktionen
}
if(bildInfo) { // Finns info om bilden?
var aktuellBild = bildInfo; // Kopiera bildinfo till lokal variabel
bildInfo = null; // Töm variabeln bildInfo
if(aktuellBild[0]==bildPreload.src) { // Är det samma bild vi klickade på?
fonstrets_bredd = bildPreload.width + 22; // Sätt fönstrets bredd
fonstrets_hojd = bildPreload.height + 22; // Sätt fönstrets höjd
var w = window.open(aktuellBild[0], "_blank", "width=" + fonstrets_bredd + ", height=" + fonstrets_hojd); //{2.10}
if(aktuellBild[0].style && aktuellBild[0].style.cursor) { // Återställ muspekare
aktuellBild[0].style.cursor = 'auto';
}
}
}
}
</script>
För att testa
Om du inte jobbat med JavaScript så mycket tidigare så vill jag till slut snabbt berätta hur du använder detta. Starta anteckningar (notepad) och kopiera in scriptkoden här ovanför. Spara filen som "showimage.js" och spara i en mapp.Skapa ny en till textfil i samma mapp och döp den till "showimage.html". Skriv följande:
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
ShowImage exempel
<script type="text/javascript" src="showimage.js"></script>
Visa en bild från PelleSoft:
onclick="return ShowImage(this)">Gubbe.
Visa en annan bild från PelleSoft:
onclick="return ShowImage(this)">SyntaxBox.
Spara och öppna filen i din webbläsare. Klicka på länkarna så ska bilderna visas i nya fönster med rätt storlek - om du gjort allt rätt vill säga. Du kan givetvis byta ut texten i a-elementen mot bilder, om du vill att man ska klicka på en liten bild för att få se en större.
Simon Dahlbacka
av nån anledning tyckte jag att den var tungläst, kan tyvärr inte sätta fingret på varför. Javascript koden går också att göra betydligt mera lättläst genom att använda beskrivande variabelnamn, inte försöka krama in allting på så lite utrymme som möjligt, och inte heller lämna bort "onödiga" klamrar i samband med t.ex. if satser.
Fredrik Edström
Tycker att artikeln håller sig till ämnet bra. Inga onödiga utsvävningar om ditt o datt. Visserligen kan det bli lite tunggrott, men det är väl alla artiklar om JavaScript :-) Jag ger den en 4:a eftersom alla kan skapa ett fotoalbum med hjälp av artikeln och på såvis impa på mormor eller flick/pojkvännen.