Faire un Carrousel 3d

Version imprimable

29/05/2011, 21h44
geforce

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
29/05/2011, 21h51
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.
30/05/2011, 01h37
geforce

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)
29/06/2011, 18h29
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

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.
01/07/2011, 18h24
geforce

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.

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:

1 2 3 4 5 6 7 8 9 <html> <head>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <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:

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:

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <body>  <div id = "carousel1" style="width:256px; height:128px;background:#000;overflow:scroll;">   <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>  <input id="left-but" type="button" value="Left" /> <input id="right-but" type="button" value="Right" />  <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é.