Alt har en begynnelse… - Hvordan gjør de det? Roterende header som TheGiant

Hvordan gjør de det? Roterende header som TheGiant

Først ut skal vi se på hvordan TheGiant ( http://thegiant.blogg.no ) klarer å få til at header bildet som roterer seg. Du kan legge inn så mange bilder du vil, og plassere dem der du vil.

Dette er ikke vanskelig, men du bør vite hvordan du ordner bilder i rett størrelse og ellers ikke være utålmodig så går dette ganske greit.

Først må du finne de bildene du ønsker å bytte mellom. Du trenger ikke å sette inn hele header bildet, bare den delen som skal rotere/bytte på. Bildene kan være så stor eller små du ønsker, men det som er viktig er at de er like store. Så laster du dem opp til http://tinypic.com og noterer ned direkte adressen til bildene ( nederste feltet ).

Når det er gjort går du inn i stilsett filen, helt nederst setter du inn disse linjene, kopier inn alt:

1
2
3
4
5
6
7
8
9
10
11

#photodiv{

background-repeat: no-repeat;

float: right; /* om du vil ha bildet på venstre ( left ) eller høyre ( right ) siden */

height: 269px;  /* hvor høyt er bildene du skal bruke */

left: 10px; /* for å justere bildet, hvis du vil ha det mer til venstre så bruker du feks -10px */

position: relative;

overflow: hiden;

top: 10px;  /* lenger ned eller opp, kan bruke - ( minus ) for å flytte den lenger opp også */

width: 309px; /* hvor bredd bildene er */

}

Alt er beskrevet i koden over, når du etter på ser at bildene blir forlangt til høyre må du forandre til feks left: 20px; Dette er noe du bare må prøve deg frem til senere.

Da skal vi sette inn koden i male. Dette må gjøres i alle malene, men vi gjør det først i forside malen og tilpasser koden der før du kopiere dem over til de andre malene.

Gå inn i malen og finn denne linjen:

</head> IKKE <head> men </head> Selv om det er bare et tegn i forskjell gjør det stor forskjell. Over linjen </head> limer du inn denne koden, nok en gang, alt skal inn:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

<script type="text/javascript"><!--

//

// CSS Photo Shuffler v1.0 by

// Carl Camera

// http://iamacamera.org

//

// SetOpacity Function and inpiration from Photo Fade by

// Richard Rutter

// http://clagnut.com

//

// License: Creative Commons Attribution 2.5 License

// http://creativecommons.org/licenses/by/2.5/

//

// Customize your photo shuffle settings

//

// * Surround the target <img> with a <div>. specify id= in both

// * set background-repeat:no-repeat in CSS for the div

// * The first and final photo displayed is in the html &lt;img&gt; tag

// * The array contains paths to photos you want in the rotation.

// If you want the first photo in the rotation, then it's best to

// put it as the final array image. All photos must be same dimension

// * The rotations variable specifies how many times to repeat array.

// images. zero is a valid rotation value.

var gblPhotoShufflerDivId = "photodiv";

var gblPhotoShufflerImgId = "photoimg";

// her legger du inn bildene, husk at hver bilde adresse må være inni "

//det skal også være et komma mellom hver bilde adresse.

//UNTATT på siste bildet der skal ikke være noe komme etter

// du kan plassere så mange bilder du ønsker her.

var gblImg = new Array(

"http://i48.tinypic.com/2n9j91c.jpg",

"http://i46.tinypic.com/6p9m3p.jpg",

"http://i48.tinypic.com/14ie4o2.jpg"

);

var gblPauseSeconds = 15.25;  // hvor lenge hvert bilde skal være fremme

var gblFadeSeconds = .85; // hvor lang tid overgangen fra ett bilde til et annet skal være

var gblRotations = 9999; // hvor mange ganger bildene skal vises

//under her skal de ikke gjøres noe forandringer

// End Customization section

var gblDeckSize = gblImg.length;

var gblOpacity = 100;

var gblOnDeck = 0;

var gblStartImg;

var gblImageRotations = gblDeckSize * (gblRotations+1);

window.onload = photoShufflerLaunch;

function photoShufflerLaunch()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

gblStartImg = theimg.src; // save away to show as final image

document.getElementById(gblPhotoShufflerDivId).style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

function photoShufflerFade()

{

var theimg = document.getElementById(gblPhotoShufflerImgId);

// determine delta based on number of fade seconds

// the slower the fade the more increments needed

var fadeDelta = 100 / (30 * gblFadeSeconds);

// fade top out to reveal bottom image

if (gblOpacity < 2*fadeDelta )

{

gblOpacity = 100;

// stop the rotation if we're done

if (gblImageRotations < 1) return;

photoShufflerShuffle();

// pause before next fade

setTimeout("photoShufflerFade()",gblPauseSeconds*1000);

}

else

{

gblOpacity -= fadeDelta;

setOpacity(theimg,gblOpacity);

setTimeout("photoShufflerFade()",30); // 1/30th of a second

}

}

function photoShufflerShuffle()

{

var thediv = document.getElementById(gblPhotoShufflerDivId);

var theimg = document.getElementById(gblPhotoShufflerImgId);

// copy div background-image to img.src

theimg.src = gblImg[gblOnDeck];

// set img opacity to 100

setOpacity(theimg,100);

// shuffle the deck

gblOnDeck = ++gblOnDeck % gblDeckSize;

// decrement rotation counter

if ( gblImageRotations < 1)

{

// insert start/final image if we're done

gblImg[gblOnDeck] = gblStartImg;

}

// slide next image underneath

thediv.style.backgroundImage='url(' + gblImg[gblOnDeck] + ')';

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari&lt;1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}

// --></script>

Har skrevet inn forklaringer i koden hvor du skal gjøre de forskjellige tingene, har langt inn 3 bilder, disse er bare å bytte ut. Men det kan kanskje være lurt å la disse stå her enda. Slik at du ser om du har fått tid til å virke.

Så går vi litt lenger ned i malen, finn linjen:

Under denne limer du inn denne koden:

1	<div id="photodiv"><img id="photoimg" src="http://i48.tinypic.com/14ie4o2.jpg" alt="" /></div>

Da er det bare å forhåndsvise og se om alt virker. Hvis det virker så kan du sett inn dine egne bilder.

Husk også å justere høyden og bredden i stilsett filen, slik at de passer til bildene du bruker. Hvis bildene ikke kommer på rett plass, lagrer du, gå inn i stilsettfilen og juster hvor bildene skal komme opp i den kodebiten du satt inn der. I tillegg til å legge inn bildene i den delen som ble lagr inn over </head> linjen så skal du sette inn en bilde adresse i delen som ble plasser under <div id=”doc2″> også, bytt ut med den som alt er der.

Skal være godt forklaring, hvis det er noe du lurer på så er det bare å spørre.

Slik gjorde de det. Spørsmål eller kommentarer er selvfølgelig velkommen
Fikk du det til?

11 Kommentarer til “Hvordan gjør de det? Roterende header som TheGiant”

Solveig Kristine ♥ says:

6. mars, 2010 klokken 12:27

stilig
Ola says:

6. mars, 2010 klokken 23:18

Tusen takk .. Se resultatet på http://blabbs.blogg.no
Benedikte says:

7. mars, 2010 klokken 13:16

sv: Det høres fint ut Jeg er ganske åpen for det meste, men ønsker et helt enkelt og ryddig design.
Stine says:

7. mars, 2010 klokken 17:54

SV. Hei, tusen takk for litt design, jeg likte det kjempe godt Jeg tenker at jeg vil ha noe i den veien av det designet som du lagde til meg Lagra alt
KathrineMadelen says:

7. mars, 2010 klokken 19:53

RE: Takk
Ja, jeg lager design gratis til alle som spør
KathrineMadelen says:

7. mars, 2010 klokken 20:15

RE: Så bra
Sier i fra når jeg trenger hjelp ^^
Mimba says:

8. mars, 2010 klokken 00:32

Jeg har sendt en melding til deg på innboksen på blogg.no.. Der vil du se hvor du finner meg

Lurte forresten på en ting - har lyst på et design som ligner litt på det jeg har på mimba-bloggen, men jeg er ikke så flink til slike ting.. Har du lyst å hjelpe meg?!
Anna says:

11. mars, 2010 klokken 16:48

