CrossFade-Gallery zufällig wiedergeben

**php_fussel** · 05.03.2009, 13:05

PHP-Code:


<html> <head> <SCRIPT LANGUAGE="JavaScript"> 

var slideShowSpeed = 2000; 

var crossFadeDuration = 6; 

var j = 0; 

var Pic = new Array();  



Pic[0] = 'images/bild1.jpg'; 

Pic[1] = 'images/bild2.jpg'; 

Pic[2] = 'images/bild3.jpg';

Pic[3] = 'images/bild4.jpg'; 



var p = Pic.length; 



var preLoad = new Array(); 



for (i = 0; i < p; i++) { 

 preLoad[i] = new Image(); 

 preLoad[i].src = Pic[i]; 

}  



function runSlideShow() {

  

//###################

 function shuffle(array) {     

  var num = Math.floor(Math.random() * array.length);         

  return num; 

 } 

//###################

  

if (document.all) {  document.images.SlideShow.style.filter="blendTrans(duration=2)";  

document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";

document.images.SlideShow.filters.blendTrans.Apply(); 

}

 

document.images.SlideShow.src = preLoad[shuffle(preLoad)].src; //############



if (document.all) {

document.images.SlideShow.filters.blendTrans.Play(); 

} 



setTimeout('runSlideShow()', slideShowSpeed); 

} 

</script> 



<body onLoad="runSlideShow()"> 

</head> 

<body>  

<img src="images/bild1.jpg" name='SlideShow' border="0"> 

</body> 

</html>

So in etwa, nicht wirklich schön aber funzt.
Damit ein Bild nicht doppelt gezogen wird ... nee, dat mach man selber, etwas Spaß sollst Du auch haben!
Und es sieht nur im IE gut aus ... im FF wechseln die Bilder abrupt! Kontonummer per Mail

!

Gruß php-fussel

**werny** · 05.03.2009, 13:32

wow super! Klappt!
Danke vielmals!

Habe nur einen kleinen Schönheitsfehler entdeckt:

- jetzt startet die Slideshow IMMMER mit dem header01.jpg
und geht dann promt (sofort) weiter, ohne abzuwarten.

- es kann oft sein, daß zufällig ein Bilder öfter kommt als andere
sprich: die Schleife wird nicht ganz druchgelaufen, bis alle Bilder gezweigt wurden

**php_fussel** · 05.03.2009, 13:48

...

- jetzt startet die Slideshow IMMMER mit dem header01.jpg und geht dann promt (sofort) weiter, ohne abzuwarten.

... ist doch klar, das Bild ist ja auch das Bild, was im body steht ... und das wird nun mal zuerst ausgegeben *hüstel
Und damit die Bilder langsamer laufen/ wechseln, mußt Du nur den Wert von

PHP-Code:


var slideShowSpeed = 2000;

hochsetzen (2000 = 2 Sek.) *hüstelhüstel

- es kann oft sein, daß zufällig ein Bilder öfter kommt als andere sprich: die Schleife wird nicht ganz druchgelaufen, bis alle Bilder gezweigt wurden

Hast Du Dir mein Posting eigentlich richtig bis zum Schluß durchgelesen, oder interessiert Dich nur Copy/Paste?

Gruß php_fussel

EDIT:
Das ist nur die kostenlose Version ... gegen Bares gibt es auch eine, in der die einzelnen Elemente des Bild-Arrays zufällig und vollständig ausgegeben werden, ohne dass sich Bilder wiederholen ... und erst dann fängt die Ausgabe wieder von vorne an. Außerdem besitzt die o.a. Version keine Schleife für die Ausgabe!

**werny** · 05.03.2009, 13:56

Ja das hab ich schon auch verstanden
das body-bild ist immer das erste und
die slideshowspeed kann man regeln *hüstel-hüstel*

Das erste Bild kommt so IMMER raus, scheint ganz kurz auf
und dann erst beginnt die eigentliche slideshow...

Jetzt sei doch bitte so nett und sag mir wie das geht,
man kann doch nicht alles können ^^

**php_fussel** · 05.03.2009, 14:02

Nee Du, das mach mal schön alleine ... ist eine gute Übung für Dich!
Nur noch ein kleiner Hinweis: "Lottozahlen ziehen" ...

Gruß php_fussel

Guckst Du hier ...

**werny** · 05.03.2009, 14:13

Verehrtester php-fussel...
habe keine zeit dafür
deswegen habe ich ja hier um Hilfe gebeten.

Sag mir wieviel du für deine funktionierendes "kostenpflichties" script willst und ich blech es dir per paypal..
ist ja kein ding....

kannst es mir ja auch per pn oder email schicken wenn du willlst

**TobiaZ** · 05.03.2009, 15:24

habe keine zeit dafür deswegen habe ich ja hier um Hilfe gebeten.

Dann in Zukunft im richtigen Forum!

und *verschieb*

**werny** · 05.03.2009, 23:13

Angebot steht noch

Angebot steht noch

Wer kann mir das Skript zu ende programmieren?
Belohnung per paypal oder überweisung.

