Alt har en begynnelse… - Hvordan gjør de det?

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?