Script "Smooth Div Scroller" hakt bei Filterung

[Teroa]

Huhu,

ich habe schon wieder eine Frage.
Bin dabei zu versuchen, 2 verschiedene Scripte zusammen zu fügen.
Zum einen das Smooth Div Scroller Script und ein simples Script um Bilder je nach Klasse ein- oder ausblenden.

Wenn alle Bilder angezeigt werden, läuft das Ganze ohne zu stocken und zu Springen. Wie das Script schon sagt "Smooth".
Nun Filter ich per Script einge Bilder aus, die eine bestimmte Klasse nicht besitzen.
Danach fängt der Scrollter an zu Springen und zu Haken. Kann sich das Jemand erklären?

habe das Szenario einmal in JSFiddle angelegt.
Weiß jemand einen schlauen Rat?

Gruß :roll:

 

[Tronjer]

Ich würde es anders angehen.

Du könntest versuchen, das fadeIn(), fadeOut() durch show() und hide() zu ersetzen. Falls das nicht zufriedenstellend ist, würde ich mir ein Plugin suchen, das sich per click() stoppen lässt. Anschließend die Seite per Ajax so umbauen, dass beim Klick auf einen Link die entsprechenden Bilder aus dem DOM entfernt, bzw. hinzugefügt werden.

Als Standardverhalten wird das Plugin mit allen Bildern beim Laden der Seite gestartet. Klickst du auf einen Link, wird das Script gestoppt, die Bilder geladen, und auf den success-Callback des Ajax-Requests bindest du die Funktion zum (Neu)Start des Plugins.

 

[Teroa]

Hey,

also show() und hide() ergeben leider den selben Effekt.
Es scheint so, das dieser Slider nicht mit sich wechselndem Content zurecht kommt.

Dein Vorschlag klingt zwar gut, aber übersteigt definitiv meine Programmierkentnisse

 

[Sempervivum]

Vielleicht führt eine einfachere Möglichkeit zum Erfolg: Versuch mal, die Initialisierung des Sliders, also dieses hier:

	$("div#makeMeScrollable").smoothDivScroll({
		autoScrollingMode: "onStart",
		manualContinuousScrolling: true,
		touchScrolling: true,
		scrollToEasingFunction: "easeOutCirc",
	});

nochmal aufzurufen, wenn Du die Bilder geändert hast.

 

[Tronjer]

Hey,

Dein Vorschlag klingt zwar gut, aber übersteigt definitiv meine Programmierkentnisse

Da wäre ich mir nicht so sicher. Wenn du bereits Grundkenntnisse in jQuery mitbringst, lassen sich die Basics von jQuery Ajax an einem Nachmittag erlernen. Ich würde überprüfen, ob das Plugin alle Bilder direkt beim Start lädt, oder bei jedem Durchgang neu einliest. Versuch anstatt hide() und fadeOut() doch mal so etwas.

$('#image').remove();

Damit wird Bild aus dem DOM gelöscht. Wenn der Slider dann immer noch danach sucht, brauchst du ein Plugin mit Stopfunktion.

 

[Teroa]

Muss mich entschuldigen, die letzten Tage war ich auf einer Schulung fern ab von dem Projekt.
ich habe nun nochmal ein wenig herumgespielt. Mit .remove() scheint es zu funktionieren. Es werden die "falschen Bilder" ausgeblendet und es hakt nichts.
Doch wie Blende ich wieder welche ein? Mit .show() oder .add() funktioniert es leider nicht. :-)

Smooth Div Scroll - jsFiddle

 

[Tronjer]

Doch wie Blende ich wieder welche ein? Mit .show() oder .add() funktioniert es leider nicht. :-)

Smooth Div Scroll - jsFiddle

Gar nicht. Du hast die Elemente ja gelöscht und musst sie demzufolge wieder neu erzeugen und im DOM einfügen. Entweder per Ajax oder mit diesen Funktionen.

DOM Insertion, Inside | jQuery API Documentation

 

[Teroa]

Ohje. Muss ich mich irgendwie einarbeiten :roll: Danke schonmal.