Bonjour,

J'aimerais faire fonctionner ce script en ajoutant une class non pas sur le LI comme à l'origine, mais sur le A, mais ça ne fonctionne pas.

Original : http://jsfiddle.net/CGsze/

Modification : http://jsfiddle.net/CGsze/27/

Merci d'avance pour votre aide

-
Edité par NoceboNocebo 10 octobre 2018 à 15:33:09

Cela ne fonctionne pas car la fonction "next" de JQuery, récupère la balise "soeur" à la balise sélectionné (l'élément HTML à côté de lui). En gros, avec les "li" ça fonctionnais car ils étaient tous au même niveau, sauf qu'avec la balise "a" chacun se trouve dans une balise "li", aucun n'a donc de voisin direct.

J'espère avoir été assez clair, si tu souhaites plus d'explications, n'hésite pas.

Bonjour,

Non c'est super clair merci, tu ne serais pas comment arriver à mes fins avec la balise A ?

Tu as peut-être déjà trouvé la solution depuis mon dernier post mais voici ma "solution" (commenté un maximum pour être précis) :

//$(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 = $('#navs 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('activenav');
    // On ajoute la class au prochain lien
		links.eq(nextIndex).addClass('activenav');  
    
    index = nextIndex;
}, 2000); 

//}); 

Hello,

Avec des modifications minimes sur ton script: https://jsfiddle.net/CGsze/48/

On prend le parent de l'élément, on passe au suivant puis on prend les enfants dont on ne garde que le premier.

Non je n'ai pas trouvé, je suis une bille en java

Ton code fonctionne les puces changent bien, mais il ne permet pas de faire apparaitre l'image en grand avec le mouseover, j'ai ce code qui permet de faire aparaitre l'image 

//hover 'other views' images management
$(document).on('mouseover', '#views_block li a', function(){
	displayImage($(this)); 
});
 

La fonction

function displayImage(domAAroundImgThumb, no_animation)
{
	if (typeof(no_animation) == 'undefined')
		no_animation = false;
	if (domAAroundImgThumb.attr('href'))
	{
		var new_src = domAAroundImgThumb.attr('href').replace('thickbox', 'large');
		var new_title = domAAroundImgThumb.attr('title');
		var new_href = domAAroundImgThumb.attr('href');
		if ($('#bigpic').attr('src') != new_src)
		{
			$('#bigpic').attr({
				'src' : new_src,
				'alt' : new_title,
				'title' : new_title
			}).load(function(){
				if (typeof(jqZoomEnabled) !== 'undefined' && jqZoomEnabled)
					$(this).attr('rel', new_href);
			});
		}
		$('#views_block li a').removeClass('shown');
		$(domAAroundImgThumb).addClass('shown');
		// $('#views_block li a').length;
		
	}
}

Comment faire en plus de la classe pour afficher l'image en grand ?

-
Edité par NoceboNocebo 11 octobre 2018 à 14:48:36