Startsidan  ·   Instagram  ·   Twitter  ·   Bloglovin'

Svar

Skrivet:    ·  Bloggdesign
Hur jag har fått till min header så att den byter bilder:
 
1: Gå in i din stilmall och lägg in koden ↓ under avsnittet #header {
 
#EmilyPictureBackground {
float: center;
margin-right: 0px; }
 
 
2: Lägg in denna kod ↓ ovanför <head> i dina kodmallar

 

<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 denna kod ↓ efter

 

<div id="EmilyPictureBackground">
<img src="BILD 1" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"BILD 1;BILD 2;SISTA BILDEN",5);
</script>

Nu kan du lägga in hur många bilder du vill bara du har ett mellan bilderna. OBS! Gäller ej sista bilden! Du lägger bildkoden där det står BILD 1 osv.
 
Glöm inte att lägga in i alla kodmallar, och spara!
 
Fråga bara om något är oklart.
 


Lite att tänka på:
-Se till att alla bilderna är lika stora.
-Ibland funkar det inte med float: center/left/right för att få bildspelet på rätt plats, då får man istället använda margin. Jag har t ex margin-left: 213px; för att få min header att hamna rätt. Ändras i avsnittet #header {
 
Jag rekomenderar att ni gör en extrablogg som du gör dina bloggdesigner på utifall att du skulle råka radera något och sedan blir bloggen helt konstig!
 
 
 

Design

Skrivet:    ·  Bloggdesign, Handboll
Jag är tillbaka igen efter en tid med desperate housewifes koma så är jag tillbaka med bloggandet. Detta kommer att bringa mer bilder på mig och fler snygga outfitbilder så håll utkik! Designen är inte färdig, är inte helt nöjd om jag ska vara ärlig men det blir nog bra tillslut, det brukar det ju bli. 
 
Idag spelade vi match, första seriematchen som A-flickor men vi förlorade med ETT mål!!!!!
Så arg var jag efteråt alltså, försökte verkligen att inte svära men några fan rann liksom bara ut ur munnen. Nu ska jag duscha och sedan gå och lägga mig tror jag. Ny dag imorgon iallafall pusshej!!!
 
fina laget ifrån förra årets SM!
 

Fixat en bloggdesign

Skrivet:    ·  Bloggdesign
Har suttit hela eftermiddagen och fixat Selmas bloggdesign, Första skoldagen har också varit idag vilkent var ballt för ja... Vi har ju faktiskt inte varit i skolan på 10 veckor! Imorgon åker vi till lökeberg med klassen. Kl 10:08 går bussen så det är chill! 
 
Nu blir det att gratulera bror som fyller 13 år imorgon!
 
gå in på Selmas blogg genom att klicka på bilden:
 
Tidigare inlägg