Hi zusammen, bissel umfangreiches und grosses Thema. Kurz die Situation. Ziel ist ein Auto Konfigurator, wo man Modell, Farbe und Felgen wechseln kann. Im Prinzip werden mit JS und Mootools nur Bilder in einem Div ausgetauscht bzw. Pfade zu den Bildern. Mein Entwickler ist wohl nicht mehr dabei und ich kann leider nicht genug JS fuer diese Sache programmieren. Im Prinzip ist der Konfigurator schon zu 80% fertig, es fehlen lediglich noch 2 Sachen.
1. Die aktuellen Pespektive soll per Slide Effekt in die andere gewechselt werden. (FS fuer FrontSide, BS fuer BackSide). Beide Bilder befinden sich in einem Verzeichnis. Es muss also nur fs.jpg durch bs.jpg ersetzt werden oder umgekehrt. Das sollte per klick auf einen Button geschehen. Natuerlich muss dazu erstmal die aktuell geladene Datei ausgelesen werden.
2. Momentan stehen lediglich 5 Autos zur Verfuegung. Langfristig sollen noch weitere folgen. Die Beste und einfachste Moeglichkeit, die Fahrzeuge in einem Menu unterzubringen, waere ein Slide Menu wie das hier von SonyStyle oder so aehnlich. http://www.sony.co.uk/section/home Es sollen (wie der Wechsel der Perspektive) einfach die aktuellen 5 Divs ausgeslidet und die naechsten 5 eingeslidet werden.
Screenshot, sowie JS-Code fuege ich hier mit ein. Falls jemand das gesamte Verz. zum testen moechte, kann ich es gerne als zip per Mail senden.
Hoffe sehr ihr koennt mir helfen. Schaetze, das die Slide Sache mit der Pespektive ca. 5 Zeilen Code sind, die an einer bestimmten Stelle eingefuegt werden muessen (irgendwas mit addEvent). Die Sache mit dem Menue ist da vermutlich schon etwas mehr. Zeige mich aber gerne erkenntlich.
Viele Gruesse X4all
Hier der JS Mootools Code
1. Die aktuellen Pespektive soll per Slide Effekt in die andere gewechselt werden. (FS fuer FrontSide, BS fuer BackSide). Beide Bilder befinden sich in einem Verzeichnis. Es muss also nur fs.jpg durch bs.jpg ersetzt werden oder umgekehrt. Das sollte per klick auf einen Button geschehen. Natuerlich muss dazu erstmal die aktuell geladene Datei ausgelesen werden.
2. Momentan stehen lediglich 5 Autos zur Verfuegung. Langfristig sollen noch weitere folgen. Die Beste und einfachste Moeglichkeit, die Fahrzeuge in einem Menu unterzubringen, waere ein Slide Menu wie das hier von SonyStyle oder so aehnlich. http://www.sony.co.uk/section/home Es sollen (wie der Wechsel der Perspektive) einfach die aktuellen 5 Divs ausgeslidet und die naechsten 5 eingeslidet werden.
Screenshot, sowie JS-Code fuege ich hier mit ein. Falls jemand das gesamte Verz. zum testen moechte, kann ich es gerne als zip per Mail senden.
Hoffe sehr ihr koennt mir helfen. Schaetze, das die Slide Sache mit der Pespektive ca. 5 Zeilen Code sind, die an einer bestimmten Stelle eingefuegt werden muessen (irgendwas mit addEvent). Die Sache mit dem Menue ist da vermutlich schon etwas mehr. Zeige mich aber gerne erkenntlich.
Viele Gruesse X4all
Hier der JS Mootools Code
Code:
//Seite einblenden
// Effekt-Objekt erstellen
function einblenden(){
var meinEffekt = new Fx.Tween('wrapper', {
'duration': 2000
});
// Effekt starten!
meinEffekt.start('opacity', 0, 1);
}
<!-- Setting the default car -->
window.addEvent('domready', function() {
var car = { // set default car
comp:'lo',
ccar:'cls-c219',
color:'silver',
rim:'rs8',
pers:'fs'
};
var cars={ // set all cars
0:'cls-c219',
1:'e-w212',
2:'s-w220',
3:'c-w204',
4:'m-w164'
};
var carWrap = $('car-models');
var carSlots = carWrap.getChildren();
Object.each(cars, function(i,k,o){
console.log(cars[k]);
carSlots[k].addEvent('click', function(){
car.ccar = i;
getcar(car);
}).set('id', cars[k]);
});
var compWrap = $('car');
compWrap.getChildren().forEach(function(item){
item.addEvent('click', function(){
car.comp = item.get('id');
getcar(car);
});
});
var colorWrap = $('color');
colorWrap.getChildren().forEach(function(item){
item.addEvent('click', function(){
car.color = item.get('id');
getcar(car);
});
});
var rimWrap = $('rims');
rimWrap.getChildren().forEach(function(item){
item.addEvent('click', function(){
car.rim = item.get('id');
getcar(car);
//req.post({choice:this.get('id')}).send();
//console.log('clicked ',this.get('id'));
});
});
});
function changeMain(path){
console.log('fading out!');
var fader = new Fx.Morph($('main-car'),{duation: 500, transition: Fx.Transitions.Expo.easeOut});
fader.start({opacity: 0}).chain(function() {
console.log('pt2');
$('main-car').setStyle('background-image', 'url("'+path+'")');
this.start({opacity: 1});
});
}
function getcar(param){
var imgbase = ''; // format must be 'images/'
var comp = param.comp;
var ccar = param.ccar;
var color = param.color;
var rim = param.rim;
var pers = param.pers;
var path = imgbase + comp + '/' + ccar + '/' + color + '/' + rim + '/' + pers + '.jpg';
console.log(path);
new Asset.image(path,{
onLoad: function(){
changeMain(path);
},
onError: function(){
path = imgbase + 'no_car.jpg';
changeMain(path);
}
});
}Anhänge
Zuletzt bearbeitet:
