✔ Stop Funktion

[arraybreak]

es funktioniert, leider wieder ein problem, beim letzten Punkt stoppt er und blinkt die ganze zeit als ob er gleich wieder wechseln wollen würde

 

[erik s.]

           if (typeof nr == "undefined") {
                nr = visible_item + 1;
                if(nr > total_items) return;
            }

Der Timer läuft aber weiter, hab im Moment auch keinen Kopf, weiter darüber nachzudenken, das zu umgehen. Das könnten die Entwickler des Sliders sicherlich besser.

 

[arraybreak]

Trotzdem Danke dir

Habe es jetzt so gelöst (mit deinem Vorschlag, nur was dazu gefügt)

           if (typeof nr == "undefined") {
                nr = visible_item + 1;
                if(nr > total_items -1) return;
            }

PS: Frage am Rande, weißt du vielleicht wieman mit jQuery die Größe des Bildes skalieren kann?

 

[erik s.]

Dazu findest du zum Beispiel hier was. Kurzgefasst in etwa so:

var newHeight = 100;
var newWidth = 200;
$('#image_id').css( { height: newHeight, width: newWidth } );

Für die neuen Proportionen bist du aber selbst verantwortlich

 

[arraybreak]

Danke dir für deine Antwort, ich habe es zwar versucht einzubinden aber irgend wie passiert da nichts, mein vorhaben war eigentlich die Bilder von groß zu klein zu skalieren und das in einer Animation, aber die Programmierung wird wahrscheinlich doch zu schwer...

Hier wäre z.b. mein Code

$(document).ready(function() {
		var newHeight = 50;
		var newWidth = 50;
  $("#bild1").animate({ pause: 500}, 4000).animate({left:"-120px", top:"150px"}, 800).css( { height: newHeight, width: newWidth } );
  $("#bild2").animate({ pause: 500}, 4000).animate({left:"-120px", top:"150px"}, 800).css( { height: newHeight, width: newWidth } );
  $("#bild3").animate({ pause: 500}, 4000).animate({left:"-120px", top:"450px"}, 800).css( { height: newHeight, width: newWidth } );
  $("#bild4").animate({ pause: 500}, 4000).animate({left:"-120px", top:"525px"}, 800).css( { height: newHeight, width: newWidth } );
               
});

 

[erik s.]

Da geht's!
Spuckt die Fehler-Konsole was aus? Stimmen die Bilder-IDs?

 

[arraybreak]

Ne es kommen keine Fehler, aber die Frage wäre eigentlich, kann man die Skalierung animieren? Also nicht dass er es auf einen schlag skaliert, sondern von groß zu klein mit Animation.

 

[erik s.]

https://tinker.io/6e394/2

 

[arraybreak]

super, danke dir! bloß ich verstehe noch nicht ganz wie ich das einbinden soll. weil mein vorhaben etwas kompliziert ist: (Wenn man auf die Seite kommt, dann sollen die Bilder nach kurzer pause animiert nach unten fahren und sich dabei auch verkleinern, aber automatisch, ohne auf button klicken zu müssen)

Also die bilder fahren auch nach unten, nur verkleinern sie sich aber nicht

Ne Idee?

hier mein Code: Wie binde ich jetzt dein Code ein?

 <div class="top-demo" style="display:none">
		<div id="mt1"><img src="images/mt-1.png"/></div>
    		<div id="mt2"><img src="images/mt-2.png"/></div>
    		<div id="mt3"><img src="images/mt-3.png"/></div>
    		<div id="mt4"><img src="images/mt-4.png"/></div>
 </div>

$(document).ready(function() {

  $("#mt1").animate({ pause: 500}, 4000).animate({left:"-120px", top:"150px"}, 800);
  $("#mt2").animate({ pause: 500}, 4000).animate({left:"-120px", top:"150px"}, 800);
  $("#mt3").animate({ pause: 500}, 4000).animate({left:"-120px", top:"450px"}, 800);
  $("#mt4").animate({ pause: 500}, 4000).animate({left:"-120px", top:"525px"}, 800);
               
});

 

[erik s.]

Also jetzt mal ohne Mist: Darauf hättest du auch alleine kommen können.
Ab jetzt genieße ich meinen Feierabend!

$("#mt1").animate({ pause: 500}, 4000).animate({left:"-120px", top:"150px", width:"200px"}, 800);