problémes de carrousel

Par arckaliann, il y a 12 ans

Javascript

Bonsoir,

je suis le tuto sur le carrousel que je trouve très bien,j'ai repris l'idée d'une personne qui fessait apparaitre les images venant d'une bdd,

le problèmes est que quand j'appuie sur le bouton l'image apparait pas,j'ai regardé avec firebug le display reste sur none:

var carrousel={

nbSlide:0,
nbCurrent:1,
elemCurrent:null,
elem:null,
timer:null,

    init:function(elem){
        this.nbSlide=elem.find(".slide").length;
        //créer la pagination
        elem.append('<div class="navigation"></div>');
        for(var i=1;i<=this.nbSlide;i++){
        elem.find(".navigation").append("<span>"+i+"</span>");
        }
        elem.find(".navigation span").click(function(){carrousel.gotoSlide($(this).text());})

        //initialisation du carrousel
        this.elem=elem;
        elem.find(".slide").hide();
        elem.find(".slide:first").show();
        this.elemCurrent=elem.find(".slide:first");
    },
    gotoSlide : function(num){
     this.elemCurrent.fadeOut();
     this.elem.find('#slide'+num).fadeIn();
     this.nbCurrent = num;
     this.elemCurrent= this.elem.find('#slide'+num);
    }

echo"<div id=\"carrousel\">";

                    while($data=$query->fetch())
                    {

                echo"<div id=\"slide".$data"dossier_id"]."\"class =\"slide\">
                        <div class=\"visu\">
                            <img src=\"../image/dossier/".$data'dossier_image']."\"/>
                        </div>
                    </div>";    
                    }
                echo'</div>';?>

merci pour l'aide

12 réponses

Nonathy, il y a 12 ans

Une autre personne que toi avait le même problème que toi (sauf qu'il n'utilisait pas la fonction bdd), je te redirige donc vers le message http://www.grafikart.fr/forum/topic/9044#comment31457

Pour ce qui est de la fonction d'importation des images depuis ta bdd, il ne devrait pas y avoir de problèmes :)

arckaliann, il y a 12 ans

merci pour la réponse mais je suis un vrai âne en js,j'ai repris votre code sur l'autre poste mais de un :l'unique image est décalé sur la gauche et les autres images apparaissent toujours pas de plus le span deviens folle

merci pour votre aide

Nonathy, il y a 12 ans

Peux-tu coller ton index.html et ton style.css ?

arckaliann, il y a 12 ans

le css est le même que celui du tuto a moins que vous vouliez tout le css complet de la page,pour l'index bin sa va pas vous en apprendre beaucoup car j'inclue beaucoup je peux vous donner la requête qui génère les images

<?php

                    $query=$db->prepare('SELECT dossier_image,dossier_id
                                                      FROM dossier_image

                                                      WHERE dossier_nom="batman"
                                                      ');

                $query->execute()or die(print_r($db->errorinfo()));

            echo"<div id=\"carrousel\">";

                    while($data=$query->fetch())
                    {

                echo"<div id=\"slide".$data"dossier_id"]."\"class =\"slide\">
                        <div class=\"visu\">
                            <img src=\"../image/dossier/".$data'dossier_image']."\"/>
                        </div>
                    </div>";    
                    }
                echo'</div>';?>
      </div>
arckaliann, il y a 12 ans

ok merci beaucoup

Nonathy, il y a 12 ans

Il y avait en effet une erreur de ma part dans le .js, j'ai du enlever l'arrêt de l'image lors du survol qui bug, je dois voir pour le refaire

<u>Voici le carrousel.js sans bug</u>

