Crée une fonction de photo 'slider'

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Crée une fonction de photo 'slider'

deuxk

Bonjour tout le monde !

J’ai un problème avec une function de défilement photo que j’essaies actuellement de crée.Je crois que c’est un problème de structure, car il est fonctionnel mais après quelques cliques pour défilé les images, il fait littéralement ‘’bugger’’ mon navigateur.

Voici ce que j’ai de fait du coté Jquery :

Code :

(function( $ ){
/* AUTRE FUNCTION … ****/
/* Déroulement Photo ****/
$.fn.photoScroll = function(options) {
var config = { leftArrow : '#leftArrow',
rightArrow : '#rightArrow',
photoSlider : '#photoSlider',
photoUL : '#photoUL',
scrollWidth : 150,
scrollSpeed : 300 }
if (options){ $.extend(config, options); }
$(config.leftArrow).on({'click': function() {
var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
$(config.photoSlider).stop(true,true).animate({scrollLeft:( pos - config.scrollWidth)+'px'}, config.scrollSpeed);
}
});
$(config.rightArrow).on({'click': function() {
var pos = ($(config.photoSlider).scrollLeft())?(Math.round(($(config.photoSlider).scrollLeft()/config.scrollWidth))*config.scrollWidth):0;
$(config.photoSlider).stop().animate({scrollLeft: (pos+config.scrollWidth)+'px'}, config.scrollSpeed);
}
});
}
})( jQuery );

Voici ce que ressemble mon code html (je vous épargne le CSS) :

Code :

<div id="photoToScroll" style="width:100%;">
<div id="leftArrow"> </div>
<div id="rightArrow" style=" margin-right:0px;"> </div>
<div id="center">
<div id= « photoSlider" >
<ul class="photoUL" id="photoUL">
<!—BEGIN-LOOP image -->
<li >PHOTO</li>
<!—END-LOOP image -->
</ul>
</div>
</div>
</div>

Est-ce que je m’y prends de la bonne façon ? sinon, quel serait la meilleur façon ?

Merci d’avance

Message édité par deuxk le 14-11-2013 à 15:08:32

Publicité

lasnoufle

La seule et unique!

Desole j'y connais quasi rien en JQuery. Mais c'etait juste pour te dire que tu ferais mieux de changer ta balise parce que c'est pas du Java du tout (au mieux du Javascript on va dire, mais ces deux languages n'ont environ rien a voir) et du coup tu perds des gens qui pourraient peut-etre t'aider mais ne lisent pas le message parce qu'ils croient que tu as un probleme Java.

Edit: mets cette balise la: [HTML/CSS/Javascript]

Message édité par lasnoufle le 14-11-2013 à 04:25:32

---------------
C'était vraiment très intéressant.

Pablo Escrobarbe

Retour d'exil

Effectivement j'y connais rien en Java mais heureusement le titre m'a fait penser à un pb Javascript, le mieux serait aussi que tu nous copie le message d'erreur dans la console de ton navigateur, si tu utilises FireFox, prend le plugin Firebug qui t'aideras bien.

deuxk

Malheureusement, je n'ai aucun message d'erreur dans ma console; le mieux que je peux faire c'est essayer de vous expliquez du mieux que je peux ce qui ce passe.

Premierement, j'appuie sur la fleche de droite, tout procèdes comme il ce doit, les images bouge et tout est OK, j'appuie une deuxieme fois tout est OK, ainsi de suite.
Je reviens vers la gauche, ca va, apres 2-3 fois, mon curseur devient le cursur de ''loading'' et ca n'arrrête pas.
Apres quelque instant j'ai une message d'erreur qui me demande si je veux continuer a executer le script ou stopper le script!
Pour le message exacte, je vous reviens dans quelque minutes avec ca, je vais aller planter tout ca

merci

deuxk

Je ne reussi pas a avoir le messsage d'erreur que je parlais plus haut, la il plante completement mon navigateur et je dois restaurer la session..

lasnoufle

La seule et unique!

