Hjälp med att modifiera ett skript.

Hej,

Varning för långt inlägg...... :l

Häromdagen fick jag hjälp av "Spango" att lägga in en "slumpgenerator" i ett javascript. Det funkade galant.

Tyvärr funkar inte resten av skriptet lika bra som det var tänkt. Idén var alltså att ha ett bildspel fade in/out mellan bilderna, och det gick bra i IE/Win, eftersom det använde IE:s "opacity". Men i andra webbläsare bara bläddrar bilderna utan fade in/out.

Jag tyckte att man kunde leva med det, men andra har tyckt annorlunda - och jag får medge att dom har en poäng. Om man först tittar på bildspelet i IE och sedan i någon annan webbläsare, så upplever man en ganska störande skilnad. Bildspelet blir inte alls lika "sofistikerat", utan klumpigt.

Så jag har letat efter ett skript som klara att köra fade in/out på alla webbläsare, och hittade ett som fungerar (utom i IE/Mac - men det bryr jag mig inte om). Här finns en demo: http://host.sonspring.com/slideshow/ och här är sidan med en nedladdningslänk: http://sonspring.com/journal/slideshow-alternative

Inte heller detta skript har en "slumpgenerator". Jag provade på olika sätt att peta in den där lösningen från Fisher Yates som "Spango" visade på tidigare. Men eftersom jag inte kan ett skvatt om javascript, så får jag det inte att fungera alls... Det var det första problemet.

Det andra problemet med skriptet/lösningen är att alla bilder till bildspelet måste laddas till html-sidan först. De staplas på varandra i en div, och först när alla bilder laddats ner så reagerar sidan på CSS och först då döljer den alla bilder utom en.

Medan bilderna laddas ner ser det alltså förjäkligt ut (man ser ju alla på varandra), och det kan ju ta lång tid beroende på mängden bilder och/eller användarens anslutningshastighet.

Jag vill alltså att bilderna laddas ner en efter en. Medan en bild visas, så laddas nästa ner i bakgrunden.

Det var det andra problemet.

Är det någon som är duktig på sånt här och kan hjälpa till att modifiera skriptet?

style="display:none" på samtliga:

<div id="rotator">
	<img
		src="9rules.jpg"
		alt="9rules Network"
		title="9rules Network"
		onclick="parent.location='http://9rules.com/'"
		style="display:none"
	/>
	<img
		src="cssbeauty.jpg"
		alt="CSS Beauty"
		title="CSS Beauty"
		onclick="parent.location='http://cssbeauty.com/'"
		style="display:none"
	/>
	<img
		src="godbit.jpg"
		alt="Godbit Project"
		title="Godbit Project"
		onclick="parent.location='http://godbit.com/'"
		style="display:none"
	/>
	<img
		src="stylegala.jpg"
		alt="Stylegala"
		title="Stylegala"
		onclick="parent.location='http://stylegala.com/'"
		style="display:none"
	/>
	<img
		src="yahoo.jpg"
		alt="Yahoo!"
		title="Yahoo!"
		onclick="parent.location='http://yahoo.com/'"
		style="display:none"
	/>
</div>

xfade2.js:

/*
	Image Cross Fade Redux
	Version 1.0
	Last revision: 02.15.2006
	[email]steve@slayeroffice.com[/email]

	Rewrite of old code found here: [url]http://slayeroffice.com/code/imageCrossFade/index.html[/url]
*/

function fisherYates ( myArray ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);

var d=document, imgs = arr = new Array(), zInterval = null, current=0, pause=false;

function so_init()
{
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement('link');
	css.setAttribute('href','slideshow2.css');
	css.setAttribute('rel','stylesheet');
	css.setAttribute('type','text/css');
	d.getElementsByTagName('head')[0].appendChild(css);

	imgs = d.getElementById('rotator').getElementsByTagName('img');
	for(i=0;i<imgs.length;i++) arr[i] = imgs[i];
	fisherYates(arr);
	for(i=1;i<imgs.length;i++) arr[i].xOpacity = 0;
	arr[0].style.display = 'block';
	arr[0].xOpacity = .99;

	setTimeout(so_xfade,3000);
}

function so_xfade()
{
	cOpacity = arr[current].xOpacity;
	nIndex = arr[current+1]?current+1:0;
	nOpacity = arr[nIndex].xOpacity;

	cOpacity-=.05;
	nOpacity+=.05;

	arr[nIndex].style.display = 'block';
	arr[current].xOpacity = cOpacity;
	arr[nIndex].xOpacity = nOpacity;

	setOpacity(arr[current]);
	setOpacity(arr[nIndex]);

	if(cOpacity<=0)
	{
		arr[current].style.display = 'none';
		current = nIndex;
		setTimeout(so_xfade,3000);
	}
	else
	{
		setTimeout(so_xfade,50);
	}

	function setOpacity(obj)
	{
		if(obj.xOpacity>.99)
		{
			obj.xOpacity = .99;
			return;
		}

		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
	}
}

Hej Peter!

Tusen tack för svar!
Jag testade ditt förslag. Kanske är det jag som gör något fel (inte helt osannolikt), men jag får det inte att funka alls.
Först visades inga bilder alls (style="display:none"), så jag tog bort stilen för att i alla fall se hur bilderna växlade.
Men inte växlade dom inte. :) Samma bild hela tiden.
Jag bara kopierade din kod och klistrade in (hela javascriptet och divven i html-filen.).
Har du testat så du vet att det funkar? I så fall, jag har haft problem med js och felaktiga radbrytningar som orsakat fel några gånger förr, kan detta vara samma sak igen?

Än en gång: Tack för hjälpen!

PS: Jag vet att "beggars aren't choosers". Men det andra dilemmat var att bilderna skulle laddas ner allesammans på en enda gång innan bildspelet smäller igång. Jag planerar ett bildspel med 60-70 bilder på en sida. Stackars den användare som sitter med ett 56KB-modem. :D

Så om det går att ändra så att en bild i taget laddas ner så vore det kanon. Man kan väl ha listan på bilderna i js-filen, eller separat i en include...?

Jag har nu testat och det fungerar i såväl IE7 som Op9 och FF2.

Bifogat är en fil med exempel.

Jag skall titta litet mer på koden strax.

Version 2.

Peter!

Tammesjutton, det funkar suveränt! Men inte i Safari/Mac...
Jag skickar dig ett PM...

MVHDanne

PM:et är besvarat.

Det var nog ett vanligt mail jag skickade (via forumet).
Du kan väl kolla brevlådan som har adressen du registrerat här...

EDIT: Otroligt. Vi skrev samtidigt. :)
Ska kolla...

Slutgiltig, Safari-kompatibel version är bifogad.

Tack Peter!

Du har gjort ett fullkomligt suveränt jobb! Jag lyfter på alla hattar jag har! Tusen tack för snabb och kompetent hjälp!