Antworten auf deine Fragen:
Neues Thema erstellen

Endlos-Slideshow mit Autostart

toomsen

Noch nicht viel geschrieben

Hallo Leute,

leider hab ich mein Thema nicht genau gefunden. Vielleicht kann mir hier jemand helfen. Ich möchte auf meiner website nichts weiter, als eine automatisch laufende Endlos-Slideshow.

Über selfhtml.org hab ich das script immerhin so erfolgreich auf meiner seite einbauen können, dass es generell läuft. Was ich nicht hinbekomme sind Autostart und Neuanfang nach Ende der Bildfolge.

Das Script lautet:

1. Im Head:

<script type="text/javascript">
function fade(step) {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
step = step || 0;
imgs[counter].style.opacity = step/100;
imgs[counter].style.filter = "alpha(opacity=" + step + ")"; //
step = step + 2;
if (step <= 100) {
window.setTimeout(function () { fade(step); }, 1);
} else {
window.setTimeout(next, 4000);
}
}
function next() {
var imgs = document.getElementById("meinFader").getElementsByTagName("img");
if (typeof(counter) != "number") {
counter = 0;
}
counter++;
if (counter < imgs.length) {
fade();
}
};
</script>
<style type="text/css">
.next { position: absolute; top: 0; left: 0; opacity: 0; filter:alpha(opacity=0); display:block;width:260px;height:421px; margin-right:0px; margin-left:0px; margin-bottom:0px; margin-top:0px;border-left-width:1px;border-top-width:0px;border-right-width:1px;border-bottom-width:0px;border-left-color:#FFF;border-top-color:#DDDDDD;border-right-color:#FFF;border-bottom-color:#DDDDDD;border-left-style:solid;border-top-style:solid;border-right-style:solid;border-bottom-style:solid }
#meinFader { position: relative; }
</style>

2. Im Body:

<div id="meinFader">
<img src="IMG_8931.jpg" alt="" class="img_v_index">
<img src="IMG_8908.jpg" alt="" class="next">
<img src="IMG_8789.jpg" alt="" class="next">
</div>
<p><a href="javascript:next()">Slideshow starten</a></p>

Wie kann ich den Startlink durch Autostart ersetzen und eine Endlosschleife erstellen?

Link zur website:

Hoffe, jemand kann helfen.

Gruß Tom
 

toomsen

Noch nicht viel geschrieben

AW: Endlos-Slideshow mit Autostart

Hi Silvester, klar warum nicht. Ich hab n anderes script benutzt. Und zwar:

Im head:

<SCRIPT type="text/javascript" >
<!--
// Geschwindigkeit in Millisekunden
var slideShowSpeed = 4000;
// Dauer der Überblendung in Sekunden
var crossFadeDuration = 3;
var Pic = new Array();
// Für mehr Bilder einfach anfügen
Pic[0] = 'bild1.jpg'
Pic[1] = 'bild2.jpg'
Pic[2] = 'bild3.jpg'

// Hier nichts ändern
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad = new Image();
preLoad.src = Pic;
}
function runSlideShow() {
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[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
//-->
</script>
</head>

Im Bodytag:

onload="runSlideShow()"

im Body:

<td id="VU"><img src="bild0.jpg" name='SlideShow'>

Jetzt hab ich nur ein neues Problem. Das Script läuft nicht im firefox, wegen der veralteten document.all befehle und die krieg ich bislang nicht fehlerfrei ausgetauscht durch documentgetelementbyID. Ich hab das neu gepostet. Mal schauen, ob wer was weiß.

tom
 

toomsen

Noch nicht viel geschrieben

AW: Endlos-Slideshow mit Autostart

Sorry, das script läuft schon im firefox- aber das fading funktioniert nicht.
 

toomsen

Noch nicht viel geschrieben

AW: Endlos-Slideshow mit Autostart

Danke.

Läuft ja auch gut das script. Aber wie gesagt, im IE nur ohne Fader. Ich hab meine neue Frage noch mal im anderen Forum (xhtml) gepostet, mal sehen ob da jemand Rat weiß. Gruß Tom
 

Lelleck

Noch nicht viel geschrieben

AW: Endlos-Slideshow mit Autostart

Hi Tom,

sag mal: Die Slideshow auf deiner Seite, ist mit dem Quellcode gemacht, den du hier gepostet hast? Wenn ich mir den Qulltext anschaue, sieht das irgendwie anders aus!?

Gruß
Lelleck
 

toomsen

Noch nicht viel geschrieben

AW: Endlos-Slideshow mit Autostart

Hi Lelleck, kein Wunder, ist auch ein anderer! Ich hab das noch ein- zweimal ausgetauscht, bis ich endlich ein browserübergreifend funktionierendes script hatte (gar nicht so einfach, so was zu finden. Viele bieten was an, aber nur selten funktionierts auch wirklich).

Das auf meiner Website jetzt verwendete script nennt sich Ultimate Fade-in slideshow (v2.4) und du findest es hier: http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm
Denk dran, die fadeslideshow.js Datei runterzuladen.

Wenns nicht klappt, meld dich. Gruß Tom
 

Lelleck

Noch nicht viel geschrieben

AW: Endlos-Slideshow mit Autostart

Hi Tom,

danke für deine Antwort und den Link.

Ich habe zwischenzeitlich auch noch mal ein wenig weiter gesucht, aber ich muss sagen, dass mir die "Ultimate Fade-in slideshow" doch am besten gefällt, und ich mich für diese entschieden habe.

Gruß
Lelleck
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.619
Beiträge
1.538.363
Mitglieder
67.540
Neuestes Mitglied
Alex Weidner
Oben