Jump to content
xt:Commerce Community Forum

Bilderwechsel die 2te


flavor

Recommended Posts

Hallo,

ich habe eine Slideshow (Javascript) in mein Header eingebunden, die mir weiche Bildübergänge ermöglicht. Bilderwiedergabe funktioniert nach der Reinfolge auch wunderbar. Leider bekomme ich es nicht gebacken die zufällige Bilderwiedergabe zu erzwingen. Hat vieleicht einer eine Lösung parat?

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

var d=document, bilder = new Array(), zInterval = null, aktuell=0, pause=false; bilderAnzahl=5; bilderPfad="../media/images/"; geschwindigkeit=10000;

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

// erstes Bild wird eingelesen
bild = d.getElementById("slideshow").getElementsByTagName("img");
bilder[0] = bild[0];
bilder[0].style.display = "block";
bilder[0].xOpacity = .99;

bilder[1] = new Image();
bilder[1].src = bilderPfad + "002.jpg";
bilder[1].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[1]);

setTimeout(so_xfade,geschwindigkeit);
neuesBild();
}

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

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

bilder[nIndex].style.display = "block";
bilder[aktuell].xOpacity = cOpacity;
bilder[nIndex].xOpacity = nOpacity;

setOpacity(bilder[aktuell]);
setOpacity(bilder[nIndex]);

if(cOpacity<=0) {
bilder[aktuell].style.display = "none";
aktuell = nIndex;
setTimeout(so_xfade,geschwindigkeit);
neuesBild();
} 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) + ")";
}
}

function neuesBild() {
// immer ein Bild vorausladen
if ( (aktuell < (bilderAnzahl-2)) && (bilder.length < bilderAnzahl) ) {
bilder[aktuell+2] = new Image();
bilder[aktuell+2].src = bilderPfad + "0" + ((aktuell+3)<10 ? "0" + (aktuell+3) : (aktuell+3)) + ".jpg"
bilder[aktuell+2].xOpacity = 0;
d.getElementById("slideshow").appendChild(bilder[aktuell+2]);
}
}[/PHP]

Liebe Grüße

Claudia

Link to comment
Share on other sites

Hallo,

mit Zufallzahlen arbeiten?

Link: Zufallszahlen in Javascript mit Math.random()

Viele Grüße,

df:bug

Phuu,

danke fü den Link. Der Code scheint nicht optimal zu sein, hat mich aber zu diesem hier geführt.

function ZufallszahlGenerieren(Minimum, Maximum)
{
var Zufallszahl = Math.floor(Minimum+(Maximum-Minimum+1)*(Math.random()));
alert(Zufallszahl);
}[/PHP]

ich versuche es schon seit Stunden ohne Erfolg. Die einzige Veränderung die ich erziele ist die, das die Bilder einfach nicht mehr weiterlaufen. Ich weiß nicht ob es daran liegt das die Slideshow mit 00x.jpg arbeitet, oder ob ich den Code falsch einsetze. Javascript ist eine verfluchte Angelegenheit! Hat vielleicht einer eine Lösung für dieses Problem?

Beste Grüße Claudia

Link to comment
Share on other sites

Hallo,

warum machst du dir die Mühe das mit Javascript umzusetzen, wenn es doch zig fertige Slideshows für JQuera gibt?

Das dürfte um einiges einfacher sein.

MfG. Hansen

Hallo Hansen,

JQuery Plugins sind eine wirklich sehr schöne Sache, z.B Cycle oder Nivo Slide, allerdings habe ich kein Plugin gefunden das die Bilder vorläd(ajax!?). Da bei der Menge der Bilder die Startseite ewig braucht bis sie geladen ist.

LG

Link to comment
Share on other sites

Hi,

danke Hansen. Das ist genau das was ich gesucht habe. Zwar kann man sich hier nicht weitere Bildübergänge als "fade" aussuchen, aber das reicht mir so. Habe es HIER probehalber eingebaut und läuft super. Allerdings schaffe ich es nicht das Plugin in den Shop einzubauen. Wenn ich den Script in die index.html vom Template einbaue, bekomme ich ein weißes Bild. Eine header.php finde ich auch nicht. Wo kann ich den den Code einbauen?

LG Claudia

P.S. ironischerweise funktioniert hier nur die Shuffle Funktion :-)

Link to comment
Share on other sites

Hat sich erledigt, habe rausbekommen das hier js.php als head Bereich dient und der index.html als Body, somit ist alles klar. Für die die es wissen wollen: der Script muss in die js.php.

Leider überzeugt die Shuffle Funktion mich nicht 100%tig. Die Math.Formel ist einfach nur dünnes... zu viele Wiederholungen der selben Bilder. Eine andere Möglichkeit sehe ich im Moment nicht.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
  • Create New...