Verschiedene Zeitintervalle mit jQuery

themastercode · 10.01.2015

Guten Morgen.

Ich möchte eine recht kurze slideshow initiieren, die sich jedoch nach dem letzten Bild erst nach x Minuten wieder zeigt.

HTML:

<html>
<head>
<title>rotating Image script</title>
<link href="css.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="application/javascript">
  function swapImages(){
  var $active = $('#switch .active');
  var $next = ($('#switch .active').next().length > 0) ? $('#switch .active').next() : $('#switch img:first');
  $active.fadeOut(function(){
  $active.removeClass('active');
  $next.fadeIn().addClass('active');
  });
  }

  $(document).ready(function(){

    if('#switch .last') {   
       setInterval(swapImages, 25000);
     }
else
    {
     setInterval(swapImages, 5000);
}

  });
     </script>
</head>

<body>
<div id="switch">
<img src="picture1.png" />
<img src="picture2.png" />
<img src="picture3.jpg" class="last" />
</div>
</body>

allerdings will das if statement nicht greifen... und ich bin ein wenig am ende mit meinem latein.

Duddle · 10.01.2015

Javascript:

$(document).ready()

wird nur beim Laden der Seite gefeuert, also einmalig. Ein Unterscheiden darin bringt also garnichts.

Javascript:

if('#switch .last') {

macht wenig Sinn. Du fragst hier, ob ein String ist, was immer wahr ist (ausser beim leeren String). Du willst wahrscheinlich fragen, ob das Element mit .last gerade sichtbar / aktiv ist, und hast dabei den jQuery-Aufruf vergessen.

Wenn du unbedingt eine eigene Slideshow-Lösung erstellen willst (fertige Scripte gibt es ja wie Sand am Meer), dann würde ich es anders lösen: Setze am Ende von swapImages einen Timeout (setTimeout) um die Funktion wieder aufzurufen. Prüfe dabei auch ob das aktive Bild auch das letzte ist - was du ja schon mehr oder weniger mit

Javascript:

$('#switch .active').next().length > 0

machst. Wenn ja, setze einen höheren Timeout.

Duddle

themastercode · 10.01.2015

Das Problem mit schon bereit gestellten Slidern ist, das ich da keine möglichkeit sehe eine Auto initiation nach einer gewissen Zeit zu machen.

Das ganze ist als Snippet für OBS gedacht, einem Streaming Programm, hat also mit einer Website, die normal im Browser angezeigt wird, wenig zu tun.

also im Grunde muss ich anstelle des setIntervalls einen SetTimeout machen? und natürlich nicht nach dem string fragen...
Wollen wir mals ehen ob ich das in meinem Kopf jetzt hin bekomme. Danke für die Hilfe.

Duddle · 10.01.2015

themastercode schrieb:
im Grunde muss ich anstelle des setIntervalls einen SetTimeout machen?

Es ist kein Muss - ich würde es so machen, weil dann die Logik sauberer verpackt ist.

themastercode schrieb:
Das Problem mit schon bereit gestellten Slidern ist, das ich da keine möglichkeit sehe eine Auto initiation nach einer gewissen Zeit zu machen.

Was genau meinst du damit? Wenn du ein

Javascript:

$(document).ready(function(){});

und Intervalle/Timeouts nutzen kannst, kannst du auch fremde Scripte später initialisieren.

Duddle

themastercode · 11.01.2015

es liet daran dass die slider zu viel funktionallität mit sich bringen. es ist eine sache die in einem live stream laufen soll, heißt per clr-plugin als laufende banner angezeigt werden sollen.

themastercode · 14.01.2015

Ich denke ich ahb es was umständlich 'gelöst' in dem ich einfach eine class hinzugefügt

und das if statement damit gefüttert

Javascript:

        $(document).ready(function(){
    if(($('img').hasClass('last'))){
       setInterval(swapImages, 120000);
   
        }
    else {
        setInterval(sawpImages, 5000);
    }
   
  });

vielleicht doppelmoppel, aber es tut was ich möchte

Duddle · 15.01.2015

Scheinbar funktioniert ein PlugIn für OBS anders als ich es aus dem Web gewohnt bin. Das .ready() sollte exakt ein Mal ausgeführt werden, daher sollte, wie schon erwähnt, die Unterscheidung darin nicht funktionieren. Wenn es wie gewünscht arbeitet ist es ja okay.

Zur Vollständigkeit, hier ein Ansatz mit Timeouts:

Javascript:

    function swapImages(){
      var $active = $('#switch .active');
      var $next = ($('#switch .active').next().length > 0) ? $('#switch .active').next() : $('#switch img:first');
      var wait = ($next.is($('#switch img:last'))) ? 5000 : 2000;

      $active.fadeOut(function(){
       $active.removeClass('active');
       $next.fadeIn().addClass('active');
      });
       setTimeout(swapImages,wait);
     }

     $(document).ready(function(){
      setTimeout(swapImages,2000);
     });

Duddle

themastercode · 15.01.2015

eigentlich emuliert obs nur einen chromium-basierten browser... es sollte also im grunde iwe Chrome funktionieren.

Wenn du mir jetzt noch erklären kannst, was mich deinen code im loop laufen läßt (also erst warten, dann durch laufen,d ann wieder waretn, dann nutz ich lieber deinen, als das ich eventuell irgendwas kaputt mache.

edit: nvm. Musste mir nur klar machen, was du mit der variable wait machst, kam mir grade nicht in den sinn das du da die wartezeit austauscht.

Duddle · 15.01.2015

themastercode schrieb:
also erst warten, dann durch laufen,d ann wieder waretn

Quasi. "Rufe in 5 Sekunden Foobar auf. Foobar sagt: rufe in 5 Sekunden Foobar auf"

Duddle