Bonjour,

J'ai un script qui permet de changer d'images en passant sur une puce.

$(document).on('mouseover', '#views_block li a', function(){
	displayImage($(this)); 
});

<ul id="thumbs_list_frame" class="" style="width: 330px;">
	<li id="thumbnail_8">																																																				<li id="thumbnail_8">
		<a href="http://ngoshoes.sitewebtest.ovh/8-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
			 <span>Color</span>
		</a>
	</li>
		
	<li id="thumbnail_43">
		<a href="http://ngoshoes.sitewebtest.ovh/43-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
			 <span>Color</span>
		</a>
	</li>
		
	<li id="thumbnail_44">
		<a href="http://ngoshoes.sitewebtest.ovh/44-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
			 <span>Color</span>
		</a>
	</li>

	<li id="thumbnail_45">
		<a href="http://ngoshoes.sitewebtest.ovh/45-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
			 <span>Color</span>
		</a>
	</li>
			
	<li id="thumbnail_46">
		<a href="http://ngoshoes.sitewebtest.ovh/46-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox shown" title="Mui Ne">
			 <span>Color</span>
		</a>
	</li>
</ul>
																						</ul>

J'aimerais en dessous ajouter le nombre d'images et où en est le visiteur exemple : 5 / 14

Merci d'avance pour votre aide

Salut,

Tu pourrais utiliser quelque chose dans ce genre:

<script>
    //Array pour sauvegarder les éléments de la liste qui ont été "survolés" avec la souris
    var myArray = [];
    //Compteur
    var imgCounter = 0;

    $(document).ready(function() {

      $("li").mouseover(function(event) {
        //Sauvegarde l'index de l'élément qui est survolé dans la liste
        var index = $("li").index(this);
        console.log(index);
        //Sauvegarde le nombre total d'éléments dans la liste UL
        var liLenght = $("ul").children().length;
        console.log(liLenght);

        //Si l'index de notre élément n'est pas déjà dans notre Array, on l'ajoute et on augmente le compteur d'1
        if (myArray.includes(index) == false) {
          myArray.push(index);
          imgCounter++;

        }
        console.log("Vous êtes sur l'image " + (index + 1));
        console.log("Array: "+myArray);
        console.log("Vous avez vu " + imgCounter + " image(s) sur "+liLenght);

      });
    });
  </script>

En gros, lors d'un mousover, l'index de l'élément de liste survolé est ajouté à un Array, si celui-ci n'est pas encore dedans. En plus de ça on incrémente une variable qui sert de compteur afin de savoir le nombre d'objet qui ont déjà été survolés.

Il te faudra afficher la console dans ton navigateur pour voir ce que ça donne (l'index de l'image survolé, le nombre d'images déjà vues et le nombre d'images total). Je te laisse les implémenter toi-même ensuite dans ton code HTML si la solution te convient

-
Edité par VinceB. 10 octobre 2018 à 23:55:16

Merci pour ton aide, mais ton code ne fonctionne pas

J'ai 11 images pas 65

-
Edité par NoceboNocebo 11 octobre 2018 à 14:55:20

Salut,

