hvordan

_Johan_ · 30. mai 2008

Hei.

Jeg får ikke dette til, men saken er enkel,

på min hjemmeside er det et stort bilde

til høyre. Ok. Dette bilde vil jeg at skal fade ut, og

at en nytt skal komme inn. Jeg har funnet et sted som forklarer

dette, selv om jeg ikke får det til...

http://medienfreunde.com/lab/innerfade/

Er det noen som kan hjelpe meg til å forstå hvordan jeg får dette til?

Endret 30. august 2008 av sveinj

Haraldson · 30. mai 2008

Emnetittelen i denne tråden er lite beskrivende for trådens innhold og det er derfor ingen god emnetittel. Jo bedre og mer beskrivende emnetittelen er, jo lettere er det for andre å skjønne trådens innhold og det vil være lettere å treffe den riktige forumbrukeren med det rette svaret. Ber deg derfor om å endre emnetittel slik at du unngår at en moderator stenger tråden. Vennligst forsøk å ha dette i tankene neste gang du starter en tråd, og orienter deg om hva vår nettikette sier om dårlig bruk av emnetitler.

Bruk -knappen i første post for å endre emnetittelen.

(Dette innlegget vil bli fjernet ved endring av emnetittel. Ikke kommenter dette innlegget, men gjerne dette innlegget når tittelen er endret, så vil det bli fjernet..)

Vindstille · 31. mai 2008

1. Last ned jQuery og jQuery InnerFade PlugIn (link) og link til begge javascriptfilene (inni head-elementet), på siden du vil det skal kjøres.

<head>
...
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.innerfade.js" type="text/javascript" charset="utf-8"></script>

</head>

2. Legg til denne javascriptsnutten etter at du har linket til jQuery (men fortsatt inn i head-elementet).

<script type="text/javascript">
$(document).ready(
	function(){
		$('#animasjon').innerfade({
			animationtype: 'slide',
			speed: 750,
			timeout: 2000,
			type: 'random',
			containerheight: '1em'
		});
	}
);
</code>

Bytt ut #animasjon med id-en til listen du vil animere og

speed: 750, (i millisekunder)

timeout: 2000, (i millisekunder)

type: 'random', (her kan du velge mellom "random" eller "sequence".

containerheight: '1em' (størrelsen på animasjonsboksen)

3. Lag en liste i html (ul eller ol-elementet). Hvert punkt i listen er det som byttes ut for hver bytterunde.

F.eks.

<ul id="animasjon">
<li>
	<img src="første_bilde.jpg">
</li>
<li>
	<img src="andre_bilde.jpg">
</li>
<li>
	<img src="tredje_bilde.jpg">
</li>
<li>
	<img src="osv.jpg">
</li>
</ul>

Eksempel slik jeg fikk det til å virke.

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>td</title>

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.innerfade.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(
function(){
$(document).ready(
	function(){
		$('#animasjon').innerfade({
			animationtype: 'slide',
			speed: 750,
			timeout: 2000,
			type: 'random',
			containerheight: '1em'
		});
	}
);
</script>
</head>

<body>
<ul id="animasjon">
<li>Hei på deg</li>
<li>Du er grei</li>
<li>Hahaha</li>
</ul>
</body>
</html>

Takk for skriptet btw. Hadde faktisk behov for det akkurat nå.

Endret 31. mai 2008 av JonT

Vidi · 31. mai 2008

Jeg ble selv nysgjerrig på dette skriptet.

Tar utg. i id-elementet med samme navn (animasjon). Men, ingen funksjon.

Skrivefeil, eller noe jeg kan ha glemt?

_Johan_ · 31. mai 2008

takk, men jeg får det ikke helt til.

Hva kan jeg ha gjort galt? Slik ser det ut i head

<script src="jquery.innerfade/js/jquery.innerfade.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(document).ready(

function(){

$('#animasjon').innerfade({

animationtype: 'slide',

speed: 750,

timeout: 2000,

type: 'random',

containerheight: '1em'

});

}

);

</script>

og slik i koden

<td width="52" rowspan="3" background="sentrum.jpg" bgcolor="#000000"> </td>
<td width="310" align="left" bgcolor="#FFFFFF">

<ul id="animasjon">

<li>

<img src="1.jpg" width="310" height="450" />

</li>

<li>

<img src="andre_bilde.jpg">

</li>

<li>

<img src="tredje_bilde.jpg">

</li>

<li>

<img src="osv.jpg">

</li>

</ul>

</p> </td>

<td width="60" rowspan="3" bgcolor="#000000"> </td>

</tr>

håper noen kan hjelpe....

Vindstille · 31. mai 2008

Beklager. Så ikke at det var en jQuery PlugIn og ikke en del av selve jQuery.

Posten min skal nå være oppdatert.

sveinj: Du må linke til både jQuery-filen og jQuery Innerfade PlugIn-filen.

Endret 31. mai 2008 av JonT

Logg inn

hvordan

Anbefalte innlegg

_Johan_

Lenke til kommentar

Videoannonse

Haraldson

Lenke til kommentar

Vindstille

Lenke til kommentar

Vidi

Lenke til kommentar

_Johan_

Lenke til kommentar

Vindstille

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer