SANNAS RUM -

Bildspel i profilbilden

Stilmallskod:

Scriptkod: in i kodmallen/kodmallarna innan < / head >

<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>

Kodmallskod 2: ska in i kodmallen/kodmallarna efter div id="side"

För mer tips och tricks; besök sannasrum.blogg.se/bloggtips

2013-04-28 @ 13:19:02 allmänt Permalink

Kommentarer

Postat av: Carro - en emo/scene bloggerska

Är det samma script som till headerbildspel? Så man behöver bara ett script eller? :) Tack för tipset, du är riktigt duktig! :D Kramisar Carro

Svar: Ja precis det är det :) tack så mkt!

sannas rum

2013-04-28 @ 14:46:23
URL: http://quiethell.blogg.se/

Postat av: E B B A

Sv; Jaah :) Det är jättefina saker men gele är nog mer hållbart och kan bli väldigt fint också ^^

Svar: Ja, precis, det är därför jag gör dem, så att de håller ;D hihi

sannas rum

2013-04-28 @ 17:06:53
URL: http://snorptorpan.bloggplatsen.se

Postat av: ❥ Daniella Järpenberg

Halloj! Alltså jag har ett problem.. jag hade gjort detta innan och vet att jag gjort rätt då mitt bildspel i headern i min nuvarande blogg fungerar utan problem. Men om du går in på min andra blogg, där jag gör min nya design, http://daniellajrpenberg.blogg.se/ , ser du att när mina bilder ändras så ser man liksom fortfarande den föregående bilden.. svårt att förklara men du ser det nog.
Jag gjorde om efter detta tips, men det var ju samma som jag hade gjort, och det blev ingen skillnad. Har du någon aning om varför det blir så? :) Har försökt hitta felet, men icke.

Svar: Jag skulle tro att det beror på att det laddar långsamt. Som jag sa i videon så kan man inte ha hur många scripts som helst tyvärr. Vad jag kan se på din testblogg har du inte mindre än 7 stycken script (och då räknas jag inte alla som du har för susnet), medan du bara har fyra stycken på din vanliga blogg.. Tyvärr så blir bloggen väldigt mycket långsammare och jag tror inte man kan ha så många script om man ska ha just slideshow-scriptet tyvärr, då funkar det inte riktigt /:

sannas rum

2013-04-28 @ 20:24:34
URL: http://ddaniellaa.blogg.se/

Postat av: ❥ Daniella Järpenberg

Svar: Okej, tack så mycket för hjälpen! :)

Svar: No worries, vet inte om det är dt, men jag skulle tro att det är så tyvärr.

sannas rum

2013-04-29 @ 18:04:34
URL: http://ddaniellaa.blogg.se/

Trackback

Till bloggens startsida

Kategorier

Arkiv