Header Ads

Visa stora bilder på bloggen


Har du ibland känt att du har en fantastisk bild som du vill
visa på din blogg?
Men att den begränsas av bloggens inställningar?
Här är ett sätt att kringgå detta - bilden kan i princip vara
hur stor som helst - och läsaren kan bara genom att scrolla på bilden, själv bestämma hur bilden skall visas. 

Gå till Layout - Lägg till en gadget - välj HTML/JavaScript.
Döp gadgeten t.ex. till "Scrolla på bilden", så att läsaren förstår att det finns valmäjligheter. Klistra in följande:

<img id="slideshow" src="http://i45.tinypic.com/21bkrxu.jpg" />

<script type="text/javascript">
var myimages=[
"http://i45.tinypic.com/21bkrxu.jpg",
"http://i50.tinypic.com/2yl8x7k.jpg",
"http://i50.tinypic.com/330bfxu.jpg",
"http://fotos.fotoflexer.com/73571e2f08971ab2862da84436fda853.jpg",
"http://i48.tinypic.com/34xjfgj.jpg"
]
var slideshow=document.getElementById("slideshow")
var nextslideindex=0
function rotateimage(e){
var evt=window.event || e
var delta=evt.detail? evt.detail*(-120) : evt.wheelDelta
nextslideindex=(delta<=-120)? nextslideindex+1 : nextslideindex-1
nextslideindex=(nextslideindex<0)? myimages.length-1 : (nextslideindex>myimages.length-1)? 0 : nextslideindex
slideshow.src=myimages[nextslideindex]
if (evt.preventDefault)
evt.preventDefault()
else
return false
}
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"

if (slideshow.attachEvent)
slideshow.attachEvent("on"+mousewheelevt, rotateimage)
else if (slideshow.addEventListener)
slideshow.addEventListener(mousewheelevt, rotateimage, false)
</script>

Bilden som finns på den första raden i koden måste vara samma som den första bland de scrollbara bilderna - de är här markerade med blått.
Det rödmarkerade är de andra bilder som du vill visa här.
Du byter förståss ut de i exemplet visade bilderna mot dina egna.

Bilderna laddar du först upp på t.ex. TinyPic eller FotoFlexer.

En finess med detta är att bilderna som du lägger här, inte hamnar i Picasa, och således
inte belastar ditt konto.
Om du bara vill visa bilderna i enstaka inlägg, så lägger du dem inte i en gadget.
Istället skriver du ditt inlägg som vanligt, sedan växlar du till HTML-läget, och lägger koden där.
Därefter återgår du till Skriv-läget och fortsätter skriva.


För närvarande kan du lägga in max fem bilder på detta sättet, men du kan ju lägga in
koden flera gånger, och därmed få plats för ytterligare bilder.

Lycka till!






Ett inlägg av Rolf,. 

Rolf driver bloggen Näsetvandrarna som är en informationsblogg
för vandringssugna personer i och runt Vellinge kommun i Skåne.
Starten av bloggen väckte Rolfs intresse för att själv kunna påverka
sin sajt och han lär sig hela tiden nytt inom html och css.



No comments

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------