---

Hoppa över menyn, gå direkt till innehållet

---

• Start.
• Om oss.
• Vad vi gör.
• Projekt.
• Blogg.
• Kontakt.

Highslide för bildvisning

Det finns en uppsjö av JavaScript-bibliotek för bildvisning. Varav ett av de mest använda kanske är Lightbox JS. Problemet med Lightbox är att det inte riktigt passar så bra för bilder som har en anknytande text runt om kring sig, som i en artikel eller en blogg. När man läser en artikel och samtidigt vill titta på större versioner av tillhörande, förklarande bilder vill man gärna kunna fortsätta läsa texten samtidigt som man har den stora bilden uppe. Något som inte funkar med Lightbox, eftersom den lägger ett halvtransparent lager över hela sidan och visar bilden ovan på det.

När vi letade efter JavaScript för bilderna till denna blogg ville vi ha just ett sådant. Ett där man kan öppna bilden i större version, men samtidigt flytta bilden för att kunna fortsätta läsa texten. Highslide, som vi hittade, fixar precis just det. Och en hel del annat. Testa på exempelbilderna nedan.

Det positiva med Highslide

Det jag främst gillar med Highslide är att (1) det är möjligt att flytta runt bilderna som man tittar på och (2) det är möjligt att öppna en mängd bilder samtidigt, vilket betyder att man kan öppna flera, lägga dem bredvid varandra och jämföra.

Highslide erbjuder också en hel del andra sköna funktioner som tangentbordsnavigering (öppna en bild och navigera sedan mellan bilderna med piltangenterna och stäng med ESC-knappen), preloading av bilder, och inte minst en snygg zoom-effekt vid öppning och stängning. Highslide är också smart nog att inte direkt öppna bilderna i en storlek som överskrider användarens aktuella storlek på webbläsarfönstret. Självklart är det också diskret nog att även de utan JavaScript-stöd kan se de större versionerna av bilderna.

Det inte så positiva med Highslide

Det är svårt att hitta färdiga skript som är som klippt och skurna efter ens behov. Så givetvis finns det även saker vi inte gillar med Highslide. Det var främst tre saker som inte passade våra önskemål för bilderna på denna blogg.

Det första är att Highslide kräver lite JavaScript i din HTML. Även om det bara handlar om en liten »onclick« för varje bild, vill vi ändå undvika det.

Det andra är att det krävs lite extra HTML för eventuella bildtexter man vill ha (en <div>). Tanken med Highslide är att man ska kunna ha vilken HTML-kod som helst i bildtexten, vilket är bra om man till exempel vill ha länkar eller formaterad bildtext. För oss räcker det med vanlig text rakt upp och ner och därför hade vi mycket hellre sett att bildtexten hämtades från bildens title- eller alt-attribut.

Det tredje och sista är storleken på Highslide — 45 kB bara för att visa stora versioner av bilderna är lite väl mycket. Säkert både för vår server och våra stackars läsare …

Hur vi fixade Highslide

För att vi skulle bli nöjda fick vi helt enkelt gräva ner oss i Highslides kod och göra några små modifikationer. Så här gjorde vi (du får gärna implementera dem själv om du gillar dem):

Bort med onclick — Istället för att förlita oss på att ha en »onclick« för varje bild la vi till en funktion som körs när sidan laddats klart:

var oldonload = window.onload;
window.onload = function() {
	if (typeof window.onload == 'function') {
		oldonload();
	}
	highslidealiceImages(document, "a", "highslide");
	hs.preloadImages(5);
}

Det den gör är att bara anropa funktionen highslidealiceImages när sidan laddats. highslidealiceImages är en aningen omskriven och anpassad version av Robert Nymans utmärkta getElementsByClassName som ser till att alla bilder med klassen »highslide« initieras och blir klickbara. Funktionen ser ut så här:

function highslidealiceImages(oElm, strTagName, strClassName) {
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oElement.className.indexOf(strClassName) >= 0){
			oElement.onclick = function() { return hs.expand(this); }
		}
	}
}

Title som bildtext — För att kunna få bildens eventuella title-attribut som bildtext lade vi till denna snutt i Highslides HsExpander.prototype.onLoad-funktion:

if(this.thumb.getAttribute('title') != null && this.thumb.getAttribute('title').length > 0) {
        var hcDiv = document.createElement('div');
	hcDiv.setAttribute('class', 'highslide-caption');
	hcDiv.setAttribute('className', 'highslide-caption');
	hcDiv.appendChild(document.createTextNode(this.thumb.getAttribute('title')));
        this.caption =  hcDiv; 
} else {
	this.caption = null;
}

Minska storleken — Om du är nöjd med Highslide som det är finns en komprimerad version som inte är lika stor. Vill du som oss göra modifikationer kan du själv komprimera det med till exempel Dean Edwards JavaScript komprimerare. Det ger en filstorlek på ungefär 20 kB, vilket var okej för oss. Men helst skulle jag vilja ha ner det till runt 10 kB, vilket säkerligen inte är en omöjlighet i vårt fall. Det finns en hel del av Highslides kod som vi inte använder. Jag har bara inte orkat brottas mer med koden. Ännu.