Hei:D
Jeg lurte på om du kunne laget en slik header til meg viss jeg gir deg bilder slik at jeg bare kan kopiere inn der du har skrevet alt riktig, jeg er ikke god til slikt.
Kan du svare på min blogg? Er ikke så god til og sjekke om folk har svaret på komentarene mine:D
Jenny says:

28. mars, 2010 klokken 20:14

Hei!
Tusen takk! Det funket! ..men jeg sliter litt med å få flyttet den dit jeg vil ha den.. Hvordan får jeg bildene der på siden nedover? hvis du skjønner hva jeg mener.. sånn som han derre thegiant hadde den
Håper på svar
silje@fargeskjerm says:

4. april, 2010 klokken 15:20

heia, design hjelp hørtest bra ut :DD
anniken. says:

6. juli, 2010 klokken 23:20

HEI !
er dette en sånn (http://lightangel.blogg.no/) header, eller sånn som skifter når man oppdaterer siden som http://www.idawulff.com/ ? Trenger svar fort ! hvis det ikke er en som lightangel, kan du hjelpe meg med hvordan man lager det ?

håper på svar !

Legg inn et svar

Jeg ønsker selvfølgelig at du legger inn en kommentar, men jeg ønsker kommentarer på det jeg skriver over her.
Hvis jeg har skrevet noe dumt eller hel teit på bloggen din så svar gjerne her.
MEN ta deg tid til å lese gjennom det jeg også har skrevet da. Legg gjerne igjen en kommentar på det :)

Solveig Kristine ♥ says:

6. mars, 2010 klokken 12:27

stilig

Ola says:

6. mars, 2010 klokken 23:18

Tusen takk .. Se resultatet på http://blabbs.blogg.no

Benedikte says:

7. mars, 2010 klokken 13:16

sv: Det høres fint ut Jeg er ganske åpen for det meste, men ønsker et helt enkelt og ryddig design.

Stine says:

7. mars, 2010 klokken 17:54

SV. Hei, tusen takk for litt design, jeg likte det kjempe godt Jeg tenker at jeg vil ha noe i den veien av det designet som du lagde til meg Lagra alt

KathrineMadelen says:

7. mars, 2010 klokken 19:53

RE: Takk
Ja, jeg lager design gratis til alle som spør

7. mars, 2010 klokken 20:15

RE: Så bra
Sier i fra når jeg trenger hjelp ^^

Mimba says:

8. mars, 2010 klokken 00:32

Jeg har sendt en melding til deg på innboksen på blogg.no.. Der vil du se hvor du finner meg

Lurte forresten på en ting - har lyst på et design som ligner litt på det jeg har på mimba-bloggen, men jeg er ikke så flink til slike ting.. Har du lyst å hjelpe meg?!

Anna says:

11. mars, 2010 klokken 16:48

Hei:D
Jeg lurte på om du kunne laget en slik header til meg viss jeg gir deg bilder slik at jeg bare kan kopiere inn der du har skrevet alt riktig, jeg er ikke god til slikt.
Kan du svare på min blogg? Er ikke så god til og sjekke om folk har svaret på komentarene mine:D

Jenny says:

28. mars, 2010 klokken 20:14

Hei!
Tusen takk! Det funket! ..men jeg sliter litt med å få flyttet den dit jeg vil ha den.. Hvordan får jeg bildene der på siden nedover? hvis du skjønner hva jeg mener.. sånn som han derre thegiant hadde den
Håper på svar

silje@fargeskjerm says:

4. april, 2010 klokken 15:20

heia, design hjelp hørtest bra ut :DD

anniken. says:

6. juli, 2010 klokken 23:20

HEI !
er dette en sånn (http://lightangel.blogg.no/) header, eller sånn som skifter når man oppdaterer siden som http://www.idawulff.com/ ? Trenger svar fort ! hvis det ikke er en som lightangel, kan du hjelpe meg med hvordan man lager det ?

håper på svar !

Hvordan gjør de det? Roterende header som TheGiant

11 Kommentarer til “Hvordan gjør de det? Roterende header som TheGiant”

Legg inn et svar

Legg meg til som venn

Siste innlegg

Siste kommentarer

Emner

Bloggrull