As-tu bien ouvert la console de ton navigateur ? C'est là-dedans que les résultats s'affichent dans le cas de mon code quand tu passes avec ta souris sur les liens (A toi ensuite d'adapter le code pour que ça apparaisse sur ta page HTML à la place de la console )

Vérifie ici sinon, j'ai juste ajouté mon code avec ta partie HTML:

https://jsfiddle.net/c1emfdxr/

Pour ouvrir la console :

- sur Google Chrome: ctrl+shift+i

- sur Firefox: ctrl+shift+k

Edit: Pourrais-tu poster ton code complet modifié ici ou le mettre en ligne ? 

-
Edité par VinceB. 11 octobre 2018 à 15:11:12

Merci de prendre le temps de me répondre.

Après quelques modifs j'ai bien un résultat, cependant j'aimerais ne pas à avoir à passer une une puce pour que le compteur .

    var myArray = [];
    //Compteur
    var imgCounter = 0;
 
    $(document).ready(function() {
 
      $("#views_block li a").mouseover(function(event) {
        //Sauvegarde l'index de l'élément qui est survolé dans la liste
        var index = $("a").index(this);
        console.log(index);
        //Sauvegarde le nombre total d'éléments dans la liste UL
        var liLenght = $("ul#thumbs_list_frame").children().length;
        console.log(liLenght);
 
        //Si l'index de notre élément n'est pas déjà dans notre Array, on l'ajoute et on augmente le compteur d'1
        if (myArray.includes(index) == false) {
          myArray.push(index);
          imgCounter++;
 
        } 
		var div = document.getElementById("compteurphoto");  
		div.textContent = imgCounter + " / "+liLenght;  
      });
    });

J'ai tenté un load, mais non

-
Edité par NoceboNocebo 11 octobre 2018 à 17:51:24

Content que ca aille dans le bon sens  

En fait il te suffit de placer la variable qui compte le nombre d'éléments de ta liste (ici "liLenght") à la ligne 6 entre "document.ready" et ton "mousover", comme ceci:

var myArray = [];
//Compteur
var imgCounter = 0;
 
$(document).ready(function() {
    //Sauvegarde le nombre total d'éléments dans la liste UL
    var liLenght = $("ul#thumbs_list_frame").children().length;
    console.log(liLenght); 
  $("#views_block li a").mouseover(function(event) {
    //Sauvegarde l'index de l'élément qui est survolé dans la liste
    var index = $("a").index(this);
    console.log(index);

    //Si l'index de notre élément n'est pas déjà dans notre Array, on l'ajoute et on augmente le compteur d'1
    if (myArray.includes(index) == false) {
      myArray.push(index);
      imgCounter++;
 
    }
    var div = document.getElementById("compteurphoto"); 
    div.textContent = imgCounter + " / "+liLenght; 
  });
});

De cette manière le nombre d'éléments dans la liste sera automatiquement sauvegardé dans la variable lors du chargement du document, et donc avant même qu'il y ait un mouseover.

Non toujours obligé de passer la souris pour voir le nombre 1/11

Ah si en fait en console mais il indique juste 11 y aurait-il moyen de mettre 1/11 ?

Pourtant il devrait l'indiquer dans la div + liLenght

Si je sors ça

 var div = document.getElementById("compteurphoto");
    div.textContent = imgCounter + " / "+liLenght;

du $("#views_block li a").mouseover(function(event) { 
alors ça fonctionne, mais ça n'incrémente plus

-
Edité par NoceboNocebo 11 octobre 2018 à 18:39:38

En fait il faut que tu changes le contenu de "compteurphoto" au moment où tu charges le document (donc entre le "document.ready" et ton "mousover") ET également que tu le fasses comme c'était le cas dans ta fonction mouseover pour que ce soit actualisé à chaque fois que quelqu'un survole un lien avec sa souris.

Je crois que ton code est légèrement différent maintenant par rapport à celui de ton post d'origine, donc n'hésite pas à poster celui que tu utilises actuellement et qui est mis à jour pour que ce soit plus facile à suivre pour nous  (Soit directement dans le post ou soit dans un Jfiddle comme je l'ai fait plus haut).

     var myArray = [];
    //Compteur
    var imgCounter = 0;
 
    $(document).ready(function() {
	var liLenght = $("ul#thumbs_list_frame").children().length;
	
      $("#views_block li a").mouseover(function(event) {
        //Sauvegarde l'index de l'élément qui est survolé dans la liste
        var index = $("a").index(this);
        console.log(index);
        //Sauvegarde le nombre total d'éléments dans la liste UL
        var liLenght = $("ul#thumbs_list_frame").children().length;
        console.log(liLenght);
 
        //Si l'index de notre élément n'est pas déjà dans notre Array, on l'ajoute et on augmente le compteur d'1
        if (myArray.includes(index) == false) {
          myArray.push(index);
          imgCounter++;
 
        } 
		var div = document.getElementById("compteurphoto");  
		div.textContent = imgCounter + " / "+liLenght;  
      });
		var div = document.getElementById("compteurphoto");  
		div.textContent = "1" + " / "+liLenght;  	  
    });

 J'ai fait comme ça et ça fonctionne encore une dernière chose si je commence au milieu il indique 1 au lieu d'indiquer l'image 6 y a t'il une solution pour qu'il prenne en compte les éléments précédents ?

-
Edité par NoceboNocebo 11 octobre 2018 à 19:19:33

Ah je vois, je pensais que tu voulais afficher également le nombre d'images qui ont été survolées, mais finalement c'est encore plus simple comme ça, donc plus besoin de l'Array ou ni-même de la variable qui servait de compteur.

Essaie ça :

$(document).ready(function() {
var liLenght = $("ul#thumbs_list_frame").children().length; 
  $("#views_block li a").mouseover(function(event) {
    //Sauvegarde l'index de l'élément qui est survolé dans la liste
    var index = $("a").index(this);
    console.log(index);
    //Sauvegarde le nombre total d'éléments dans la liste UL
    var liLenght = $("ul#thumbs_list_frame").children().length;
    console.log(liLenght);
 
    var div = document.getElementById("compteurphoto"); 
    div.textContent = index + " / "+liLenght; 
  });
    var div = document.getElementById("compteurphoto"); 
    div.textContent = "1" + " / "+liLenght;      
});

Merci pour ton retour, il indique 20, 21, 22 sinon le script fonctionne au niveau du survol.

Faudrait qu'il commence à 1 et pas zero est ce possible.

En tout cas merci d'aider une noob

-
Edité par NoceboNocebo 11 octobre 2018 à 21:35:38

Essaie d'ajouter simplement +1 à la ligne 12:

div.textContent = (index+1) + " / "+liLenght; 

NoceboNocebo a écrit:

En tout cas merci d'aider une noob

Pas de quoi, entre noob faut d'entraider 

-
Edité par VinceB. 11 octobre 2018 à 21:42:46

Bonjour NoceboNocebo ,

C'est bon , le pb est réglé?

Non pas vraiment il affiche toujours

21/11

22/11

23/11

Au lieu de 

1/11

2/11

3/11

Salut,

Pourrais-tu reposter ton code en entier ? (HTML et JS)

$(document).ready(function() {
var liLenght = $("ul#thumbs_list_frame").children().length; 
  $("#views_block li a").mouseover(function(event) {
    //Sauvegarde l'index de l'élément qui est survolé dans la liste
    var index = $("a").index(this);
    // console.log(index);
    //Sauvegarde le nombre total d'éléments dans la liste UL
    var liLenght = $("ul#thumbs_list_frame").children().length;
    // console.log(liLenght);
  
    var div = document.getElementById("compteurphoto"); 
    div.textContent = index + " / "+liLenght;  
	// div.textContent = (index + 1) + " / "+liLenght;
  });
    var div = document.getElementById("compteurphoto"); 
    div.textContent = "1" + " / "+liLenght;     
	
});

<ul id="thumbs_list_frame" class="" style="width: 330px;">
																																																													<li id="thumbnail_44">
										<a href="http://ngoshoes.sitewebtest.ovh/44-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox shown" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_8">
										<a href="http://ngoshoes.sitewebtest.ovh/8-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_43">
										<a href="http://ngoshoes.sitewebtest.ovh/43-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_45">
										<a href="http://ngoshoes.sitewebtest.ovh/45-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_46">
										<a href="http://ngoshoes.sitewebtest.ovh/46-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox shown" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_47">
										<a href="http://ngoshoes.sitewebtest.ovh/47-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_48">
										<a href="http://ngoshoes.sitewebtest.ovh/48-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_49">
										<a href="http://ngoshoes.sitewebtest.ovh/49-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_50">
										<a href="http://ngoshoes.sitewebtest.ovh/50-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_51">
										<a href="http://ngoshoes.sitewebtest.ovh/51-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																																																						<li id="thumbnail_52" class="last">
										<a href="http://ngoshoes.sitewebtest.ovh/52-thickbox_default/mui-ne.jpg" data-fancybox-group="other-views" class="fancybox" title="Mui Ne">
											 <span>Color</span>
										</a>
									</li>
																						</ul>

Bonjour NoceboNocebo ,

Ligne 3 : c'est normal que tu pointes sur #views_block si je change par #thumbs_list_frame

cela fonctionne hormis le fait qu'il faut ajoute +1 à index

https://codepen.io/Zonecss/pen/PyOEye

En fait non .index() bug si il y a plus de liens dans la page

var index = $("a").index(this);

Mis à jour dans le codepen

-
Edité par AliasDmc 15 octobre 2018 à 19:59:29

C'est tj pareil avec ton code

Bonjour NoceboNocebo ,

Et sur le codepen c'a bug aussi

Oui et mon cache est bien vidé

Bonjour NoceboNocebo,

Bon ba là, j'ai pas d'idée

Il me faudrait une url ou la page complète (html) pour tester en réelle

Y a moyen?

Bonjour NoceboNocebo,

Dans ton js j'ai var index = $("a").index(this); et non $(this).parents('li').index();

Désolée pour la réponse tardive, mais je suis sur plusieurs choses en même temps.

Donc si je change la ligne le compteur ne fonctionne plus du tout 

$(document).ready(function() {
var liLenght = $("ul#thumbs_list_frame").children().length;
  $("#thumbs_list_frame li a").mouseover(function(event) {
    //Sauvegarde l'index de l'élément qui est survolé dans la liste
    // var index = $("a").index(this);
	$(this).parents('li').index();
    // console.log(index);
    //Sauvegarde le nombre total d'éléments dans la liste UL
    var liLenght = $("ul#thumbs_list_frame").children().length;
    // console.log(liLenght);
   
    var div = document.getElementById("compteurphoto");
    div.textContent = (index+1) + " / "+liLenght; 
    // div.textContent = (index + 1) + " / "+liLenght;
  });
    var div = document.getElementById("compteurphoto");
    div.textContent = "1" + " / "+liLenght;    
     
});

Bonjour NoceboNocebo,

Je me suis mal exprimé, il faut mettre :

var index = $(this).parents('li').index();

ça fonctionne parfaitement.

J'ai ajouté un script pour faire défiler automatiquement les photos, mon problème est que les puces changent bien, mais pas l'image.

$(window).load(function(){
 
// Jquery permet de gérer les éléments que tu récupère comme un tableau
// Avec la fonction .eq(X) (qui permet de récupérer un élément précis d'un tableau), ça facilité le tout
var links = $('#views_block li a');
var index = 0; 
// L'index de l'élément surligné
 
setInterval(function(){
        // L'index du prochain élément. C'est à dire l'index de l'élément courrant + 1 modulo le nombre de lien.
    // Le modulo permet de revenir à 1 une fois arrivé au dernier élément
        var nextIndex = (index + 1) % links.length;
    // On retire la class au "lien actif"
        links.eq(index).removeClass('shown'); 
		
    // On ajoute la class au prochain lien
        links.eq(nextIndex).addClass('shown');  
		//update display of the large image 
		  if ( links.eq(nextIndex).addClass('shown')  ) {
			$(document).on('load', '#views_block li a', function(){
				displayImage($(this)); 
			});
		  }
 

    index = nextIndex;
}, 2000);
 
});

Normalement il suffit de passer sur la pastille pour changer l'image grâce à ce code

$(document).on('mouseover', '#views_block li a', function(){
	displayImage($(this)); 
});

Je n'arrive pas à faire défiler les images automatique en même temps que les pastilles changent.