taille image 3d carrousel
Posté : 22 mai 2011, 14:01
Bonjour tout le monde,
Je suis en train de refaire le menu de mon site, et j'ai installé "3d carousel" qui fonctionnent avec mootools.
Voici l'adresse du module en question pour ceux que ça pourrait intéréssé : http://www.andrewsellick.com/75/simple [...] sing-mootools
J'ai une question cependant; comment faire pour que mes images aient la taille que je souhaite, pour le moment elles sont toutes petites..(je souhaiterais les mettrent a au moins 100px)
pourtant niveau css je suis a 100%
A moins qu'il faille modifier cela dans 3dcarousel.js
J'oubliais; la taille du module n'est pas un problème, ça m'arrangerait même s'il faisait 900px de largeur; je l'ai d'ailleurs modifié, mais les images restent petites et le carrousel n'est plus centré dans son module
PS : je test avec des images en 300 x 200
Voici, donc si quelqu'un pouvait me dire comment procéder ce serait super sympa.
Bonne journée
Je suis en train de refaire le menu de mon site, et j'ai installé "3d carousel" qui fonctionnent avec mootools.
Voici l'adresse du module en question pour ceux que ça pourrait intéréssé : http://www.andrewsellick.com/75/simple [...] sing-mootools
J'ai une question cependant; comment faire pour que mes images aient la taille que je souhaite, pour le moment elles sont toutes petites..(je souhaiterais les mettrent a au moins 100px)
pourtant niveau css je suis a 100%
#carousel{
background-color:#000000;
width:700px;
height:400px;
position:relative;
border:1px solid #FFFFFF;
}
img{
width:100%;
height:auto;
border:0px solid #FFFFFF;
display:block;
}A moins qu'il faille modifier cela dans 3dcarousel.js
Code : Tout sélectionner
var count = 0;
var baseSpeed = 0.05;
var radiusX = 190;
var radiusY = 40;
var centerX = 300;
var centerY = 190;
var speed = 0.3;
var imageDivs = '';
var numberOfElements = 0;
var carousel = '';
var speedTest = '';
window.addEvent('domready', function(){
carousel = $('carousel');
speedTest = $('speedTest');
imageDivs = carousel.getElementsByTagName("div");
numberOfElements = imageDivs.length;
setInterval('startCarousel()',40);
carousel.addEvent('mousemove', onMouseMove.bindWithEvent( carousel ));
});
function onMouseMove( evt ) {
tempX = evt.client.x;
speed = (tempX - centerX) / 2500;
}
function startCarousel(){
for(i=0; i < numberOfElements; i++){
angle = i * ( Math.PI * 2 ) / numberOfElements;
imageDivsStyle = imageDivs[ i ].style;
imageDivsStyle.position='absolute';
posX = ( Math.sin( count * ( baseSpeed * speed ) + angle )* radiusX + centerX );
posY = ( Math.cos( count * ( baseSpeed * speed ) + angle )* radiusY + centerY );
imageDivsStyle.left = posX+"px";
imageDivsStyle.top = posY+"px"
imageDivWidth = posY/3;
imageDivZIndex = Math.round(imageDivWidth)+100;
imageDivsStyle.width = imageDivWidth+'px';
imageDivsStyle.zIndex = imageDivZIndex;
angle += speed;
}
count++
}J'oubliais; la taille du module n'est pas un problème, ça m'arrangerait même s'il faisait 900px de largeur; je l'ai d'ailleurs modifié, mais les images restent petites et le carrousel n'est plus centré dans son module
PS : je test avec des images en 300 x 200
Voici, donc si quelqu'un pouvait me dire comment procéder ce serait super sympa.
Bonne journée