Discussion :

[mademoizel]

Bonjour à tous,

j'ai réalisé un carrousel en ajax avec l'aide de jquery.
Ce carrousel a des onglets. J'ai mis un lien à ces onglets pour être redirigé vers une page du site mais lorsque je clique sur un onglet rien ne se passe.

Code carrousel :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
 
 
		//REQUETE POUR RECUPERER TOUS LES ELEMENTS DU CARROUSEL
		$requete=mysql_query('SELECT LIENOnglet,IMG, LIEN2 FROM carrousel');
 
 
		//DIV CONTENANT LE CARROUSEL
		echo' <ul id="rotmenu">';
 
 
		while($var=mysql_fetch_array($requete))
		{
 
			echo'<li>';
			echo' <a  name="root1" href="'.$var['LIEN2'].'">'.$var['LIENOnglet'].'</a>';	
			echo'<div style="display:none;">';
            echo'<div>'.$var['IMG'].'</div>';
            echo'</div>';
            echo'</li>';
 
		}	
		echo '</ul>'; //FERMETURE DE LA DIV
 
		echo' <div id="rot1">
                   <img src="../images/'.$var['IMG'].'"  />
                    <div class="heading">
                        <h1></h1>
                    </div>
 
               </div>';
 
	echo'</div>';//fin rotator

code js

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
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
 
      $(function() {
 
                var current = 1;
 
 
 
                var iterate		= function(){
 
                    var i = parseInt(current+1);
 
                    var lis = $('#rotmenu').children('li').size();
 
                    if(i>lis) i = 1;
 
                    display($('#rotmenu li:nth-child('+i+')'));
 
                }
 
                display($('#rotmenu li:first'));
 
                var slidetime = setInterval(iterate,3000);
 
 
 
                $('#rotmenu li').bind('click',function(e){
 
                    clearTimeout(slidetime);
 
                    display($(this));
 
                    e.preventDefault();
 
                });
 
 
 
                function display(elem){
 
                    var $this 	= elem;
 
                    var repeat 	= false;
 
                    if(current == parseInt($this.index() + 1))
 
                        repeat = true;
 
 
 
                    if(!repeat)
 
                        $this.parent().find('li:nth-child('+current+') a').stop(true,true).animate({'marginRight':'-20px'},300,function(){
 
                            $(this).animate({'opacity':'0.7'},700);
 
                        });
 
 
 
                    current = parseInt($this.index() + 1);
 
 
 
                    var elem = $('a',$this);
 
 
 
                        elem.stop(true,true).animate({'marginRight':'0px','opacity':'1.0'},300);
 
 
 
                    var info_elem = elem.next();
 
                    $('#rot1 .heading').animate({'left':'-420px'}, 500,'easeOutCirc',function(){
 
                        $('h1',$(this)).html(info_elem.find('.info_heading').html());
 
                        $(this).animate({'left':'0px'},400,'easeInOutQuad');
 
                    });
 
 
 
                    $('#rot1 .description').animate({'bottom':'-270px'},500,'easeOutCirc',function(){
 
                        $('p',$(this)).html(info_elem.find('.info_description').html());
 
                        $(this).animate({'bottom':'0px'},400,'easeInOutQuad');
 
                    })
 
                    $('#rot1').prepend(
 
                    $('<img/>',{
 
                        style	:	'opacity:0',
 
                        className : 'bg'
 
                    }).load(
 
                    function(){
 
                        $(this).animate({'opacity':'1'},600);
 
                        $('#rot1 img:first').next().animate({'opacity':'0'},700,function(){
 
                            $(this).remove();
 
                        });
 
                    }
 
                ).attr('src','../photos/carousel/'+info_elem.find('.info_image').html()).attr('width','730').attr('height','300')
 
                );
 
                }
 
            });

Merci d'avance pour votre aide

[SpaceFrog]

il serait intéressant de vois le code html généré ...

[mademoizel]

Voici le code html généré

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
</div><!-- fin div colGauche -->
<div id="centre">
  <div class="rotator">
    <ul id="rotmenu">
      <li> <a style="margin-right: -20px; opacity: 0.7;" name="root1" href="prestations.php">Documentaires</a>
            <div style="display: none;"><div class="info_image">5.png</div></div>
      </li>
       <li> <a style="margin-right: 0px; opacity: 1;" name="root1" href="couvEvents.php">événements</a><div style="display: none;"><div class="info_image">3.png</div></div>
      </li>
      <li> <a style="margin-right: -20px; opacity: 0.7;" name="root1" href="webEmission.php">émissions et interviews</a><div style="display: none;">