Jquery Diashow

[wolfgang]

Hallo,
ich würde gerne eine Diashow bauen mit folgenden Eigenschaften:
-Diashow startet erst beim rollover
-beim rollout wird wieder das erste Bild angezeigt.

ich arbeite ganz gerne mit dem jquery cycle plugin, jedoch scheind es für diese Aufgabe nicht geeignet zu sein.
Habt ihr einen Tipp?
VG
Wolfgang

[suit]

-Diashow startet erst beim rollover
-beim rollout wird wieder das erste Bild angezeigt.

ich arbeite ganz gerne mit dem jquery cycle plugin, jedoch scheind es für diese Aufgabe nicht geeignet zu sein.

Du meinst das?
http://jquery.malsup.com/cycle/

Das ist geeignet dafür.

Habt ihr einen Tipp?

Sieh dir die etwa 100 verschiedenen Bespiele für die Benutzung an, da ist sicher etwas dabei - und wenn nicht kann man das mit etwa 3 Zeilen Code bauen.

[suit]

Sieh dir die etwa 100 verschiedenen Bespiele für die Benutzung an, da ist sicher etwas dabei - und wenn nicht kann man das mit etwa 3 Zeilen Code bauen.

Pardon: 2 Zeilen (nebst der allfälligen Konfiguration).

Schön und der hover()-Methode gekapselt 8 Zeilen.

[suit]

Schön und der hover()-Methode gekapselt 8 Zeilen.

^
ich reiche ein "mit" nach

[Wolfgang]

Schön und der hover()-Methode gekapselt 8 Zeilen.

ich hab gerade nochmal gegoggelt.
und auch was gefunden. das sie nicht von vornerein startet hab ich gefudnen.
nur wie ich zum ersten bild komme noch nicht.
kannst du mir vielleicht einen ansatz geben?

[suit]

Schön und der hover()-Methode gekapselt 8 Zeilen.
ich hab gerade nochmal gegoggelt.
und auch was gefunden. das sie nicht von vornerein startet hab ich gefudnen.
nur wie ich zum ersten bild komme noch nicht.
kannst du mir vielleicht einen ansatz geben?

Der cycle-Methode kann man als einziges Argument eine Ganzzahl, den Index des zu wählenden Elements übergeben.

Das steht aber seltsamerweise nicht in der Referenz sondern ist irgendwo unter den Beispielen für den manuellen Pagebrowser zu finden.

Du musst aber noch aufpassen, nicht in jeder Version wird alles unterstützt.

all und lite unterscheiden sich hier vom Funktionsumfang teilweise.

[wolfgang]

Das steht aber seltsamerweise nicht in der Referenz sondern ist irgendwo unter den Beispielen für den manuellen Pagebrowser zu finden.

besten dank.
soweit funktioniert auch schon alles.
jedoch bekomme ich es nicht hin, dass er bei mouseout wieder zum ersten bild springt.
welcher begriff muss statt 'pause'?
habs schon mit 'end' versucht, jedoch ohne erfolg.

$(document).ready(function() {  
    $('div.slideshow').cycle({  
        fx: 'fade',  
        speed:    300,  
        timeout:  800  
    });  
  
    $("div.slideshow").cycle('pause');  
  
    $("div.slideshow").mouseover(function(){  
      $(this).cycle('resume');  
    }).mouseout(function(){  
      $(this).cycle('pause');  
    });  
  
});

viele grüße
wolfgang

[suit]

jedoch bekomme ich es nicht hin, dass er bei mouseout wieder zum ersten bild springt.
welcher begriff muss statt 'pause'?

Das passt schon, du musst aber die slideshow pausieren UND zum ersten Bild springen/wechseln.

habs schon mit 'end' versucht, jedoch ohne erfolg.

$(document).ready(function() {

$('div.slideshow').cycle({
        fx: 'fade',
        speed:    300,
        timeout:  800
    });
    $("div.slideshow").cycle('pause');

Das kannst du zusammenfassen, Chaining ist eine super Sache.

[code lang=javascript]$('div.slideshow')
  .cycle({
    fx: 'fade',
    speed:    300,
    timeout:  800
  })
  .cycle('pause');

  

>   
>     $("div.slideshow").mouseover(function(){  
>       $(this).cycle('resume');  
>     }).mouseout(function(){  
>       $(this).cycle('pause');  
>     });  
  
Daraus lässt sich wie gesagt ein hover() basteln, das ist ansich nur ein alias für mouseover/mouseout aber schöner und einfacher zu verstehen.  
  
Zudem kannst du das auch per Chaining hinten dranhängen.  
  
~~~javascript
  .hover(  
    function() {  
      $(this).cycle('resume');  
    },  
    function() {  
      $(this)  
        .cycle('pause')  
        .cycle(0)  
    }  
  );

Afaik gibts auch eine Möglichkeit, mehrer optionen/commands gleichzeitig zu übergeben - finde ich aber grade nicht.

[wolfgang]

leider funktioniert deine modifikation nicht.
ich hab mal versucht .cycle(0)
anzuhängen. jedoch springt er nach dem ersten bild direkt wieder zum ersten, obwohl es noch kein mouseout gibt.

[suit]

leider funktioniert deine modifikation nicht.
ich hab mal versucht .cycle(0)
anzuhängen. jedoch springt er nach dem ersten bild direkt wieder zum ersten, obwohl es noch kein mouseout gibt.

Ich hab' den Schnipsel nicht getestet, aber cycle(0) sollte dazu führen, dass die Slideshow wieder zum ersten Bild wechselt.

Zitat deinerseits:

-beim rollout wird wieder das erste Bild angezeigt.

[wolfgang]

Zitat deinerseits:

-beim rollout wird wieder das erste Bild angezeigt.

ja, aber leider schon vor dem mouseout. also nachdem das erste bild angezeigt wurde...

[suit]

ja, aber leider schon vor dem mouseout. also nachdem das erste bild angezeigt wurde...

Wie sieht dein Code jetzt aus?

[wolfgang]

Wie sieht dein Code jetzt aus?

immernoch wie vorher.
konnt mit deinem leider nicht so viel anfangen, da ich den aufbau nicht verstanden hab :(

$(document).ready(function() {  
    $('div.slideshow').cycle({  
        fx: 'fade',  
        speed:    300,  
        timeout:  800  
    });  
  
    $("div.slideshow").cycle('pause');  
  
    $("div.slideshow").mouseover(function(){  
      $(this).cycle('resume');  
    }).mouseout(function(){  
      $(this).cycle('pause');  
    });  
  
});

[wolfgang]

Wie sieht dein Code jetzt aus?

jetzt funktioniert es doch :)

 $('div.slideshow')  
  .cycle({  
    fx: 'fade',  
    speed:    300,  
    timeout:  800  
  })  
  .cycle('pause');  
  
    $("div.slideshow").hover(  
    function() {  
      $(this).cycle('resume');  
    },  
    function() {  
      $(this)  
        .cycle('pause')  
        .cycle(0)  
    }  
  );

vielen dank für deine hilfe und geduld

[suit]

jetzt funktioniert es doch :)

Hab' mich schon gewundert ;)

.cycle(0)

.cycle(0);

Ein Strichpunkt fehlt, "der Optik" wegen ;)