N o v a l a s -

Bloggdesign - Bildspel i menyn eller headern

Fick ju en fråga i min frågestund innan om jag kunde visa hur man gjorde ett bildspel i menyn t.ex. So here you go!

1. Kopiera denna koden här nedan och lägg in den under </head> i dina kodmallar (framsida, inläggsida, kategorisida och arkivsida).

<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers

// that support it.

// Script copyright (C) 2004-2011 www.cryer.co.uk.

// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;

function SetOpacity(object,opacityPct)

{

// IE.

object.style.filter = 'alpha(opacity=' + opacityPct + ')';

// Old mozilla and firefox

object.style.MozOpacity = opacityPct/100;

// Everything else.

object.style.opacity = opacityPct/100;

}

function ChangeOpacity(id,msDuration,msStart,fromO,toO)

{

var element=document.getElementById(id);

var msNow = (new Date()).getTime();

var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;

if (opacity>=100)

{

SetOpacity(element,100);

element.timer = undefined;

}

else if (opacity<=0)

{

SetOpacity(element,0);

element.timer = undefined;

}

else

{

SetOpacity(element,opacity);

element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);

}

}

function FadeInImage(foregroundID,newImage,backgroundID)

{

var foreground=document.getElementById(foregroundID);

if (foreground.timer) window.clearTimeout(foreground.timer);

if (backgroundID)

{

var background=document.getElementById(backgroundID);

if (background)

{

if (background.src)

{

foreground.src = background.src;

SetOpacity(foreground,100);

}

background.src = newImage;

background.style.backgroundImage = 'url(' + newImage + ')';

background.style.backgroundRepeat = 'no-repeat';

var startMS = (new Date()).getTime();

foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);

}

} else {

foreground.src = newImage;

}

}

var slideCache = new Array();

function RunSlideShow(pictureID,backgroundID,imageFiles,displaySecs)

{

var imageSeparator = imageFiles.indexOf(";");

var nextImage = imageFiles.substring(0,imageSeparator);

if (slideCache[nextImage] && slideCache[nextImage].loaded)

{

FadeInImage(pictureID,nextImage,backgroundID);

var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.length)

+ ';' + nextImage;

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+futureImages+"',"+displaySecs+")",

displaySecs*1000);

// Identify the next image to cache.

imageSeparator = futureImages.indexOf(";");

nextImage = futureImages.substring(0,imageSeparator);

} else {

setTimeout("RunSlideShow('"+pictureID+"','"+backgroundID+"','"+imageFiles+"',"+displaySecs+")",

250);

}

// Cache the next image to improve performance.

if (slideCache[nextImage] == null)

{

slideCache[nextImage] = new Image;

slideCache[nextImage].loaded = false;

slideCache[nextImage].onload = function(){this.loaded=true};

slideCache[nextImage].src = nextImage;

}

}

</script><head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="fadeslideshow.js">

/***********************************************

* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

***********************************************/

<script>var slide1foldername='';</script><script charset="utf-8" src="slide1.js"></script>

</script>

<script>

var mygallery=new fadeSlideShow({

wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "ondemand",

togglerid: ""

})

