Faire un Carrousel 3d [Résolu]

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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>

Citation:

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é.

29/05/2011, 21h44	#1
geforce Membre habitué Développeur informatique Inscription : janvier 2010 Messages : 468 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Développeur informatique Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : janvier 2010 Messages : 468 Points : 149 Points : 149	Faire un Carrousel 3d 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
	00

29/05/2011, 21h51	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email