Sujets similaires

Bonjour,

Je viens d'installer sur mon forum test un petit slider (celui d'Espeon en fait que l'on trouve ici). Cependant, j'aurai aimé que lorsque je passe la souris sur l'un des slides, le défilement se stoppe pour reprendre une fois la souris enlevée.

Je lui ai envoyé un mp, mais n'ayant pas de temps pour pouvoir améliorer son codage, il m'a gentiment envoyé sur un autre slider plus évolué. Néanmoins, je ne comprends strictement rien au javascript et donc pour moi, même un peu guidée, je n'arrive pas à installer tous les tutoriels à télécharger que l'on peut trouver sur le net !

Je viens donc vous demander si l'un de vous serait capable d'améliorer le java d'Espeon afin d'y ajouter l'effet convenu. Sinon je venais vers vous pour savoir si l'un d'entre vous connaissait un slider simple d'installation ayant cette fonctionnalité (ou bien avec le système de flèches car en réalité peu m'importe tant que je peux avoir le temps de lire le texte que je mettrai sur chacun des slides) ?

Merci d'avance Very Happy

Bonjour !
Dans le code du slider que tu nous as founis, les fonctions de slide se lancent ici :

Code:: //LANCEMENT DE L'ANIMATION
setInterval(function() {
slideshowG()
}, delaiSwitchG);

setInterval(function() {
slideshowD()
}, delaiSwitchD);

Normalement tu as placé ton slider dans un div de classe "slider". Essaye de faire ça :

Code:: $defilement=true;
$(".slider").hover(function(){
defilement=false;
});

$(".slider").mouseout(function(){
defilement=true;
});

Puis de rajouter ceci à la place du code précédent :

Code:: if($defilement){
//LANCEMENT DE L'ANIMATION
setInterval(function() {
slideshowG()
}, delaiSwitchG);

setInterval(function() {
slideshowD()
}, delaiSwitchD);
}

C'est un peu artisanal alors ce n'est pas dit que cela fonctionne du premier coup, je vais travailler sur une autre possibilité pour te faciliter les choses =)

Bonjour j'ai testé mais le slider ne défile même plus.

Mais je pense que tu as fait une erreur car pour lancer l'animation le code c'est

Code:: //LANCEMENT DE L'ANIMATION
setInterval(function() {
slideshow()
}, delaiSwitch);

et non celui avec l'histoire des G ou D :/

Mais en tout cas merci beaucoup de m'aider !

EDIT1 : et aussi mes balises html sont "slide" et non "slider", est-ce aussi ce qui pourrait poser le problème ?

EDIT2 : C'est bon ça défile à nouveau, j'avais un problème d'accolades et en effet, j'ai enlevé cette histoire des G et D. Seulement, la fonction mousehover ne fonctionne pas.

Désolée du double post. Voici ce que j'ai dans mon code JS (au cas où j'ai mal collé quelque chose) :

Code:: $(function () {
//VARIABLES MODIFIABLES
var delaiSwitch = 5000; // Délai (en ms) d'affichage d'un slide
var delaiTransition = 1000; // Délai (en ms) de l'animation de transition
var direction = 'left'; // Sens (left ou right) du défilement
var idSlideshow = '#slideshow'; // ID du slideshow
var idContainer = '#slideshow-container'; // ID du container

//VARIABLES SYSTEME
var slideshowWidth = parseInt($(idSlideshow).css('width'));
var slideshowHeight = parseInt($(idSlideshow).css('height'));
var nbSlides = $(idContainer+' > .slide').length;

//ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
$(idContainer).css('width', slideshowWidth*nbSlides+'px');

//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
if(direction==='right') {
var decalageLeft = -slideshowWidth*(nbSlides-1);
$(idContainer).css('left', decalageLeft+'px');

$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).prepend(el);
}, this);
} else {
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).append(el);
}, this);
}

//ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
$(idSlideshow+' img').css('max-width', slideshowWidth);
$(idSlideshow+' img').css('max-height', slideshowHeight);

//LANCEMENT DE L'ANIMATION
if($defilement){
setInterval(function() {
slideshow()
}, delaiSwitch);
}

//FONCTION DE DEFILEMENT
function slideshow() {
var compteur = 0; // Compte les slides ayant bougé

if(direction==='right') {
$(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:last').remove();
$(idContainer).prepend(el);
$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});
} else {
$(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:first').remove();
$(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});
}
}
});

$defilement=true;
$(".slider").hover(function(){
defilement=false;
});

$(".slider").mouseout(function(){
defilement=true;
});

Re !

Essaye avec ça :

- D'abord déclencher ta fonction au chargement de la page

Code:: $(document).ready(function () {

au lieu de

Code:: $(function () {

Ensuite, déclare la variable avec les autres :

Code:: //VARIABLE DE DEFILEMENT
var defilement=true;

Et enfin, en DEHORS de ta fonction principale (après le }); ) , rajoute ceci :

Code:: $(".slide").mouseover(function(){
defilement = false;
}).mouseout(function(){
defilement=true;
});

Dis-moi si ça fonctionne =)

Dois-je laisser la partie "Lancement de l'animation" dans les variables ? Telle qu'elle est à l'origine ou bien avec la modification "if($defilement){" ?

Il faut que tu mettes la modification du if defilement.
Et je viens de comprendre ^^" ton conteneur s'appelle "slideshow, donc en fait... la dernière partie du code que je t'ai donné ne fonctionne pas x)

Il faudrait plutôt mettre ça :

Code:: $("#slideshow").mouseover(function(){
defilement = false;
}).mouseout(function(){
defilement=true;
});

Si jamais cela ne fonctionne pas, essaye d'appuyer sur F12, et donne-nous l'erreur que ça remonte ^^

Alors ça ne fonctionne pas...

J'ai testé le F12, aucune erreur remonte. Cependant, j'ai testé un truc car le défilement était carrément stoppé. Quand je laisse la modification if defilement rien ne bouge, je l'enlève ça remarche...

Je suis vraiment désolée que tes efforts n'aboutissement pas :/

Re !
Alors j'ai testé le code de mon côté, et il fonctionne Wink

Voilà les quelques erreurs :

Code:: //VARIABLE DE DEFILEMENT
var defilement=true;

Ceci est à mettre avant tout, en dehors des fonctions

Ensuite !

Code:: if($defilement){

est à remplacer par

Code:: if(defilement){

parce qu'on a déclaré défilement sans $ plus haut Wink

Enfin, essaye de remplacer la dernière fonction par ça :

Code:: $("#slideshow").mouseenter(function(){
defilement = false;
}).mouseleave(function(){
defilement=true;
});

Heureuse que ça fonctionne chez toi, au moins cela veut dire que c'est possible.

Pour ne pas que ça soit une erreur commise de ma part au niveau css ou html, j'ai réinitialisé et mis les codes que Espeon fournit. Cependant, j'ai peut-être dû faire une erreur au niveau JS car, certes ça défile mais l'effet voulu ne fonctionne pas. Voici mon JS :

Code:: //VARIABLE DE DEFILEMENT
var defilement=true;

$(document).ready(function () {
//VARIABLES MODIFIABLES
var delaiSwitch = 5000; // Délai (en ms) d'affichage d'un slide
var delaiTransition = 1000; // Délai (en ms) de l'animation de transition
var direction = 'left'; // Sens (left ou right) du défilement
var idSlideshow = '#slideshow'; // ID du slideshow
var idContainer = '#slideshow-container'; // ID du container

//VARIABLES SYSTEME
var slideshowWidth = parseInt($(idSlideshow).css('width'));
var slideshowHeight = parseInt($(idSlideshow).css('height'));
var nbSlides = $(idContainer+' > .slide').length;

//ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
$(idContainer).css('width', slideshowWidth*nbSlides+'px');

//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
if(direction==='right') {
var decalageLeft = -slideshowWidth*(nbSlides-1);
$(idContainer).css('left', decalageLeft+'px');

$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).prepend(el);
}, this);
} else {
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).append(el);
}, this);
}

//ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
$(idSlideshow+' img').css('max-width', slideshowWidth);
$(idSlideshow+' img').css('max-height', slideshowHeight);

//LANCEMENT DE L'ANIMATION
if(defilement){ setInterval(function() {
slideshow()
}, delaiSwitch);
}

//FONCTION DE DEFILEMENT
function slideshow() {
var compteur = 0; // Compte les slides ayant bougé

if(direction==='right') {
$(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:last').remove();
$(idContainer).prepend(el);
$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});
} else {
$(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:first').remove();
$(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});

$("#slideshow").mouseenter(function(){
defilement = false;
}).mouseleave(function(){
defilement=true;
});
}
}
});

Si tu laisses ta souris sur ton slideshow, est-ce que ça s'arrête de défiler ?

Non malheureusement pas...
Toi ton code JS était-il identique à celui que je viens de poster ?
Je suis vraiment désolée de te donner du fil à retordre comme ça...

EDIT : Avec un ami qui s'y connait un petit peu plus en javascript que moi, nous avons retourner le code de toutes les manières possibles et inimaginables seulement cela ne fonctionne toujours pas... Nous sommes peut-être de vraies quiches soit dit en passant ! xD Cependant, as-tu le même code de base pour le slider que nous ? Cela pourrait peut-être expliquer pourquoi les ajouts fonctionnent chez toi et pas pour moi, non ? (discours d'une totale novice en JS....)

Désolée du double post

Mais ça y est ! Mon ami a enfin trouvé !!! En tout cas merci de ton aide Minaeris, je pense que tu lui a été quand même d'une bonne aide au départ pour qu'il puisse à son tour étudier le code pour m'aider !

Je vais soumettre cette évolution du code à Espeon pour voir s'il veut mettre à jour le sien au cas où cela pourrait intéresser des gens.

Bisous, le sujet est résolu Very Happy

Et bien bonjour/bonsoir toutes les deux et quel travail dîtes moi Smile

Effectivement, comme je l'avais expliqué à Clairmione, je n'ai pas forcément le temps de me pencher là-dessus en ce moment et le slideshow est vraiment basique basique. A vrai dire, si on veut rajouter des fonctionnalités, autant le reprendre pour en faire un vrai plugin qui soit plus simple à prendre en main pour tout le monde (comme une boite noire, on voit pas le code qu'il y a dedans mais on peut l'utiliser). Simplement je n'avais pas fait ça parce-que j'estimais qu'il y avait déjà des dizaines et des dizaines de plugins pour faire des slideshows donc bon...

Cela étant, j'ai lu vos solutions et, partant sur la dernière ici proposée, voici comment je l'arrangerais pour que votre effet fonctionne plus simplement tout en gardant la qualité du code :

Code:: $(function () {
// VARIABLES MODIFIABLES
var delaiSwitch = 5000, // Délai (en ms) d'affichage d'un slide
delaiTransition = 1000, // Délai (en ms) de l'animation de transition
direction = 'left', // Sens (left ou right) du défilement
idSlideshow = '#slideshow', // ID du slideshow
idContainer = '#slideshow-container'; // ID du container

// VARIABLES SYSTEME
var slideshowWidth = parseInt($(idSlideshow).css('width')),
slideshowHeight = parseInt($(idSlideshow).css('height')),
nbSlides = $(idContainer+' > .slide').length,
defilement = true;

// ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
$(idContainer).css('width', slideshowWidth*nbSlides+'px');

// REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
if(direction==='right') {
var decalageLeft = -slideshowWidth*(nbSlides-1);
$(idContainer).css('left', decalageLeft+'px');

$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).prepend(el);
}, this);
} else {
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).append(el);
}, this);
}

// ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
$(idSlideshow+' img').css('max-width', slideshowWidth);
$(idSlideshow+' img').css('max-height', slideshowHeight);

// LANCEMENT DE L'ANIMATION
setInterval(function() {
if(defilement) {
slideshow();
}
}, delaiSwitch);

