vignettes sur carrousel jquery

[ourson78]

Bonjour à tous.

Je vous expose ma problématique .

niveau en jquery : moyen, voir débutant

J' ai repris la construction d' un carrousel pour site mobile, les images défilent correctement lorsque l'on clique, à la dernière image on revient à la première image. jusqu' ici, ça va.

les tracas surviennent avec la génération auto de vignettes correspondant au nombre d' images trouvées, j'ai le bon nombre de vignettes, la couleur des vignettes changent à chaque fois que l'on change d' image.

Sous le carrousel on trouve des liens et lorsque l'on clique dessus apparaît en desous des cathégories, mais cela ajoute aussi des vignettes à mon carrousel et c' est pire encore lorsque l`on clique sur l' onglet "accueil" .

pour ceux qui peuvent m'aider voici mon code jquery:

Code :

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
 
$('div:jqmData(role="page")').live('pagebeforeshow',function(){
		$(".feature").each(function (){
			// Set default index
			var featureIndex = 0;
 
			// Get width of the first image
			var imgW = $('.feature ul li:first-child a img').width();
 
			// Number of list items in caroussel
			var imgNum = $('.feature').find('ul.fItems li').length;
 
			// Calculate position of each list items
			var animValue = featureIndex * imgW;
 
			$('.fWrap').css({width : (imgNum*imgW), left : '0'}); 
 
 
			//set a mark for each picture
			for (var i=0; i < imgNum; i++) {
 
				if (i == imgNum) {
					return false;
				};
			  $('ul.fMarks').append('<li></li>')
 
			  //first mark has class = active by default 
			  				.children(':first').addClass('active');
 
 
			};
 
			//Function when user click on next button
		    $('.feature a.fSwitcherNext').click(function(){
 
				featureIndex ++;
 
				var animValue = featureIndex * imgW;
 
				if (featureIndex == imgNum  ) {
					//if it's the last picture, get back to the first one
					$(this).parent().find('.fWrap').animate({left: '0px'},200);
					featureIndex = 0 ;
 
					//remove class "active" form the last marks
					$('ul.fMarks li:last').removeClass('active')
 
					// Set class "active" to the first mark
					$('ul.fMarks li:first').addClass('active');
				}else{
					//move to the next picture
					$(this).parent().find('.fWrap').animate({left: '-' + animValue + 'px'},200);
 
					//set class "active" to the next mark 
					$('li.active ').removeClass('active').next().addClass('active');
				};
			});
		});
 
	});

et voici le html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<section class="feature">
				<div class="fWrap">
					<ul class="fItems">
						<li><a href="detail.html" title="" rel=""><img src="static/img/promo01.jpg" alt=""></a></li>
						<li><a href="detail.html" title="" rel=""><img src="static/img/promo02.jpg" alt=""></a></li>
						<li><a href="detail.html" title="" rel=""><img src="static/img/promo01.jpg" alt=""></a></li>
						<li><a href="detail.html" title="" rel=""><img src="static/img/promo02.jpg" alt=""></a></li>
						<li><a href="detail.html" title="" rel=""><img src="static/img/promo01.jpg" alt=""></a></li>
 
            		</ul>
            		<div class="clearer"><!-- --></div>
				</div>
 
				<a href="#" title="" class="fSwitcherNext">Promotion suivante</a>
 
				<ul class="fMarks">
 
        		</ul>
 
                <div class="featureExtra01"><!-- --></div>
                <div class="featureExtra02"><!-- --></div>  
            </section>

Merci d' avance à tous ceux qui pourront m' aider.

[danielhagnoul]

Bonsoir

Je ne comprends pas cette ligne de code $('div:jqmData(role="page")').live('pagebeforeshow',function(){.

L'événement "pagebeforeshow" n'existe pas en jQuery.

Je vois, c'est du jQuery Mobile : $('div[data-role="page"]').live('pagebeforeshow',function(event, ui){.

Mais $('div:jqmData(role="page")') me semble bien étrange.

Je ne connais pas bien et il est difficile d'aider sans pouvoir tester. Le mieux serait de disposer d'un lien vers la page de tests.

[ourson78]

Bonjour Daniel,

voici le lien pour tester : http://crea-corp.com/mobile/

$('div:jqmData(role="page")') signifie que l ' on récupère le marqueur "page" sur les pages

[danielhagnoul]

Bonsoir

Je vois : jqmData() : http://jquerymobile.com/demos/1.0b3/...i/methods.html

Je vois aussi que vous utilisez UI Mobile b2, on en est à la version b3 qui apporte plusieurs modifications.

À l'ouverture de la page, il y a plusieurs erreurs :

• "NetworkError: 404 Not Found - http://crea-corp.com/mobile/static/jplayer/js/jplayer.js"
• "NetworkError: 404 Not Found - http://crea-corp.com/mobile/static/jplayer/js/jquery.jplayer.min.js"
• "NetworkError: 404 Not Found - http://crea-corp.com/mobile/static/jplayer/js/jquery.hoverIntent.minified.js"
• "NetworkError: 404 Not Found - http://crea-corp.com/mobile/static/jplayer/css/skin01.css"
• "NetworkError: 404 Not Found - http://crea-corp.com/mobile/static/css/images/ajax-loader.png"

Lorsque je clique sur "Musique CD" ou une autre option, les points qui indiquent le nombre d'images se transforment en longues barres, car le programme ajoute toujours de nouveaux points sans effacer les anciens.

Je vous suggère d'ajouter $('ul.fMarks').empty(); juste avant :

Code :

1
2
3
4
5
6
7
//set a mark for each picture
for (var i=0; i < imgNum; i++) {
  $('ul.fMarks').append('<li></li>')
 
  //first mark has class = active by default 
				.children(':first').addClass('active');
};

Pour le reste, même avec un lien, il est très difficile de déboguer un programme UI Mobile.

[ourson78]

Merci pour vos conseil et votre aide danielhagnoul, il est vrai qu'il est très difficile de débugger jquery mobile. Si je trouve une réponse, je viendrais la poster au cas ou d' autre personne serait dans mon cas.

A bientôt