var mygallery2=new fadeSlideShow({

wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow

dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image

imagearray: [

["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],

["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],

["http://i30.tinypic.com/531q3n.jpg"],

["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!

],

displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},

persist: false, //remember last viewed slide and recall within same session?

fadeduration: 500, //transition duration (milliseconds)

descreveal: "always",

togglerid: "fadeshow2toggler"

})

</script>

2. Sen ska du lägga in koden för själva bildspelet och den lägger du in i dina kodmallar någonstans, beroende på vart du vill ha bildspelet.

Headern: Lägg koden under <div id="wrapper">
Menyn: Lägg koden under <div id="side">

Koden:

<div id="EmilyPictureBackground"> <img alt="slide show" src="ADRESSEN TILL FÖRSTA BILDEN" mce_src="/1032356/entries/article/new/ADRESSEN TILL FÖRSTA BILDEN" width="BREDDEN PÅ BILDERNA" height="HÖJDEN PÅ BILDERNA" id="EmilyPicture"> </div>

<script type="text/javascript">

RunSlideShow("EmilyPicture","EmilyPictureBackground",

"ADRESSEN TILL FÖRSTA IGEN;ADRESSEN TILL ANDRA BILDEN;ADRESSEN TILL TREDJE BILDEN;ADRESSEN TILL SISTA BILDEN",5);

</script>

<script type="text/javascript">

RunSlideShow("EmilyPicture","EmilyPictureBackground",

"ADRESSEN TILL FÖRSTA IGEN;ADRESSEN TILL ANDRA BILDEN;ADRESSEN TILL TREDJE BILDEN;ADRESSEN TILL SISTA BILDEN",5);

</script>

3. Nu ska du ladda upp bilderna du vill ha med i bildspelet på din blogg. Kopiera sedan bildadresserna (URL koderna) och lägg in den första bildadressen på tre ställen och sen resten av bilderna (allt står i koden).

Det går att lägga till fler bilder och ta bort, men efter varje adress ska det vara ett ; förutom efter den sista då det ska vara ",5); ja, ni ser i koden! Glöm inte att ändra höjden och bredden på bilderna också!

4. Om headern sitter fel kan du lägga in denna koden:

<div style="position:absolute; width:903px; x-index:0; left: 0px; top:0px;">KODEN HÄR</div>

Ändra width, left och top så att headern passar och lägg in bildspelskoden du kopierade innan där det står "KODEN HÄR"

Om det är något du undrar över så fråga!♥

2012-01-21 @ 19:08:44 Tips Permalink

Postat av: Mathilda

I vilket fotoprogram gör du dina collage i? ;)

DATUM: 2012-01-21 / TID: 20:46:10
URL: http://wmfoto.blogg.se/

Postat av: Anonym

du, har du redan svarat på frågestunden ? ♥

DATUM: 2012-01-21 / TID: 21:37:19

Postat av: teamJL (louise)

hade du inte kunnat visa det i ett videoinlägg??? :D

DATUM: 2012-01-22 / TID: 13:57:47
URL: http://abjl.blogg.se/

Postat av: Iman Abenar

Hej!

Jag behöver verkligen hjälp med det!

Vill du hjälpa mej? :D

Uppskattar verkligen det!<3

Hare bra!! KRAAAAM<33

DATUM: 2012-03-07 / TID: 15:15:05
URL: http://imaniibieber.blogg.se/

Postat av: amanda

Kan man både ha det i menyn och headern med denna kod? :)

DATUM: 2012-03-11 / TID: 13:52:43
URL: http://sarpauamanic.blogg.se/

Postat av: rebecca

Hej, jag har följt ditt tips och försökt lagt in ett bildspel i menyn. Men jag får bara upp första bilden, det byts liksom inte. Det blir inget bilspel utan bara en bild, Kan du hjälpa mig? :)

DATUM: 2012-05-31 / TID: 18:41:27
URL: http://rrebccaa.blogg.se/

Postat av: Moa & Emelie - Vinn en prisvärd grimma från Schockemöhle

Hej, jag undrar om bildspelet kan börja om från början igen efter att man har lagt in bilderna, den stannar alltså på sista bilden tills man ger den en ny sidovisning...

Vi har den inte på våran blogg utan på denna: http://ridgalnisarna.blogg.se/philippawilkens/

Kram, Moa.

DATUM: 2012-06-09 / TID: 20:37:37
URL: http://ridgalnisarna.blogg.se/

Postat av: Alicia Besserer

På vår blogg så satte jag in allt, men kategorierna och inlägget blev jättekonstigt isärflyttade, vet du vad jag ska göra?
Tacksam för svar!

Jättebra guide btw :D

Alicia

DATUM: 2012-08-17 / TID: 13:55:51
URL: http://siztah.blogg.se/

Postat av: sally

Hej! Jag har lagy in koden och det ser bra ut , men första bilden visas endast hela tiden så kan du hjälpa mig? :)
Har först testat det på min design testar blogg.!

DATUM: 2013-01-05 / TID: 22:32:19
URL: http://designtestaresallysventorp.blogg.se/

Postat av: sally

Hej! Jag har lagy in koden och det ser bra ut , men första bilden visas endast hela tiden så kan du hjälpa mig? :)
Har först testat det på min design testar blogg.!

DATUM: 2013-01-05 / TID: 22:34:01
URL: http://designtestaresallysventorp.blogg.se/

Postat av: Anonym

Hej! Jag har lagy in koden och det ser bra ut , men första bilden visas endast hela tiden så kan du hjälpa mig? :)
Har först testat det på min design testar blogg.!

DATUM: 2013-01-05 / TID: 22:34:12

Trackback