Menu en carrousel qui tourne par WillyAva - page 1

En allant sur le site de la demo, t'as un onglet documentation, puis carousel, c'est pas plus complique que ca

Juste un peu de deduction, puisque sur ton lien il y avait demo, cela voulait dire qu'il devait y avoir le code associe quelque part ^^. Faut que tu télécharges la librairie interface : http://interface.eyecon.ro/interface/interface_1.2.zip

La tu récupères interface.js et dans le dossier compressed tu récupères carousel.js et iutil.js

Tu récupères aussi jQuery : http://interface.eyecon.ro/jquery/jquery.js (c'est une vieille version mais comme interface a été développé a ce moment la au moins t'es sur que ca marche)

tu inclus tout ca dans ta page, et tu peux tester le code de la documentation

Le problème par contre c'est que cette librairie n'a pas été mise a jour depuis plus de 3ans, mais tu en pourras en changer quand elle sera obsolète.

Merci beaucoup de ces précisions

Je teste ça tout de suite !

EDIT :

Bon finalement ça ne fonctionne pas ...
Les images restent dans le rectangle, les unes par dessus les autres, sans bouger :euh:

Voilà mes codes :

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<title>Menu Carrousel</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" href="carrousel.css" type="text/css" media="screen" />
	<script type="text/javascript" src="vieuxjQuery.js"></script>
	<script type="text/javascript" src="interface.js"></script>
	<script type="text/javascript" src="carousel.js"></script>
</head>

<body>
	<div id="carousel">
		<a href="" title=""><img src="raton3.jpg" width="100%" /></a>
		<a href="" title=""><img src="raton3.jpg" width="100%" /></a>
		<a href="" title=""><img src="raton3.jpg" width="100%" /></a>
		<a href="" title=""><img src="raton3.jpg" width="100%" /></a>
		<a href="" title=""><img src="raton3.jpg" width="100%" /></a>
	</div>
 
 </body>
 </html>

CSS

#carousel {
	width: 700px;
	height: 150px;
	background-color: #111;
	position: absolute;
	top: 200px;
	left: 100px;
}
 
#carousel a {
	position: absolute;
	width: 110px;
}

/**
 * Interface Elements for jQuery
 * 3D Carousel
 * 
 * http://interface.eyecon.ro
 * 
 * Copyright (c) 2006 Stefan Petre
 * Dual licensed under the MIT (MIT-LICENSE.txt) 
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 */
/**
 * Created a 3D Carousel from a list of images, with reflections and animated by mouse position
 * 
 * @example window.onload = 
 *			function()
 *			{
 *				$('#carousel').Carousel(
 *					{
 *						itemWidth: 110,
 *						itemHeight: 62,
 *						itemMinWidth: 50,
 *						items: 'a',
 *						reflections: .5,
 *						rotationSpeed: 1.8
 *					}
 *				);
 *			}
 * HTML
 *			<div id="carousel">
 *				<a href="" title=""><img src="" width="100%" /></a>
 *				<a href="" title=""><img src="" width="100%" /></a>
 *				<a href="" title=""><img src="" width="100%" /></a>
 *				<a href="" title=""><img src="" width="100%" /></a>
 *				<a href="" title=""><img src="" width="100%" /></a>
 *			</div>
 * CSS
 *			#carousel
 *			{
 *				width: 700px;
 *				height: 150px;
 *				background-color: #111;
 *				position: absolute;
 *				top: 200px;
 *				left: 100px;
 *			}
 *			#carousel a
 *			{
 *				position: absolute;
 *				width: 110px;
 *			}
 *
 * @desc Creates a 3D carousel from all images inside div tag with id 'carousel'
 *
 *
 * @name 3D Carousel
 * @description Created a 3D Carousel from a list of images, with reflections and animated by mouse position
 * @param Hash hash A hash of parameters
 * @option String items items selection
 * @option Integer itemWidth the max width for each item
 * @option Integer itemHeight the max height for each item
 * @option Integer itemMinWidth the minimum width for each item, the height is automaticaly calculated to keep proportions
 * @option Float rotationSpeed the speed for rotation animation
 * @option Float reflectionSize the reflection size a fraction from items' height
 *
 * @type jQuery
 * @cat Plugins/Interface
 * @author Stefan Petre
 */