//FONCTION DE DEFILEMENT
function slideshow() {
var compteur = 0; // Compte les slides ayant bougé

if(direction==='right') {
$(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:last').remove();
$(idContainer).prepend(el);
$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});
} else {
$(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:first').remove();
$(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});
}
}

// ARRET AU SURVOL
$(idSlideshow).hover(function() {
defilement = false;
}, function() {
defilement = true;
});
});

Quelques points donc :

$(function() { ... } et $(document).ready(function() { ... } c'est la même chose, la première méthode est juste plus rapide à écrire, c'est un raccourci
Je me suis rendu compte que j'écrivais var ... à chaque fois. En fait, une seule fois suffit si on sépare le reste avec des virgules plutôt que des ;
J'ai intégré la variable defilement dans le code, du côté des variables du système car c'est un truc utilisé en interne par le code
Le coup du if(defilement) est effectivement une méthode simple pour savoir si on lance ou pas le défilement vu le code actuel (c'est pas le plus sexy mais c'est comme ça qu'a été fait le code alors bon ).
La méthode jQuery .hover() remplace les deux méthodes .mouseenter() et .mouseleave en fait, et c'est plus stable
Utiliser la variable idSlideshow évite de dépendre de l'identifiant #slideshow "en dur" (autrement dit, le même code produit le même effet, peu importe votre configuration, ça évite les problèmes de synchronisation que vous avez eu)

Voici, je ne sais pas quelle était ta solution Clairimione mais c'est probablement comme ceci que je ferais évoluer le code en l'état actuel Smile

J'attends de te lire, en attendant, voici le résultat (avec le code HTML/CSS du tutoriel) : http://jsfiddle.net/espeon/vdtJg/embedded/

Merci pour t'être également penché sur mon interrogation ! Voici ce que mon ami a réussi à faire au final :

Code:: //VARIABLE DE DEFILEMENT
var defilement=true;

$(document).ready(function () {
//VARIABLES MODIFIABLES
var delaiSwitch = 5000; // Délai (en ms) d'affichage d'un slide
var delaiTransition = 1000; // Délai (en ms) de l'animation de transition
var direction = 'left'; // Sens (left ou right) du défilement
var idSlideshow = '#slideshow'; // ID du slideshow
var idContainer = '#slideshow-container'; // ID du container

//VARIABLES SYSTEME
var slideshowWidth = parseInt($(idSlideshow).css('width'));
var slideshowHeight = parseInt($(idSlideshow).css('height'));
var nbSlides = $(idContainer+' > .slide').length;

//ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
$(idContainer).css('width', slideshowWidth*nbSlides+'px');

//REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
if(direction==='right') {
var decalageLeft = -slideshowWidth*(nbSlides-1);
$(idContainer).css('left', decalageLeft+'px');

$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).prepend(el);
}, this);
} else {
$(idContainer+' > .slide').each(function() {
var el = $(this).remove();
$(idContainer).append(el);
}, this);
}

//ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
$(idSlideshow+' img').css('max-width', slideshowWidth);
$(idSlideshow+' img').css('max-height', slideshowHeight);

//LANCEMENT DE L'ANIMATION
if(defilement){ setInterval(function() {
slideshow()
}, delaiSwitch);
}

//FONCTION DE DEFILEMENT
function slideshow() {
if (!defilement) return;
var compteur = 0; // Compte les slides ayant bougé

if(direction==='right') {
$(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:last').remove();
$(idContainer).prepend(el);
$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});
} else {
$(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
compteur++;

// Lorsque le dernier slide à bougé, on crée la boucle
if(compteur===nbSlides) {
var el = $(idContainer+' > .slide:first').remove();
$(idContainer).append(el);

$(idContainer+' > .slide').css('left', '0');

compteur = 0;
}
});

$("#slideshow").mouseenter(function(){
defilement = false;
}).mouseleave(function(){
defilement=true;
});
}
}
});

Bonsoir,

Puis-ce que le problème est résolu, j'archive. Smile

[résolu]Souci avec un slideshow

[résolu]Souci avec un slideshow

Sujets similaires

Sujets similaires

Partenaires Or