Designkurs

2012-05-10
23:09:04

Slideshow i headern!
Nu kommer denna efterlängtade kod!

1: Gå till din stilmall och lägg in koden ↓ under avsnittet #header {

#EmilyPictureBackground {
float: center;
margin-right: 0px; }


2.Sedan går du med att gå in på design - kodmall och lägger in den koden . Någonstans mellan <head> och </head>.

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




3.Lägg sedan in kodenmellan <div id="header"> och </div>. Du kan ha så många bilder du vill i bildspelet, men den sista bilden du lägger in ska inte ha en ; bakom sig!



Sådär, klart!

Kommentarer:
#1: Matilda

Tack!! Ska testa det ;)

Men hur lägger man in text?? Alltså det jag vill att det ska stå hela tiden: Välkommen till Matmod.blogg.se!!

2012-05-11 @ 13:49:04
#2: JohannaB

gud vad bra du berättar! Jag undrar bara hur man gör så att menyn liggen med ett melanrum från skriv rutan? Kul om du kund visa det ;)

2012-05-12 @ 10:59:16
#3: hanna

vilka bra designtips! :D

2012-05-12 @ 21:48:30
#4: SofieE

kan du inte lägga ut i videoinlägg istället? svårt att förstå såhär ;)

2012-05-18 @ 16:41:03
#5: Elin

Testade detta, men det funkade inte... vad gör jag då? :)

2012-05-19 @ 18:26:34
#6: emma

Tack. det funkade ju jävligt bra !!!!!

du har förstört min header gå in och kolla på kin blogg så ska du få se vad du har gjort ! du kanske nt gokänner det här men du ser ändå vad det står så ja .

är skit ledsen nu ! !

2012-06-03 @ 20:56:40
#7: Elin ♥

vilken kodmall??

Svar: alla :)
felicia - fotokobran

2012-06-11 @ 21:39:41
#8: Alexandra

Hej!:)
Det kommer upp en ruta men bilderna syns inte, vad är fel?
Kram

2012-06-14 @ 23:52:36
#9: Steffie

funka inte alls, fan asså. jag som vill ha så!!! Kan du inte fixa en bättre beskrivning?!

Svar: ska försöka fixa det!
felicia - fotokobran

2012-07-24 @ 22:07:31
#10: Felicia

det funkade inte :s ingen header vill visas om du kan förklara de?

2012-08-03 @ 00:55:08
Kommentera inlägget här:
Namn: Kom ihåg mig?
Mailadress:  
Bloggadress:  
Kommentar: