Background Sliden

[Supermann]

Hallo,

ich bräuchte mal ganz dringend Hilfe weil ich nicht weiterkomme.

Ich habe einen Produktslider und in diesem befinden sich die Produkte (ähnlich wie das auf der Apple Webseite), nun habe ich für jedes Produkt in dem Slider ein Bild in der Breite von 1200px angelegt welches 8 unterschiedliche Bilder enthält. Jetzt soll beim Mouseover dieses 1200px große Bild so geslidet werden, das es aussieht als bewegt sich das Bild. Es soll also nicht einfach von links nach rechts vorbeigeslidet werden.

Ich habe schon bei den Mootols Scripten nachgesehen aber nichts passendes gefunden, hat evtl. jemand von euch einen Code Schnipsel den ich weiterverwenden kann, oder eine Super zündende Idee?

Das ist der Code der bisher eingesetzt wurde, dort wurden aber nur 2Bilder gegeneinander ausgetauscht, vieleicht kann ich das ja so weiterverwenden nur das es eben mit nur einem Bild slidet.

window.addEvent('domready', function() {
		$$('.phoverimage').each(function(item, index) {
			item.addEvent('mouseenter', function() {
				if(item.hasClass('active')) return;
				$(item.id + '_img').src = hoverImage[item.id][1];
			});
			item.addEvent('mouseleave', function() {
				if(item.hasClass('active')) return;
				$(item.id + '_img').src = hoverImage[item.id][0];
			});
			
		});
	});

Gruß

[ciaobello]

ich bräuchte mal ganz dringend Hilfe weil ich nicht weiterkomme.

Hört sich gefährlich an .

Gibt bald so viel Slider wie Contao Versionen ... um das Problem ein bisschen einzugrenzen nenne uns doch noch die Versionen und Namen der Produkte (Slider) die Du einsetzen tust.

[Supermann]

Hallo,

das ist ein von einem Prog. eigens entwickeltes Script.

Es ist ja auch in dem Sinne kein Slider, sondern eigens das Hintergrundbild soll sich durch das Sliden verändern.

Ich kann Dir gerne per PM einen Link zusenden.

Gruß

[Supermann]

Hallo,

da das ganze anscheinend zu kompliziert ist es zu erklären habe ich mir einen Mootools Code gesucht welcher fadet.

Wie kann ich diesen Code jetzt so abändern, das anstatt gefadet wird ein Slide durchgeführt wird.

Das Bild soll beim überfaren mit dem Cursor von 0px auf -980px in der Horizontalen geslidet werden.

window.addEvent('domready', function() {  
	$$('span.image').each(function(el) {
		el.addEvents({
			mouseenter: function() {
				this.fade(.65);
			},
			mouseleave: function() {
				this.fade(1);
			}
		});
	});
});

Danke für eure Hilfe

Gruß

[tomsky]

Hi,

schau mal hier: http://mootools.net/demos/?demo=Fx.Slide


gruß

[Supermann]

Hallo,

ich habe dort schon geschaut und finde das Beispiel nicht damit zu Vergleichen was ich möchte.

Ich möchte ein Hintergrundbild verschieben und keinen Contend sliden.

Gruß

[tomsky]

Dann suchtst Du entweder sowas:http://wowslider.com/jquery-slider-b...urns-demo.html
oder so etwas: http://joelb.me/scrollpath/

Heiss oder kalt?

[Supermann]

Hallo,

danke für die Aufopferungfolle Hilfe von euch.

Ich habe vielleicht nicht richtig beschrieben was ich möchte.

Ich habe einen Horizontalen Div mit etwas 1000px breite (das ist aber nicht wichtig), in diesem Div sind weitere Divs mit einer festen breite von 140px Horizontal angeordnet in denen sich als Background jeweils ein Produktbild befinden welches eine Breite von 1200px hat, auf diesem befinden sich passend mehere kleinere Bilder die einen Bewegungsablauf darstellen und genau diese Produktbilder die dort in den Divs sind sollen beim überfahren der Maus sliden, so das es aussieht als würde sich das Produkt wie ein Film verhalten.

Im Moment habe ich das per CSS mit Positionsanaben gelöst, so kann ich aber nur das erste also den start und das ende festlegen.

Deshalb benötige ich ein Sript welches die Bilder dann sliden lässt.

Ich hoffe ich habe das jetzt in meiner Laienhaften Art etwas besser beschrieben.

Gruß