Anzeige

Endlos-Slideshow mit Autostart

Endlos-Slideshow mit Autostart | PSD-Tutorials.de

Erstellt von toomsen, 27.06.2011.

  1. toomsen

    toomsen Noch nicht viel geschrieben

    Dabei seit:
    23.09.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 550 D
    Endlos-Slideshow mit Autostart
    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: http://toomsen.de/html/1_notizen.html

    Hoffe, jemand kann helfen.

    Gruß Tom
     
    #1      
  2. toomsen

    toomsen Noch nicht viel geschrieben

    Dabei seit:
    23.09.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 550 D
    Endlos-Slideshow mit Autostart
    AW: Endlos-Slideshow mit Autostart

    Hi Forum, Problem ist gelöst. Frage hat sich erledigt. Tom
     
    #2      
  3. silvester56

    silvester56 Guest

    Endlos-Slideshow mit Autostart
    AW: Endlos-Slideshow mit Autostart

    Verrätst Du die Lösung?
     
    #3      
  4. toomsen

    toomsen Noch nicht viel geschrieben

    Dabei seit:
    23.09.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 550 D
    Endlos-Slideshow mit Autostart
    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
     
    #4      
  5. toomsen

    toomsen Noch nicht viel geschrieben

    Dabei seit:
    23.09.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 550 D
    Endlos-Slideshow mit Autostart
    AW: Endlos-Slideshow mit Autostart

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

    CayZ Pixel Slider

    Dabei seit:
    07.01.2011
    Beiträge:
    216
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Photoshop CS 5; Dreamweaver; C4D R12
    Endlos-Slideshow mit Autostart
    AW: Endlos-Slideshow mit Autostart

    Also bei mir läuft das script auch...und hast ne schicke seite =)
     
    #6      
  7. toomsen

    toomsen Noch nicht viel geschrieben

    Dabei seit:
    23.09.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 550 D
    Endlos-Slideshow mit Autostart
    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
     
    #7      
  8. Lelleck

    Lelleck Noch nicht viel geschrieben

    Dabei seit:
    12.06.2011
    Beiträge:
    19
    Geschlecht:
    männlich
    Endlos-Slideshow mit Autostart
    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
     
    #8      
  9. toomsen

    toomsen Noch nicht viel geschrieben

    Dabei seit:
    23.09.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 550 D
    Endlos-Slideshow mit Autostart
    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
     
    #9      
  10. Lelleck

    Lelleck Noch nicht viel geschrieben

    Dabei seit:
    12.06.2011
    Beiträge:
    19
    Geschlecht:
    männlich
    Endlos-Slideshow mit Autostart
    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
     
    #10      
  11. toomsen

    toomsen Noch nicht viel geschrieben

    Dabei seit:
    23.09.2008
    Beiträge:
    27
    Geschlecht:
    männlich
    Kameratyp:
    Canon EOS 550 D
    Endlos-Slideshow mit Autostart
    AW: Endlos-Slideshow mit Autostart

    Keine Ursache.

    Gruß Tom
     
    #11      
Seobility SEO Tool
x
×
×