Faire un Carrousel 3d

**geforce** · 29/05/2011, 21h44

Bonjour,

J’ai cherchés un composant (une Carousel) quelque chose d'utilisable qui ressemble à sa " http://fr.wix.com/free/website " pas une carrousel plate plus tôt une sorte de menu 3D que l'on peut faire tournes sur 1 seul axe ? Si quelqu'un pourrai aidés m'indiquer un lien sa serai fore, parce que j'ai pas trouver. (Besoin urgent)

Merci d'avance

**danielhagnoul** · 29/05/2011, 21h51

Bonsoir

Une toute petite recherche sur Google avec les termes "jquery plugin carousel 3d" et l'on trouve (je ne connais pas encore) : A 3d Carousel in Javascript.

**geforce** · 30/05/2011, 01h37

Envoyé par danielhagnoul

Bonsoir

Une toute petite recherche sur Google avec les termes "jquery plugin carousel 3d" et l'on trouve (je ne connais pas encore) : A 3d Carousel in Javascript.

mais je ne trouve pas de gratuit et bon (une Carousel si en choisit une en affiche les détails)

**Ibuprofène** · 29/06/2011, 18h29

Bon le post date un peu, mais dans la mesure ou on tombe dessus lorsqu'on recherche "carousel 3D" dans google :

http://www.professorcloud.com/mainsite/carousel.htm

Features :

Works with most browsers (tested on IE6-IE9, Firefox (incl V4), Chrome, Opera, Safari).
Accurate 3d perspective.
Optional auto reflections - no need to modify your images or add server code.
Easy integration with basic valid HTML and a tiny bit of JavaScript.
Small 5Kb (minified) script.
Degrades gracefully with Javascript turned off.
Fully accessible with no CSS or text only browsers.
Works with other plugins, e.g. Slimbox, and preserves your links and mouse events.
Optional mouse wheel support as of version 1.0.2.
It's completely free.

Ca pourra aider les suivants.

**geforce** · 01/07/2011, 18h24

Envoyé par Ibuprofène

Bon le post date un peu, mais dans la mesure ou on tombe dessus lorsqu'on recherche "carousel 3D" dans google :

http://www.professorcloud.com/mainsite/carousel.htm

Ca pourra aider les suivants.

Mais je n’arrive pas a voir comment utiliser les script que l'on télécharge.

il y pas le possibilité de télécharger un exemple complet ?

ps: j'ai aussi trouver ce lien "http://www.flashxml.net/3d-carousel-menu.html?" mais ces en flash ce qui m'interesse pas beaucoup.

**Ibuprofène** · 13/07/2011, 12h41

Mais je n’arrive pas a voir comment utiliser les script que l'on télécharge.

Il te faut charger le fichier js proposé qui se nomme de base cloud-carousel.num.de.version.js et avoir chargé jquery.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<html>
<head>
 
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
 
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="/js/cloud-carousel.1.0.0.js"></script>

Tu créés ensuite un fichier js perso avec les éléments que tu souhaites : carousel integration - partie JavaScript Setup Parameters

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
$(document).ready(function(){
 
	// This initialises carousels on the container elements specified, in this case, carousel1.
	$("#carousel1").CloudCarousel(		
		{			
			xPos: 128,
			yPos: 32,
			buttonLeft: $("#left-but"),
			buttonRight: $("#right-but"),
			altBox: $("#alt-text"),
			titleBox: $("#title-text")
		}
	);
});
 
</script>

Il te faut des éléments css de base pour que le carousel apparaisse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#carousel1{
width: une-largeur-px;
height:une-hauteur-px;
overflow:scroll;
}

carousel integration - partie Example HTML (Le contraire est indiqué dans la partie "CSS Setup", comme quoi aucun élément n'est requis, mais une largeur et une hauteur sont obligatoire. Le overflow:scroll est seulement conseillé)

Il te suffit ensuite de créer ton fichier html qui contient le carousel, les boutons et les titres : carousel integration - partie Example HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <body>
    	<!-- This is the container for the carousel. -->
        <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">            
            <!-- All images with class of "cloudcarousel" will be turned into carousel items -->
            <!-- You can place links around these images -->
            <img class = "cloudcarousel" src="/images/carousel/flags/flag1.png" alt="Flag 1 Description" title="Flag 1 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag2.png" alt="Flag 2 Description" title="Flag 2 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag3.png" alt="Flag 3 Description" title="Flag 3 Title" />
            <img class = "cloudcarousel" src="/images/carousel/flags/flag4.png" alt="Flag 4 Description" title="Flag 4 Title" />
        </div>
 
        <!-- Define left and right buttons. -->
        <input id="left-but"  type="button" value="Left" />
        <input id="right-but" type="button" value="Right" />
 
        <!-- Define elements to accept the alt and title text from the images. -->
        <p id="title-text"></p>
        <p id="alt-text"></p>
    </body>

il y pas le possibilité de télécharger un exemple complet ?

Non, mais tu peux regarder les exemples sur la page, avec firebug par exemple, ou avec la console de google chrome. Ceci dit il n'y en a pas vraiment besoin, regarde plus en détail la page d'intégration, tout y est expliqué.

Faire un Carrousel 3d

jQuery

Vue hybride

Discussions similaires

Partager

Partager