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 :

Slider ne démarre pas


Sujet :

jQuery

  1. #1
    Membre régulier
    Slider ne démarre pas
    Bonjour,
    Null en Javascript, j'ai trouvé sur internet un petit Slider simple que j'ai implémenté sur mon site et qui marchait très bien.
    Je ne crois pas avoir modifié quoique ce soit dans cette partie, mais toujours est-il que le slider ne fonctionne plus, en fait le script ne démarre pas !
    Pouvez vous m'indiquer où est le problème ?
    Merci

    Voici le programme HTML et les CSS et Javascript associés
    Code HTML :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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    <table>
    	<tr>
    		<div id="head_slider">
    			<div id="head_slider_fleche_gauche"></div>
    			<div id="head_slider_fleche_droite"></div>
    			<div id="head_slider_content_list">
    				<div id="head_slider_content">
    	                             <object width="820" data="image1.jpg" type="image/jpg"></object>
    	                             <object width="820" data="image2.jpg" type="image/jpg"></object>
    	                             <object width="820" data="image3.jpg" type="image/jpg"></object>
    	                             <object width="820" data="image4.jpg" type="image/jpg"></object>
    				</div>
    			</div>
    		</div>
    	</tr>
    </table>
     
    <script type="text/javascript">
    var idcr = 1;
    $(document).ready(function(){
                    alert('script lancé');
                    slider.init();
                    slider.play_defil();
    });
    slider = {
            init: function(){
                    slider.elem = $("#head_slider_content");
                    slider.nbSlide = slider.elem.find("object").length;
                    slider.current = 0;
                    $("#head_slider_fleche_droite").click(function() {
                            slider.next();
                    });
                    $("#head_slider_fleche_gauche").click(function() {
                            slider.prev();
                    });
                    $("#head_slider").mouseover(function() {
                            slider.stop_defil();
                    });
                    $("#head_slider").mouseout(function() {
                            slider.play_defil();
                    });
            },
            
            next: function(){
                    slider.current++;
                    if (slider.current > slider.nbSlide-1)
                    {       slider.current = 0;
                            slider.elem.stop().animate({marginLeft:"0pox"});
                    }
                    else
                    {       slider.elem.stop().animate({marginLeft:-slider.current*820+"px"});
                    }
            },
            
            prev: function(){
                    slider.current--;
                    if (slider.current < 0)
                    {       slider.current = slider.nbSlide-1;
                    }
                    slider.elem.stop().animate({marginLeft:-slider.current*820+"px"});
            },
            
            suiv: function(){
                    if (idcr>0 & slider.current == slider.nbSlide-1) { idcr=-1; }
                    else if (idcr<00 & slider.current == 0) { idcr=1; }
                    slider.current = slider.current + idcr;
                    slider.elem.stop().animate({marginLeft:-slider.current*820+"px"});
            },
            
            play_defil: function(){
                    slider.timer = window.setInterval("slider.suiv()",5000);
            },
            stop_defil: function(){
                    window.clearInterval(slider.timer);
            }
    }
    </script>
    <style type="text/css">
    #head_slider
    {
            height:500px;
            width:1000px;
            margin-left: auto;
            margin-right: auto;
    }
     
    #head_slider_fleche_droite
    {
            background:url(./ressources/fleche_droite.png) no-repeat;
            float:right;
            height:65px;
            width:40px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
    }
     
    #head_slider_fleche_gauche
    {
            background:url(./ressources/fleche_gauche.png) no-repeat left;
            float:left;
            height:65px;
            width:40px;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
    }
     
    #head_slider_content_list
    {
            margin:auto;
            overflow:hidden;
            height:100%;
            width:820px;
    }
     
    #head_slider_content
    {       float:left;
            height:100%;
            width:7000px;
    }
    #head_slider_content>
    {
            float:left;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
    }
     
    </style>

  2. #2
    Rédacteur/Modérateur

    tu n'aurais pas oublié un
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre régulier
    Merci SpaceFrog (SF j'en suis fan aussi )

    Le slider.play_defil() ne devrait il pas être automatiquement lancé lorsque la souris n'est pas au dessus du slider ?

  4. #4
    Rédacteur/Modérateur

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
      $("#head_slider").mouseout(function() {
                            slider.play_defil();


    si la souris sort du slider ...
    si elle n'y est jamais entré, il ne se passera rien
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  5. #5
    Membre régulier
    Oui, je suis tout à fait d'accord avec toi, et bien sût, je suis entré dans la zone et ressorti plusieurs fois, mais toujours sans démarrage du Slider !

  6. #6
    Expert confirmé
    Salut,

    M'est avis que slider.time n'existe que dans play_defil(), et pas dans stop_defil();

  7. #7
    Expert confirmé
    Ah non, je n'ai rien dit, slider.timer est accessible dans les 2 fonctions;

    Au cas où, vérifie tout de même que tu as le fichier JQuery qui va bien dans la page...

  8. #8
    Rédacteur/Modérateur

    Oui regarde déjà en console si tu n'as pas de message d'erreur ou de fichier non chargé ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  9. #9
    Membre régulier
    Merci SpaceFrog,

    Non pas d'erreur annoncée par la console.

    Mais ce que je ne comprend pas pourquoi le script n'est pas exécuté, sinon je devrais voir l'alert('script lancé') ?

  10. #10
    Membre régulier
    Bonjour JavaTwister,
    Je te rappelle ma nullité en javascript, aussi peux tu me dire comment je peux vérifier que j'ai le bon jQuery ?
    Merci

  11. #11
    Rédacteur/Modérateur

    tu n'a même pas l'alert ?
    et aucun message en console ?
    tu es sur que js est activé dans ton navigateur ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  12. #12
    Membre régulier
    Il semble que Javascript soit activé par défaut sur FireFox et que pour le bloquer il faut faire appel à une extension spécialisée que je n'ai pas installée.
    Du coup j'ai essayé sur Google Chrome, mais idem, pas d'alert ni de mouvement des slides !

  13. #13
    Rédacteur/Modérateur

    Peut on voir le code source intégral de la page ?
    Ou bien as tu un page visible en ligne ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  14. #14
    Membre régulier
    Bonsoir SpaceFrog
    Le code source de la page donnant plusieurs centaines de ligne de code, pour t'éviter trop de recherche, je t'ai extrait la partie du Slider.
    Le slider présente le même défaut que dans la page entière.
    Cordialement

    Code HTML :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
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    <script type="text/javascript">
    var idcr = 1;
    $(document).ready(function(){
                    alert('script lancé');
                    slider.init();
                    slider.play_defil();
    });
    slider = {
            init: function(){
                    slider.elem = $("#head_slider_content");
                    slider.nbSlide = slider.elem.find("object").length;
                    slider.current = 0;
                    $("#head_slider_fleche_droite").click(function() {
                            slider.next();
                    });
                    $("#head_slider_fleche_gauche").click(function() {
                            slider.prev();
                    });
                    $("#head_slider").mouseover(function() {
                            slider.stop_defil();
                    });
                    $("#head_slider").mouseout(function() {
                            slider.play_defil();
                    });
            },
            
            next: function(){
                    slider.current++;
                    if (slider.current > slider.nbSlide-1)
                    {       slider.current = 0;
                            slider.elem.stop().animate({marginLeft:"0pox"});
                    }
                    else
                    {       slider.elem.stop().animate({marginLeft:-slider.current*820+"px"});
                    }
            },
            
            prev: function(){
                    slider.current--;
                    if (slider.current < 0)
                    {       slider.current = slider.nbSlide-1;
                    }
                    slider.elem.stop().animate({marginLeft:-slider.current*820+"px"});
            },
            
            suiv: function(){
                    if (idcr>0 & slider.current == slider.nbSlide-1) { idcr=-1; }
                    else if (idcr<00 & slider.current == 0) { idcr=1; }
                    slider.current = slider.current + idcr;
                    slider.elem.stop().animate({marginLeft:-slider.current*820+"px"});
            },
            
            play_defil: function(){
                    slider.timer = window.setInterval("slider.suiv()",5000);
            },
            stop_defil: function(){
                    window.clearInterval(slider.timer);
            }
    }
    </script>
    <style type="text/css">
    #head_slider
    {
            /*background:#FFFFFF;*/
            height:500px;
            width:1000px;
            margin-left: auto;
            margin-right: auto;
    }
     
    #head_slider_fleche_droite
    {
            background:url(./ressources/fleche_droite40.png) no-repeat;
            float:right; /* pour que la flèche se mette bien à droite */
            height:65px;
            width:40px;
            position: relative; /* positionnement vertical de la flèche */
            top: 50%;
            transform: translateY(-50%);
    }
     
    #head_slider_fleche_gauche
    {
            background:url(./ressources/fleche_gauche40.png) no-repeat left;
            float:left;
            /*margin-top:190px;*/
            height:65px;
            width:40px;
            position: relative; /* positionnement vertical de la flèche */
            top: 50%;
            transform: translateY(-50%);
    }
     
    #head_slider_content_list
    {
            /*background:red;*/
            margin:auto; /*centrage dans la fenêtre head_slider */
            overflow:hidden; /* pour cacher la partie droite des objet et faire réapparaitre la flèche droite */
            height:100%;
            width:820px;
    }
     
    #head_slider_content
    {       float:left;
            height:100%;
            width:7000px;
    }
    #head_slider_content>* /*à tous les enfants de head_slider_content (c'est les object dans la div) */
    {
            float:left;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
    }
     
    </style>
     
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Test Slider</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript" src="js/jquery.js"></script>
    </head>
     
    <body bgcolor=FFFFFF >
     
    <div class="corps">
    	<table  valign="top" align="center" width="90%">
    		<tr>
    			<td align="center" valign="top">
    				<font style=font-size:2.5em><strong>Galerie</strong></font>
    			</td>
    		</tr>
    		<table>
    			<tr>
    				<div id="head_slider">
    					<div id="head_slider_fleche_gauche"></div>
    					<div id="head_slider_fleche_droite"></div>
    					<div id="head_slider_content_list">
    						<div id="head_slider_content">
    							<object width="820" data="art_fichiers/16382.jpg" type="image/jpg"></object>
    							<object width="820" data="art_fichiers/16389.jpg" type="image/jpg"></object>
    							<object width="820" data="art_fichiers/16474.jpg" type="image/jpg"></object>
    							<object width="820" data="art_fichiers/16477.jpg" type="image/jpg"></object>
    							<object width="820" data="art_fichiers/16480.jpg" type="image/jpg"></object>
    							<object width="820" data="art_fichiers/16483.jpg" type="image/jpg"></object
    						</div>
    					</div>
    				</div>
    			</tr>
    		</table>		
    	</table>
    </div>
    </body>
    </html>

  15. #15
    Rédacteur/Modérateur

    heu il est dans cet ordre là ???
    les scripts ne sont pas dans le head ? ou en bas de page ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  16. #16
    Membre régulier
    Oui, bien que dans le fichier php le script soit positionné après la partie html.

    Mais non, le script n'est ni dans le head ni en bas de page, c'est important ?

  17. #17
    Membre régulier
    OK, c'est important,
    J'ai mis le script dans le Head, le script se lance bien.
    Merci, merci

  18. #18
    Expert confirmé
    comme quoi... on se fait facilement des films quand on ne voit pas assez de code

  19. #19
    Membre régulier
    Ben ça c'est sûr. Mais je ne suis pas un pro, j'essaye juste de faire vivre mes asso
    En tout cas merci à tous les deux