vlar
Messages postés2289Date d'inscriptionvendredi 17 août 2007StatutMembreDernière intervention29 novembre 2013
-
26 mars 2010 à 11:30
vlar
Messages postés2289Date d'inscriptionvendredi 17 août 2007StatutMembreDernière intervention29 novembre 2013
-
26 mars 2010 à 17:35
Bonjour à la communauté
Je deviens dingue sur l'insertion d'un caroussel 3D sur ma page.
Mes problèmes sont les suivant :
-position dans la page : il se superpose au contenu futur de mon site
-il tourne trop vite en mode continuous et le controle de la souris s'effectue sur toute la page ce qui est fatigant
---> ce que je veux c'est le positionner juste en dessous de la bannière et au dessus du contenu et en plus petit que celui affiché par défaut
---> je souhaiterais que ce soit la souris qui controle la rotation mais pas trop vite et uniquement lorsque la souris passe sur le caroussel et pas ailleurs . Ainsi, il faudrait definir un "mopuseover" limité à une portion de la page
Je vous serai immensément reconnaissant de jeter un oeil sur le script suivant pour m'expliquer ce que je dois modifier/ajouter
$imgs = $('img', $this).hide(); // set variable with carousel images; hide for now
$texts = $('span', $('#carouselText')).hide(); // set variable with carousel text boxes; hide for now
if (opt.textBox && !$texts.size()) alert('<div id="carouselText" /> + <span>\'s. . . do not exist. either add them or set textBox option to 0');
items = $imgs.size(); // number of icons in carousel
numSlots = items * opt.padding; // in order for the movement to flow smoothly, there are additional 'slots' in the carousel which the images will pace through
if (opt.padding == 0) opt.padding = 1; // padding must be at least 1
$imgs.each(function(i) { new $.imageSetUp(this, i) }); // setup images
new $.carouselSetup(); // setup carousel
}
});
$.imageSetUp = function(im, _index) {
im.orig_w = $(im).width(), im.orig_h = $(im).height(); // save the original dimensions; used when image is clicked
var w_h = resize( im.orig_w, 128, im.orig_h, 108).split('|'); // calculate w/h of images in carousel
im.h = w_h[1], im.w = w_h[0];
im.slot = _index * opt.padding; // position of the image in the carousel
im.angle = parseInt(( _index * opt.padding ) * (( Math.PI * 2 ) / numSlots )*1000)/1000; // original angle of the image
// javascript Motion Tween by PHILIPPE MAEGERMAN; very similar to tweening in Flash.
// check out the full details at his site: http://jstween.blogspot.com/ t1 = new Tween(new Object(), 'xyz', Tween.regularEaseInOut, 0, 10000, 10000);
im.slot = (im.slot == numSlots - 1) ? 0: im.slot++; // if image is in last slot, set as first slot; else advance 1 slot
_t = Math.sin(im.angle) * opt.radiusY + opt.centerY; // calculate top positioning
_s = ((_t - opt.perspective) / (opt.centerY + opt.radiusY - opt.perspective)); // calculate size of image based on position in carsousel
$(im).css({ // set css values for image
top: _t,
left: Math.cos(im.angle) * opt.radiusX + opt.centerX, // calculate left positioning
width: im.w * _s, // multiply image size by newly calculated size
height: im.h * _s,
zIndex: Math.round(_t)+100, // z-index makes front images fully visible
opacity: (opt.fadeEffect == 1) ? Math.sin(im.angle) : 1 }); // if fadeEffect is set, calculate opacity based on location in carousel
function clickOn() { // actions when image in carousel is clicked
var elem = this;
t1.stop(); // stop the Tween motion
$('#buttonwrapper:visible').fadeOut(); // hide the buttons
$cloned = // clone the image clicked and leave the original in place (this seemed easier than pulling the orig out of place)
$(this).clone().prependTo($this).click(function() { // add to carousel, when clicked again . . .
$imgs.fadeIn(); // show the carousel images
$(this) // animate back to carousel slot
.animate({
left: $(elem).position().left + 'px', // change position
top: $(elem).position().top + 'px',
width: $(elem).width() + 'px', // and size
height: $(elem).height() + 'px'
}, function() {
$(this).remove(); // remove the cloned image,
$(elem).one('click', clickOn); // rebind the image click event,
t1.start(); // and restart carousel
});
$('#text:visible').fadeOut(); // if showing, hide the text box
$('#buttonwrapper:hidden').fadeIn(); // if hidden, show the buttons
});
(opt.textBox) ? elem.textAnimateOn($cloned) : elem.animateOn($cloned); // animate the clone; enlarge or position to side of text box
};
$.carouselSetup.defaults = {
control: 'continuous', // 'button', 'mouse', or 'continuous' control
speed: 1, // speed of mouse or button. use scale of 1-5
radiusX: 250, // x radius of the carousel
radiusY: 30, // y radius of the carousel
centerX: 0, // x position on the screen
centerY: 250, // y position on the screen
perspective: 120, // perspective of the image as it travels around the carousel
padding: 24, // the more padding, the more precise the incremental movement,
// however this also create a lot more calculations
// to keep icons evenly spaced, the num of icons should be a multiple of the padding
fadeEffect: 0, // fade icons as cycle to the back of the carousel
textBox: 0 // 1 = display text area for each icon, 0 = no display
};