**php_fussel** · 06.03.2009, 11:14

Ich habe gerade ein gutes Vorstellungsgespräch hinter mich gebracht, bin Zuversichtlich und habe verdammt gute Laune ... daher poste ich mal eine Lösung! Wenn Du korrekt bist, dann lässt Du was springen (und fragst nach meiner Kontonummer).

PHP-Code:


<html>

<head>

<SCRIPT LANGUAGE="JavaScript">

var slideShowSpeed = 3000;

var crossFadeDuration = 6;

var zaehler=0;

var letzter=0;

var Pic = new Array();



Pic[0] = 'images/bg_water.jpg';

Pic[1] = 'images/blatt_bg.jpg';

Pic[2] = 'images/me_devil.jpg';

Pic[3] = 'images/body.jpg';



var p = Pic.length;

var gezogen = new Array(p);

for(var i=0; i < p; i++) gezogen[i]=i;

var preLoad = new Array();

for (i = 0; i < p; i++) {

preLoad[i] = new Image();

preLoad[i].src = Pic[i];

}



function runSlideShow() {





/*################# 1. Versuch ##############################

function shuffle(array)

{

    if(zaehler === p) {

        for(var i=0; i < p; i++) gezogen[i]=0;

        zaehler=0;

    }    

    

    do {

        var num = Math.floor(Math.random() * array.length);    

    }while(gezogen[num]>0);

//alert(num); <-- zum Testen entkommentieren

    gezogen[num]=gezogen[num]+1;

    zaehler=zaehler+1;

    

    return num;

} 

######################################################*/

//########### Verbesserte Version #################

function shuffle() {

//Wenn das Array 'gezogen' leer ist, wird es wieder gefüllt und der Rundenzähler wieder auf 0 gesetzt    

    if(gezogen.length == 0) { 

    //alert("neu");    <-- zum Testen entkommentieren    

        for(var i=0; i < p; i++) gezogen[i]=i;

        zaehler=0;        

    }

     do{

//Wähle eine neue Zufallszahl aus dem aktuellen Längen-Bereich des 'gezogen'-Arrays

        var zufallindex = Math.floor(Math.random() * gezogen.length); 

/* ... bei einem erneuten Durchlauf wird hier geprüft/sichergestellt,

 dass das neue Bild nicht dem letzten der vorigen Runde entspricht*/

    }while(zufallindex == letzter && zaehler == 0);

//Weise den entsprechenden Wert aus dem 'gezogen'-Array der Variable 'num' zu

        var num = gezogen[zufallindex];    

// ... erhöhe den Zähler für diese "Runde" ;-)    

        zaehler=zaehler+1; 

//Wenn der Rundenzähler der Gesamt-Anzahl Bilder entspricht, speichere das letzte Bild        

        if(zaehler==p)letzter=gezogen[0]; 

// ... und lösche anschließend das Element aus dem 'gezogen'-Array

        gezogen.splice(zufallindex,1); 

        

        return num;

}



//##### Verbesserte Version ENDE ##################



if (document.all) {

    document.images.SlideShow.style.filter="blendTrans(duration=2)";

    document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";

    document.images.SlideShow.filters.blendTrans.Apply();

} 



document.images.SlideShow.src = preLoad[shuffle()].src;



if (document.all) {

    document.images.SlideShow.filters.blendTrans.Play();

}



setTimeout('runSlideShow()', slideShowSpeed);

}

</script>

<body onLoad="runSlideShow()">

</head>

<body>



<img src="images/pixel.jpg" name='SlideShow' border="0">  





</body>

</html>

Um dem direkten Weiterspringen bei Seitenaufruf entgegen zu wirken (was man programmiertechnisch auch lösen könnte) einfacher im body nur ein 1x1-Pixelbild einfügen, welches also eigentlich nicht sichtbar ist ...! Die erste Version funktioniert auch, wird aber bei größerer Anzahl von Bildern problematisch und letztes/erstes Bild können gleich sein. Bei der verbesserten Version ist das nicht mehr der Fall, da das gezogen-Array nach jeder zufällig getroffenen Auswahl verkleinert wird!!! Des Weiteren werden letztes und (bei Neustart) das erste Bild auf Ungleichheit verglichen (sollten sie gleich sein, dann läuft die do/while solange, bis dies nicht mehr der Fall ist) ... sollte aber bei größerer Anzahl von Bildern nicht mehr wirklich wichtig sein, da dieser Zufall dann dementsprechend geringer wird. Zum Testen muss nur der auskommentierte 'alert'-Befehl implementiert werden ('//' entfernen).
Arbeitszeit ca. 2 Stunden
Script ist im Netz bekannt, diese Lösung mit zufälliger Auswahl meines Wissens nicht! (Copyright bla, bla)
Dauertest (2 Std.) war problemlos, weitere Tests empfehlenswert!!

Gruß php_fussel

EDIT:
Ups ... statt if(zaehler=p) natürlich if(zaehler==p)

CrossFade-Gallery zufällig wiedergeben

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Wird geladen... Bitte warte.

CrossFade-Gallery zufällig wiedergeben

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar