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 :

vignettes sur carrousel jquery


Sujet :

jQuery

  1. #1
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2011
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2011
    Messages : 25
    Par défaut vignettes sur carrousel jquery
    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 : 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
     
    $('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 : 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
     
    <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.

  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

    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.

    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 averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2011
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2011
    Messages : 25
    Par défaut
    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

  4. #4
    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

    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

    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.)

  5. #5
    Membre averti
    Homme Profil pro
    Développeur Web
    Inscrit en
    Février 2011
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Février 2011
    Messages : 25
    Par défaut
    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

Discussions similaires

  1. Réponses: 6
    Dernier message: 10/07/2009, 21h43
  2. Réponses: 3
    Dernier message: 15/04/2009, 07h30
  3. [GD] Créer simultanément des vignettes sur upload d'images
    Par angeleweb dans le forum Bibliothèques et frameworks
    Réponses: 5
    Dernier message: 05/10/2007, 15h40
  4. Decalage de vignette sur integration de balise form
    Par mat2424 dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 21/08/2007, 17h46
  5. [Wamp] agrandissement de vignettes sur la même page
    Par the_metalos dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 4
    Dernier message: 11/05/2007, 16h03

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