IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Faire un Carrousel 3d


Sujet :

jQuery

  1. #1
    Membre éprouvé
    Avatar de geforce
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Janvier 2010
    Messages
    1 055
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2010
    Messages : 1 055
    Par défaut 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

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre éprouvé
    Avatar de geforce
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Janvier 2010
    Messages
    1 055
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2010
    Messages : 1 055
    Par défaut
    Citation Envoyé par danielhagnoul Voir le message
    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)

  4. #4
    Membre confirmé
    Inscrit en
    Septembre 2009
    Messages
    43
    Détails du profil
    Informations forums :
    Inscription : Septembre 2009
    Messages : 43
    Par défaut
    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.

  5. #5
    Membre éprouvé
    Avatar de geforce
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Janvier 2010
    Messages
    1 055
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2010
    Messages : 1 055
    Par défaut
    Citation Envoyé par Ibuprofène Voir le message
    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.

  6. #6
    Membre confirmé
    Inscrit en
    Septembre 2009
    Messages
    43
    Détails du profil
    Informations forums :
    Inscription : Septembre 2009
    Messages : 43
    Par défaut
    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é.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Comment faire tourner mon carrousel automatiquement
    Par regnierjoffrey dans le forum jQuery
    Réponses: 2
    Dernier message: 23/07/2011, 13h40
  2. comment faire un carrousel ?
    Par ludopene dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 04/03/2009, 11h49
  3. faire un selection dans une image aves les APIs
    Par merahyazid dans le forum C++Builder
    Réponses: 3
    Dernier message: 30/04/2002, 10h44
  4. Comment faire pour créer un bitmap
    Par GliGli dans le forum C++Builder
    Réponses: 2
    Dernier message: 24/04/2002, 15h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo