Ergebnis 1 bis 8 von 8

Thema: Background Sliden

  1. #1
    Alter Contao-Hase Avatar von Supermann
    Registriert seit
    17.02.2010.
    Ort
    Löhne
    Beiträge
    1.293

    Standard Background Sliden

    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.

    Code:
    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ß
    Geändert von Supermann (09.10.2012 um 23:30 Uhr)

  2. #2
    Contao-Urgestein
    Registriert seit
    10.07.2010.
    Beiträge
    4.403
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Suppermann
    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.

  3. #3
    Alter Contao-Hase Avatar von Supermann
    Registriert seit
    17.02.2010.
    Ort
    Löhne
    Beiträge
    1.293

    Standard

    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ß

  4. #4
    Alter Contao-Hase Avatar von Supermann
    Registriert seit
    17.02.2010.
    Ort
    Löhne
    Beiträge
    1.293

    Standard

    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.

    Code:
    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ß

  5. #5
    Contao-Nutzer
    Registriert seit
    11.02.2011.
    Ort
    Berlin
    Beiträge
    71

    Standard

    Hi,

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


    gruß

  6. #6
    Alter Contao-Hase Avatar von Supermann
    Registriert seit
    17.02.2010.
    Ort
    Löhne
    Beiträge
    1.293

    Standard

    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ß

  7. #7
    Contao-Nutzer
    Registriert seit
    11.02.2011.
    Ort
    Berlin
    Beiträge
    71

    Standard

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

    Heiss oder kalt?

  8. #8
    Alter Contao-Hase Avatar von Supermann
    Registriert seit
    17.02.2010.
    Ort
    Löhne
    Beiträge
    1.293

    Standard

    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ß

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •