Designtips: Bildspel i headern :)
<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>
2. Sedan lägger du in den här koden nedan mellan <div id="wrapper"> och <div id="header">. Du kan ha så många bilder du vill i ditt bildspel, bara att den sista bilden du lägger in inte har denna ; i slutet. Alltså sista bilden ska inte ha en sån här ; bakom sig.
<div id="EmilyPictureBackground">
<img alt="slide show" src="FÖRSTA BILDEN" width="BREDDEN" height="HÖJDEN" id="EmilyPicture">
</div>
<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackground",
"FÖRSTA BILDEN IGEN;ANDRA BILDEN;TREDJE BILDEN",5);
</script>
3. Sen tar du bort själva headern du haft innan i stilmallen, för den vill vi ju inte ha med i den rörliga headern.
4. Klart! Hoppas det funkar för er, man får nog sitta och fixa så bildspelet sitter rätt och så. För mig tog det väldigt lång tid, men lycka till ! :)
fin blogg (:
Händer idag då ? <3
Kram ~~
sv: hehe aa :P
jo det är helt okej :D vad gör du? ^^
Vilken fin rörlig header du har!
oj råka stava mitt bloggnamn lite fel :)
Sv; Okej härligt! Jag med :)
sv: nice :) allt är bra med mig med.
Vad gör du?
sv: samma här. Men ska gå och lägga mig nu :)
hhahha, jag skrev:
Grattis du har vunnit dagens blogg! ... Eller? ljuger jag? Gå in kolla typ så haha :)
Kikar på stylisterna :D kollar du på det? ^^
okej c:
nice!;)
sv; haha ja jag vet, hatar sånna! saken är den att jag inte gjort något helle -.-' <3
Hahaha lugnt :D <3
Kul att du är med och tävlar om att bli veckans blogg! Meddelar dig när den är avslutad och vinnaren är uppe! :)
sv: hahaa, yes! xD
detsamma :D <3
det r fint :D vad hittar du på?
sv: hahaha xd
Kul att du var med och tävlande om dagens två bloggtipsplatser. Tipset är publicerat och ny anmälan är igång inför morgondagen!
http://nilssonpettersson.blogg.se/2012/april/dagens-bloggtips-24-ny-omgang.html#comment
Ett hett tips är att bara skriva en rad om något du vill att jag nämner om just DIN blogg om du blir en av tipsen imorgon! Behöver inte vara något avancerat, bara nåt enkelt!
fin blogg du har! :) <3
sv; ja det är ski jobbigt :/ speciellt när ens bästis gör detta.
Tack sötis!<3
Kika gärna in min haulvideo!
Vore även kul med en kommentar för att veta vad folk tycker om mina videobloggar! :)
http://evelinaelisabeth.blogg.se/2012/april/haha.html
hoppas du haft en bra måndag! :)
Sv Kanon, vad ska du göra imorrn då?
Fan va coolt!!! vill cokså ha!!!
Sv; Tack så jättemycket för tipset! ;)
Tack för tipset! Bildspelet är jätte bra! :)