var carrousel = {
    nbSlide : 0,
    nbCurrent : 1,
    elemCurrent : null,
    elem : null,
    temps : 5000,
    timer : null,
    init : function(elem,duration){
        if(duration > 0){
            this.temps = duration;
        }
        this.nbSlide = $(elem).find(".slide").length;
        // Créer la pagination
        $(elem).append('<div class="navigation"></div>');
        for(var i=1;i<=this.nbSlide;i++){
            $(elem).find('.navigation').append('<span>'+i+'</span>');
        }
        $(elem).find('.navigation span').click(function(){
            carrousel.gotoSlide($(this).text());
        });

        // Initialisation du carrousel
        this.elem = elem;
        $(elem).find('.slide').hide();
        $(elem).find('.slide:first').show();
        this.elemCurrent = $('.slide:first');
        $('.navigation span:first').addClass('active');
        // Création du timer
        carrousel.play();

        // Stop quand on passe sur les images (Encore un peu bugé)
         // $(elem).mouseover(carrousel.stop);
   // $(elem).mouseout(carrousel.play);
        // Next Et Prev quand on clique sur les boutons
        $('.next').click(function(){
            carrousel.next();
            carrousel.play();
            return false;
        });
        $('.prev').click(function(){
            carrousel.prev();
            carrousel.play();
            return false;
        });

    },
    gotoSlide : function(num){
        if(num==this.nbCurrent){ return false; }
        /* Animation en FadeIn/FadeOut
        this.elemCurrent.fadeOut('slow');
        $('#slide'+num).fadeIn('slow');
        */
        /* Animation en Slide */
        var sens = 1;
        if(num<this.nbCurrent){ sens = -1}
        var cssDeb = { 'left' : sens*$(this.elem).width()};
        var cssFin = { 'left' : -sens*$(this.elem).width()};
        $('#slide'+num).show().css(cssDeb);
        $('#slide'+num).animate({'top':0,'left':0},500);
        $(this.elemCurrent).animate(cssFin,500);

        $('.navigation span').removeClass('active');
        $('.navigation span:eq('+(num-1)+')').addClass('active');
        this.nbCurrent = num;
        this.elemCurrent = $('#slide'+num);
        carrousel.play();
    },
    next : function(){
        var num = this.nbCurrent+1;
        if(num > this.nbSlide){
            num = 1;
        }
        this.gotoSlide(num);
    },
    prev : function(){
        var num = this.nbCurrent-1;
        if(num < 1){
            num = this.nbSlide;
        }
        this.gotoSlide(num);
    },
    stop : function(){
        window.clearInterval(carrousel.timer);
    },
    play : function(){
        window.clearInterval(carrousel.timer);
        this.timer = window.setInterval('carrousel.next()',this.temps);
    }

}

Est-ce possible que tu ais fait une erreur dans le style.css car j'ai bien tout retester le tout et je n'ai pas ce genre de problème, je t'envoie donc le .css au cas où, hésite pas à le tester voir si il y a un bug chez toi. 

#carrousel{
    border: solid 5px #e7dbc5;
    width: 712px;
    height: 264px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.slide{
    position: absolute;
    top: 0;
    left: 0;
    width: 712px;
    height: 264px;
}
.title{
    position: absolute;
    height: 35px;
    bottom: 0px;
    left: 0px;
    width: 700px;
    background: url(http://www.grafikart.fr/demo/jQuery/Carrousel/img/opaque.png) repeat;
    padding-left: 12px;
    line-height: 35px;
}
.navigation{
    position: absolute;
    bottom: 38px;
    right: 5px;
}
.navigation span{
    background: #123;
    color: #FFF;
    padding: 2px 4px;
    cursor: pointer;
}
.navigation span:hover,.navigation span.active{
    background: #FFF;
    color: #123;
}

J'espère que cette fois-ci ce sera bon :)

arckaliann, il y a 12 ans

le js ne fonctionne pas,je voulais savoir qu'elle jquery tu avais car sa pourrais venir de la,je vais poster la source

<!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></title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="../js/image.js"></script>
         <link rel="shortcut icon" type="image/png" href="../image/drago.png" />
       <link rel="stylesheet" media="screen" type="text/css" title="site" href="../css/ps3.css" /> 

        <script type="text/javascript" src="../js/zoombox/zoombox.js"></script>
       <script type="text/javascript" src="../js/zoom.js"></script>

       <link href="../css/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

   </head>

 <div class="map">
       <a href="../tests/site.php">Accueil</a> =><a href="../jeux_occasion/jeu xbox 360 occasion.php">jeu xbox 360 occasion</a>=><a href="../occasion/batman.php?n=">
       batman arkham city</a>              
</div>

        <div id="pseudo_1">
<strong>pseudo:</strong><br/>arck<br/>
<strong>dragon d'or:</strong><br/>Administrateur<br/>
<img src="../image/avatars/1365237331.gif"alt="Ce membre n'a pas d'avatar" /><br/>
<a href="../tests/deconnexion.php"><strong>déconnexion</strong></a>
</div>
<br/>
<div id="container">

            <div id="banniere">
<img src="../image/flamme2.png" alt="banniere du site" />
</div>
<div id="en_tete">
<center><p>Jeux,manga,consoles neuves et d'occasion,figurines,cartes,dvd video</p></center> 
        </div>

<br/>
   <body> <div id="menu_gauche">
        <div class="element_menu">
            <h3>consoles neuves</h3>

                <ul>
                    <li><a href="../consoles_neuves/wii.php">wii</a></li>
                        <li><a href="../consoles_neuves/ds.php">ds</a></li>
                            <li><a href="../consoles_neuves/3ds.php">3ds</a></li>
                    <li><a href="../consoles_neuves/ps3.php">ps3</a></li>
                <li><a href="../consoles_neuves/psp.php">psp</a></li>
            <li><a href="../consoles_neuves/xbox360.php">xbox360</a></li>
        </ul>
    </div>

    <div class="element_menu ">
        <h3>jeux neuf</h3>
            <ul>
                <li><a href="../jeux_neuf/wii.php">wii</a></li>
                    <li><a href="../jeux_neuf/ds.php">ds</a></li>
                        <li><a href="../jeux_neuf/3ds.php">3ds</a></li>
                            <li><a href="../jeux_neuf/ps3.php">ps3</a></li>
                    <li><a href="../jeux_neuf/psp.php">psp</a></li>
                <li><a href="../jeux_neuf/xbox360.php">xbox360</a></li>
            <li><a href="../jeux_neuf/pc.php">pc</a></li>
        </ul>
    </div>

    <div class="element_menu ">
        <h3>divers neuf</h3>
            <ul>
                <li><a href="../manga_neuf/manga.php">manga</a></li>
                <li><a href="../figurines/figurines.php">figurines</a></li>
                <li><a href="../cartes/cartes.php">cartes</a></li>
                <li><a href="../dvd_video/video_neuf.php">video</a></li>
                <li><a href="../accessoire/accessoire.php">accessoire</a></li>
                <li><a href="../livre/livre.php">livre</a></li>
        </ul>
    </div>
    <div class="forum">
            <ul>
            <li><a href="../tests/forum_tests.php">forum</a></li>
            </ul>
        </div>
    </div> 
         <div id="panier">  
<a href="../panier/panier.php"><img src="../image/panier1.png"/></a>
</div>

                        <div id="menu_droite">
        <div class="element_menu ">
            <h3>consoles d'occasion</h3>
                <ul>
                    <li><a href="../consoles_occasion/wii.php">wii</a></li>
                        <li><a href="../consoles_occasion/ds.php">ds</a></li>
                            <li><a href="../consoles_occasion/3ds.php">3ds</a></li>
                    <li><a href="../consoles_occasion/ps3.php">ps3</a></li>
                <li><a href="../consoles_occasion/psp.php">psp</a></li>
            <li><a href="../consoles_occasion/xbox360.php">xbox360</a></li>
        </ul>
    </div>
    <div class="element_menu ">
        <h3>jeux d'occasion</h3>
            <ul>
                <li><a href="../jeux_occasion/wii.php">wii</a></li>
                    <li><a href="../jeux_occasion/ds.php">ds</a></li>
                        <li><a href="../jeux_occasion/3ds.php">3ds</a></li>
                    <li><a href="../jeux_occasion/ps3.php">ps3</a></li>
                <li><a href="../jeux_occasion/psp.php">psp</a></li>
            <li><a href="../jeux_occasion/xbox360.php">xbox360</a></li>
        </ul>
    </div>
    <div class="element_menu ">
        <h3>divers d'occasion</h3>
            <ul>
                <li><a href="../manga_occasion/manga_occasion.php">manga</a></li>
            <li><a href="../video/video_occasion.php">video</a></li>
        </ul>
    </div>

    <div class="connexion">
        <h3>l'antre du dragon</h3>
            <ul>
                <li><a href="../tests/espace_membre.php" class="info">l'antre du dragon<span>lien qui sert a l'inscription,la connexion,le pseudo oublié etc...</span></a></li>
            </ul>                  
        </div>
    </div>   

<div id="corps">

   <div class="final">

 <a href="../image/image/566837.jpg"class="zoombox"><img src="../image/image/566837.jpg "width ="100" height="127" /></a>

<a href="../image/image/534923.jpg"class="zoombox"><img src="../image/image/534923.jpg"width="100" height="127"/></a>
</div>

    <div class="classe2">

        <form method="POST" action="../tests/panier.php">

quantité :
<select name="q">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>

</select>
        <br/><br/>
        prix en magasin:€<br/><br/>
        stock:7<br/><br/>

        <a href="../tests/reservation.php?n=">réservation<a><br/><br/>      
        <input type="hidden" name="action" value="ajout" />
        <input type="hidden" name="l" value="batman arkham city "/>
        <input type="hidden" name="p" value=" "/>
        <input type="image" name="ajouter_panier" <img src="../image/ajouter.png">
        </form>

      </div>

                    <br/><br/>

           <h2>résumé du jeu</h2>

           <div class="paragraphe1">
             pénétrez au cœur d''un conflit mêlant les plus grand criminel de l'histoire de batman </div>
               <div class="paragraphe2">
               pour voir les bandes annonces,cliquer sur la tv ci-dessous:
               </div>

             <div class="video1">

            <a href="http://www.youtube.com/watch?v=iIYFlkkvWXg"class="zoombox zgallery1"><img src="../image/tv.jpg" alt="photo d'une tv"/></a>

             <a href="http://www.youtube.com/watch?v=8X4KXAm36F"class="zoombox zgallery1"/></a>

            </div>

 <div id="carrousel"><div id="slide94"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/4299.jpg"/>
                        </div>
                    </div><div id="slide95"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/3276.jpg"/>
                        </div>
                    </div><div id="slide92"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/1402.jpg"/>
                        </div>
                    </div><div id="slide93"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/3461.jpg"/>
                        </div>
                    </div><div id="slide88"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/4299.jpg"/>
                        </div>
                    </div><div id="slide89"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/1981.jpg"/>
                        </div>
                    </div><div id="slide90"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/2730.jpg"/>
                        </div>
                    </div><div id="slide91"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/1128.jpg"/>
                        </div>
                    </div><div id="slide86"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/1498.jpg"/>
                        </div>
                    </div><div id="slide87"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/3597.jpg"/>
                        </div>
                    </div><div id="slide84"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/2094.jpg"/>
                        </div>
                    </div><div id="slide85"class ="slide">
                        <div class="visu">
                            <img src="../image/dossier/4431.jpg"/>
                        </div>
                    </div></div> </div>

        <div id="pied_de_page">

        <ul> 
            <li><a href="conditions de ventes.php">conditions de ventes</a></li>
                <li><a href="../tests/contact.php">contact</a></li>
                <li><a href="../tests/recherche.php">recherche</a></li>
                <li><a href="../newsletters_public/newletter.php" onclick="window.open(this.href, 'newletter', 'height=309, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, directories=no, status=no'); return(false);">s'inscrire a la newsletter</a></li>
                <li><a href="../tests/carte_fidelite.php">carte membre</a></li>
            </ul>
        </ul>
        <p>Copyright "les milles trésors des dragons" 2012, tous droits réservés</p>
    </div>

 </body>

</html>
Nonathy, il y a 12 ans

J'ai trouvé ce qu'il ne va pas, tu as oublié d'initialiser le script, pour ce faire met le code ci-dessous dans ton <head></head> ou juste avant la fermeture du </body>

<script type="text/javascript">
    $(document).ready(function(){
        carrousel.init('#carrousel');
    });
</script>

Encore une chose, pour que cela fonctionne, il faut que les <u><div id="slide1"></div></u> commence par le numéro 1 et continue dans l'ordre en faisant toujours +1. Pour ce faire, suis ce qui suit :

<u>1) Mettre la valeur à 0 avant la boucle (for/while)</u> 

<?php
  $i = 0;
?>

<u>2) Ajouter +1 à chaque entrée</u> 

<?php
  $i++;
?>

<u>3) Le $i devra être utilisée pour l'id de la div</u> 

<?php
  echo '<div id="slide'.$i.'" class="slide"> ....... </div>';
?>

Sinon personnellement j'utilise la version 1.9.1 de Jquery, mais j'ai testé avec la 1.5.1, celle que tu utilises, et cela fonctionne.

Dernière chose, tu as oublié de déclarer la balise <body>, n'oublie pas de le faire :)

arckaliann, il y a 12 ans

merci beaucoup sa marche après quelque petit problèmes de html,je voulais savoir,peut on mettre deux images cote a cote

Nonathy, il y a 12 ans

Si tu veux mettre plusieurs images, je te conseille ce tuto qui est bien fait http://www.grafikart.fr/tutoriels/jquery/slider-javascript-jquery-54

Mais en soit, il est possible de mofidier pour mettre deux images, mais faut jouer sur le css et le js. Fin le tuto ci-dessus est bien fait et te permettra de faire une galerie :)

arckaliann, il y a 12 ans

ok merci beaucoup pour ton aide,
autre question j' utilise firebug pour voir les problèmes lier mais je trouve limité pour le js,tu connaitrais pas un logiciel pour firefox par hasard?

Nonathy, il y a 12 ans

Moi personnellement j'utilise firebug et l'outil de développement de chrome, malheureusement je n'en connais pas d'autre :/