Eftersom inlägget blev så långt så valde jag att göra så ni måste klicka på bilden nedan för att läsa det!
Denna frågan hamnade på bloggen igår och jag hade tänkt att förklara detta i ett inlägg för er skull. För att man ska kunna ha en animerad header i bra kvalité så ska man använda sig utav en kod, koden jag använder finns HÄR och är ganska enkel att få igång att använda om man vet vad man gör.
Du börjar med att göra dina bilder så som du vill ha dom, alla för sig. Dom skapar du i Photoshop, gimp eller något annat program. Sedan så laddar du upp dom i arkivet eller någon annan hemsida, jag själv använder Imageshack.us där man kan ladda upp hur stora bilder som helst.
Sedan så börjar du med att klistra in den första koden mellan <div id="header"> och </div> i alla dina kodmallar precis som jag gjort här:
Du kan lägga in hur många bilder som helst så länge det är ett ; mellan koderna. Men kom ihåg att det inte ska vara någon efter den sista!
Efter det så går du in i stilmallen och klistrar in nästa kod längst ner
Koden: #slideshow {width:BREDDEN PÅ BILDERNApx;} #slideshow img { width:BREDDEN PÅ BILDERNApx; height: HÖJDEN PÅ BILDERNApx; display: none /*Får absolut inte tas bort!*/ } #slideshow img.first { display: block } /*Får absolut inte tas bort!*/
Efter det är det dags för den längsta koden av dom alla som ska ligga mellan <head> och </head> som finns längst upp i kodmallen!
Koden: <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=500; 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>
Sedan så ska du ställa in Storleken på dina header bilder.
Det gör du i dom 2 första koderna OCH under #Header i stilmallen.
Sedan är det dags för att lägga in bild länkarna i denna koden;
Där det står BILDKOD 1 ska det vara samma bildlänk på båda sedan så BILDKOD 2 o BILDKOD 3 där lägger du in olika länkar till olika bilder. och vill du ha fler bilder så lägger du bara in ;BILDKOD 4 men kom ihåg, efter den sista bildkoden så ska det inte finnas något ;. det får inte heller finnas MELLANRUM i koden.
Hmm...
Alltså, allt funkar, förutom själva meningen: Bilderna byts inte?
Sen har jag ju mitt klassiska problem med att inläggssidan är för liten, så headern ser just nu helt konstig ut.
Men som sagt, vad har jag gjort för fel, eftersom bilderna inte byts ut?
Svar:testa att göra om koderna, det är väldigt noga att det inte bli mellanrum eller sådant för då funkar det inte tyvärr!
Det funkar inte för mig längre, vad menar du med "Där det står BILDKOD 1 ska det vara samma bildlänk på båda"???? Jag vet inte varför det inte funkar nu :oo funkar det även om det redan är nåt emellan och ?
Svar:det står Bildkod 1 2 gånger och länkarna där ska vara samma. :) jag vet inte hur du menar men om du följer guiden så ska de funka! :)
Det funkar inte för mig längre, vad menar du med "Där det står BILDKOD 1 ska det vara samma bildlänk på båda"???? Jag vet inte varför det inte funkar nu :oo funkar det även om det redan är nåt emellan och ?
Hej och välkommen till min blogg, mitt namn är Amanda och jag är en tjej på strax 18 år fyllda. Spelar dagligen star stable och driver även den underbara klubben Shady pearls. Började spela Star Stable sommaren 2012 och bloggat om spelet sedan Januari 2013.
Vill ni kontakta mig?
Då får ni självklart göra det. ↓
Shady Pearls är enligt mig en av jorviks bästa klubbar.
I SP satsar jag och medlemmarna på en god gemenskap. En miljö där alla ska trivas. Vi är en full klubb och för att få gå med i klubben får man gå in på klubbens hemsida ↑ och ansöka. För att behålla gemenskapen är vi väldigt noga med vilka som kommer in i klubben.