Bon comme je disais, j'y connais rien, mais ton code a l'air bizarre: ta fonction pour le scroll right n'est pas "symetrique" a celle pour le scroll gauche. Deja le stop() a des parametres dans l'un et pas dans l'autre (aucune idee de si ca joue) mais surtout tu bases ton scroll droit sur le gauche en inversant un truc (si j'ai bien compris).
D'ou des trucs "de base":
- est-ce que ton scroll gauche marche a l'infini?
- est-ce que que gauche-gauche-droite-gauche a l'infini plante?
- t'es sur de la maniere dont tu geres pos et config.scrollWidth dans celui de droite? As-tu essaye de mettre des alertes pour voir la tete de ce que tu passes comme parametre a animate? A coupler avec la doc de animate et les valeurs attendues je suppose.
- si la gauche marche a l'infini, est-til possible de symetriser "completement" la droite? (i.e. utiliser scrollRight si ca existe, etc)

Edit: bon OK visiblement ScrollRight n'existe pas, c'est quoi ce truc de winner encore...
D'autres pistes vite fait:
- qu'est ce qui se passe quand tu atteinds ta derniere image et tente de continuer, t'es sur que c'est pas ca qui cause le plantage?
- t'as bien verifie que $(config.photoSlider) te renvoies bien un seul objet?
- t'as essaye sans .stop() nulle part histoire de voir si ca plante pareil ou pas?

Message édité par lasnoufle le 14-11-2013 à 17:59:42

---------------
C'était vraiment très intéressant.

deuxk

- qu'est ce qui se passe quand tu atteinds ta derniere image et tente de continuer, t'es sur que c'est pas ca qui cause le plantage?
oui, sûre et certain!

- t'as bien verifie que $(config.photoSlider) te renvoies bien un seul objet?
J'ai vérifier, mais je crois que non!

- t'as essaye sans .stop() nulle part histoire de voir si ca plante pareil ou pas?
Oui, j'ai essayer, aucun changement!
Aussi j'ai essayer les 2 avec .stop(true,true) et seulement stop()

- est-ce que ton scroll gauche marche a l'infini?
Il peu descendre dans le négatif, mais je ne crois pas que cela cause le problème!

- t'es sur de la maniere dont tu geres pos et config.scrollWidth dans celui de droite? As-tu essaye de mettre des alertes pour voir la tete de ce que tu passes comme parametre a animate? A coupler avec la doc de animate et les valeurs attendues je suppose.
Oui, et pos augment et diminue comme il ce doit, mais apres quelque clique (gauche ou droite) ma souris ce mes a 'loader' et il me demande si je veux arrêter le script.

J'ai essaye des 100taines de chose, je suis au bout de mes connaissances. Malheureusement, je crois que c'est une trouble de Loop, mais je ne vois rien qui causerais cela.

Si tu as une idée, c'est bienvenue

merci encore!

lasnoufle

La seule et unique!

Nan desole comme je disais je connais ni JQuery ni Javascript en general, stait juste quelques idees comme ca mais je peux pas t'aider. A+

---------------
C'était vraiment très intéressant.

MaybeEijOrNot

but someone at least

Si ton navigateur ne répond plus alors oui c'est surement causé par une boucle infinie, probablement causé par les valeurs de tes positions je dirai car autrement ça serait la bibliothèque qui bug.

deuxk

et bien, même si j'enleves tout que je fais juste un console.log('...'); il va me faire la même chose.
Et j'ai essaye plusieurs version du Jquery...

au secour

FORUM HardWare.fr

Programmation

HTML/CSS

Crée une fonction de photo 'slider'

Sujets relatifs
aide requête sql updateen fonction champ autre table	Comment sélectionner une option d'un select en fonction d'un autre?
comment fonctionne la fonction crypt() ?	appel d'une fonction hors procédure principale dans visual basic
allocation memoire dans une fonction	obtenir tous les appels à une fonction, en fin de code
Faire fonctionner la fonction filemtime	Insérer un slider dans ma page
Tracer d'une fonction de répartition sous java	VBA - couleur texte cellule en fonction du jour
Plus de sujets relatifs à : Crée une fonction de photo 'slider'

Page générée en 0.041 secondes