jQuery.iCarousel = {
	
	build : function(options)
	{
		return this.each(
			function()
			{
				var el = this;
				var increment = 2*Math.PI/360;
				var maxRotation = 2*Math.PI;
				if(jQuery(el).css('position') != 'relative' && jQuery(el).css('position') != 'absolute') {
					jQuery(el).css('position', 'relative');
				}
				el.carouselCfg = {
					items : jQuery(options.items, this),
					itemWidth : options.itemWidth,
					itemHeight : options.itemHeight,
					itemMinWidth : options.itemMinWidth,
					maxRotation : maxRotation,
					size : jQuery.iUtil.getSize(this),
					position : jQuery.iUtil.getPosition(this),
					start : Math.PI/2,
					rotationSpeed : options.rotationSpeed,
					reflectionSize : options.reflections,
					reflections : [],
					protectRotation : false,
					increment: 2*Math.PI/360
				};
				el.carouselCfg.radiusX = (el.carouselCfg.size.w - el.carouselCfg.itemWidth)/2;
				el.carouselCfg.radiusY =  (el.carouselCfg.size.h - el.carouselCfg.itemHeight - el.carouselCfg.itemHeight * el.carouselCfg.reflectionSize)/2;
				el.carouselCfg.step =  2*Math.PI/el.carouselCfg.items.size();
				el.carouselCfg.paddingX = el.carouselCfg.size.w/2;
				el.carouselCfg.paddingY = el.carouselCfg.size.h/2 - el.carouselCfg.itemHeight * el.carouselCfg.reflectionSize;
				var reflexions = document.createElement('div');
				jQuery(reflexions)
					.css(
						{
							position: 'absolute',
							zIndex: 1,
							top: 0,
							left: 0
						}
					);
				jQuery(el).append(reflexions);
				el.carouselCfg.items
					.each(
						function(nr)
						{
							image = jQuery('img', this).get(0);
							height = parseInt(el.carouselCfg.itemHeight*el.carouselCfg.reflectionSize);
							if (jQuery.browser.msie) {
								canvas = document.createElement('img');
								jQuery(canvas).css('position', 'absolute');
								canvas.src = image.src;				
								canvas.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=60, style=1, finishOpacity=0, startx=0, starty=0, finishx=0)';
					
							} else {
								canvas = document.createElement('canvas');
								if (canvas.getContext) {
									context = canvas.getContext("2d");
									canvas.style.position = 'absolute';
									canvas.style.height = height +'px';
									canvas.style.width = el.carouselCfg.itemWidth+'px';
									canvas.height = height;
									canvas.width = el.carouselCfg.itemWidth;
									context.save();
						
									context.translate(0,height);
									context.scale(1,-1);
									
									context.drawImage(
										image, 
										0, 
										0, 
										el.carouselCfg.itemWidth, 
										height
									);
					
									context.restore();
									
									context.globalCompositeOperation = "destination-out";
									var gradient = context.createLinearGradient(
										0, 
										0, 
										0, 
										height
									);
									
									gradient.addColorStop(1, "rgba(255, 255, 255, 1)");
									gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");
						
									context.fillStyle = gradient;
									if (navigator.appVersion.indexOf('WebKit') != -1) {
										context.fill();
									} else {
										context.fillRect(
											0, 
											0, 
											el.carouselCfg.itemWidth, 
											height
										);
									}
								}
							}
							
							el.carouselCfg.reflections[nr] = canvas;
							jQuery(reflexions).append(canvas);
						}
					)
					.bind(
						'mouseover',
						function(e)
						{
							el.carouselCfg.protectRotation = true;
							el.carouselCfg.speed = el.carouselCfg.increment*0.1 * el.carouselCfg.speed / Math.abs(el.carouselCfg.speed);
							return false;
						}
					)
					.bind(
						'mouseout',
						function(e)
						{
							el.carouselCfg.protectRotation = false;
							return false;
						}
					);
				jQuery.iCarousel.positionItems(el);
				el.carouselCfg.speed = el.carouselCfg.increment*0.2;
				el.carouselCfg.rotationTimer = window.setInterval(
					function()
					{
						el.carouselCfg.start += el.carouselCfg.speed;
						if (el.carouselCfg.start > maxRotation)
							el.carouselCfg.start = 0;
						jQuery.iCarousel.positionItems(el);
					},
					20
				);
				jQuery(el)
					.bind(
						'mouseout',
						function()
						{
							el.carouselCfg.speed = el.carouselCfg.increment*0.2 * el.carouselCfg.speed / Math.abs(el.carouselCfg.speed);
						}
					)
					.bind(
						'mousemove',
						function(e)
						{
							if (el.carouselCfg.protectRotation == false) {
								pointer = jQuery.iUtil.getPointer(e);
								mousex =  el.carouselCfg.size.w - pointer.x + el.carouselCfg.position.x;
								el.carouselCfg.speed = el.carouselCfg.rotationSpeed * el.carouselCfg.increment * (el.carouselCfg.size.w/2 - mousex) / (el.carouselCfg.size.w/2);
							}
						}
					);
			}
		);
	},

	positionItems : function(el)
	{
		el.carouselCfg.items.each(
			function (nr)
			{
				angle = el.carouselCfg.start+nr*el.carouselCfg.step;
				x = el.carouselCfg.radiusX*Math.cos(angle);
				y = el.carouselCfg.radiusY*Math.sin(angle) ;
				itemZIndex = parseInt(100*(el.carouselCfg.radiusY+y)/(2*el.carouselCfg.radiusY));
				parte = (el.carouselCfg.radiusY+y)/(2*el.carouselCfg.radiusY);
				
				width = parseInt((el.carouselCfg.itemWidth - el.carouselCfg.itemMinWidth) * parte + el.carouselCfg.itemMinWidth);
				height = parseInt(width * el.carouselCfg.itemHeight / el.carouselCfg.itemWidth);
				this.style.top = el.carouselCfg.paddingY + y - height/2 + "px";
	     		this.style.left = el.carouselCfg.paddingX + x - width/2 + "px";
	     		this.style.width = width + "px";
	     		this.style.height = height + "px";
	     		this.style.zIndex = itemZIndex;
				el.carouselCfg.reflections[nr].style.top = parseInt(el.carouselCfg.paddingY + y + height - 1 - height/2) + "px";
				el.carouselCfg.reflections[nr].style.left = parseInt(el.carouselCfg.paddingX + x - width/2) + "px";
				el.carouselCfg.reflections[nr].style.width = width + "px";
				el.carouselCfg.reflections[nr].style.height = parseInt(height * el.carouselCfg.reflectionSize) + "px";
			}
		);
	}
};
jQuery.fn.Carousel = jQuery.iCarousel.build;

Bien sûr, étant débutant en Js et jQuery, je n'y comprend rien ...
C'est pas faute d'essayer mais je trouve son code imbuvable et incompréhensible ... o_O

Vous remarquerez que mon html et mon css sont ceux qu'il met en commentaire dans sa librairie, ça devait être la pour quelque chose

Dans mon html, je charge d'abord la vieille version de jQuery comme tu me l'a conseillé micle (j'ai essayé avec la nouvelle mais ça ne fonctionne pas non plus), puis la librairie interface.js, puis mon carousel.js

L'erreur que firebug m'indique est que jQuery n'est pas défini ...
Il me donne la source de interface.js et la ligne où le code est écrit (tout est sur une seule ligne).

Si quelqu'un est apte à m'aider

WillyAva

7 juillet 2010 à 11:05:22

Bonjour à tous,

Je suis en train de faire un site Professionnel et j'aimerai créer dessus un menu de la même manière que ce carrousel : Carrousel qui tourne.
A la place de mettre des images, seront mis mes titres pour accéder aux différentes pages.

J'ai cherché pendant un moment des tutos pour faire ce genre de chose mais les carrousels que je vois dans ceux ci ne sont pas du tout pareil. ( http://www.grafikart.fr/tutoriels/carrousel-javascript-87 ils sont tous comme celui de la démo

).

Quelqu'un pourrait-il me conseiller soit un tuto, soit comment je dois m'y prendre ?

Merci de votre aide

miclebowski

7 juillet 2010 à 12:58:49

Salut, pourquoi ne pas faire tes titres en image (je sais niveau SEO c'est pas top, mais ce sera toujours mieux que du flash

).

My 2 cents...

PS : Un autre caroussel 3D sympa : http://www.professorcloud.com/mainsite/carousel.htm

7 juillet 2010 à 13:33:22

Oui pourquoi, mais ça ne me donne pas la manière de recréer le carrousel

As tu une idée à ce sujet ?

Le carrousel que tu me propose me parait inadapté pour un Menu.

Merci de ton aide

7 juillet 2010 à 13:40:36

Et dieu inventa la documentation : http://interface.eyecon.ro/docs/carousel

Hallelujah

7 juillet 2010 à 13:56:08

Omagad !

Mais t'as eu ça où ?!

Si je met ça dans ma page ça devrait fonctionner si je met les bons paramètres du coup ? :-°

7 juillet 2010 à 14:51:03

7 juillet 2010 à 15:18:20

Je ne peux pas utiliser la dernière version de jQuery si je veux mettre un tel menu alors ?

Quand tu parles d'une librairie qui n'a pas été mise a jour depuis plus de 3ans, c'est de jQuery que tu parles, ou de Interface ?

Du coup, Interface ne serait pas plutot un plugin ?
C'est pas pour être chiant sur le mots c'est surtout pour apprendre

7 juillet 2010 à 15:37:00

De Interface bien sur, tu peux tester la dernière version de jQuery qui lui est mis a jour très régulièrement, mais c'est possible qu'il y ait des bugs, il faudra que tu testes bien.

Pour être précis sur les mots, Interface est plus qu'un plugin, c'est une bibliothèque de plugins pour jQuery. En fait Interface, c'est un peu l'ancêtre de jQuery UI. On peut donc parler de librairie dans ce cas la, car comme jQuery apporte des fonctions a Javascript, alors Interface apporte des fonctions a jQuery.

Bref, je pense qu'on peut parler comme pour jQuery UI de librairie (ca intéresserait d'avoir des avis divergents argumentes soit dit en passant ^^)

7 juillet 2010 à 15:42:44

8 juillet 2010 à 16:56:03

Petit Up

9 juillet 2010 à 14:18:09

Salut, 2 choses :
_ Inclus iutil.js comme je te l'avais precise dans mon post.
_ Il faut que tu mettes avant la fermeture de ta balise <head> ca :

<script type="text/javascript">
$(document).ready(function()
	{
		$('#carousel').Carousel(
			{
				itemWidth: 110,
				itemHeight: 62,
				itemMinWidth: 50,
				items: 'a',
				reflections: .5,
				rotationSpeed: 1.8
			}
		);
	});
</script>

Menu en carrousel qui tourne

Menu en carrousel qui tourne

Supprimer

Modérer

Signaler le message aux modérateurs