11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec mon diaporama jqwery !

Bonjour à tous,

je suis entrain d'élaborer mon site perso, j'ai intégrer un Diaporama (http://www.serie3.info/s3slider/) en Jqwery sur la home (entre le header et la premier ligne cyan), il marchait très bien jusqu'a aujourdhui ou il m'est impossible de le faire aparaitre (j'ai éesayer de tous réinstaller, pas moyen),

l'adresse : http://tristanroger.fr/

Vous pouvez constater page gallerie qu'un pluggin de lightbox marche.
Donc je ne sais vraiment pas d'ou cela vient, quellqu'un peut il m'aiguiller ?

merci !
Modifié par Teytoon (15 Jul 2010 - 13:36)
Salut,

Tu appelles deux fois la librairie jQuery (et pas Jqwery…) :

<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>


Ensuite, quel est l'intérêt de faire ça :

<script type="text/javascript">$(function() { $('a.lightbox').lightBox();});</script>
<script type="text/javascript">$(function() { $('a.lightbox_droite').lightBox();});</script>

Quand on peut faire ça :

<script type="text/javascript">
$(function() {
	$('a.lightbox').lightBox();
	$('a.lightbox_droite').lightBox();
});
</script>


De là on verra si l'erreur suivante est toujours présente:

Erreur : $("#s3slider").s3Slider is not a function
Fichier Source :  http://tristanroger.fr/js/js.js
 
Ligne : 3



Enfin, attention aux fautes ! Il y en a plein dans ce post et aussi sur ton site…

Ex :
Gallerie > Galerie
anéne > année
préstations > prestations
proffessionelles > professionnelles
ouah, merci, concernant les fautes il est clair que je compte me faire relire c'est une sale manie...

pour résoudre mon problème je vais test ce que tu me propose, en te remerciant !
super ça remarche !

seul problème, dans la section galerie l'effet lightbox ne marche plus (aparament du au fait que j'ai supprimé le fichier jquery.js) comment faire pour le relier ?

merci encore !
Pas trouvé la source exacte du problème, mais:
<head>
...
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>

<script src="js/jquery.lightbox-0.5.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(function() { 
    $('a.lightbox').lightBox(); 
    $('a.lightbox_droite').lightBox(); 
}); 
</script>
...
</head>

1. Il est préférable d'appeler les scripts JS juste avant </body> et pas dans le HEAD. Voir du côté de YSlow, Google Page Speed pour plus d'infos.

2. Il vaudrait mieux utiliser une version minifiée de jQuery, beaucoup plus légère!
Je te laisse comparer:
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js
Tu peux d'ailleurs directement appeler jQuery depuis les serveurs de Google (c'est fait pour et c'est plutôt fiable):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

3. Un fichier 'js.js' juste pour trois lignes de JavaScript, ça fait limite une requête HTTP pour rien ça.

4. Tu pourrais concaténer certains de tes fichiers JavaScript. Au minimum les libs 'Slider' et 'Lightbox' (de préférence en utilisant des versions minifiées).

Au final ton code HTML pourrait ressembler à ceci (avec zéro appel de JS dans le HEAD):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="/scripts/libs.min.js"></script><!-- Slider + Lightbox, versions minifiées -->
<script src="scripts/main.js"></script><!-- Initialisation slider + lightbox, fonctions personnalisées -->
</body>

Bien sûr c'est toi qui vois si tu veux un site optimisé ou bricolé. Smiley cligne
Modifié par Florent V. (15 Jul 2010 - 20:38)
Quant au problème pour le script de Lightbox, c'est peut-être lié à l'erreur lors de l'exécution de slider.js (voir la console de Firebug par exemple)? Dans certains cas de figure, une erreur dans l'exécution d'un script JS peut bloquer l'exécution des scripts suivants, il me semble.
salut, merci pour tous c'est supers conseils ! je suis entrain de grouper tous ça en local,

par contre j'ai peur que l'erreur js me pause problème, j'ai regarder ligne 23 (j'y connais très peu ou rien en js) et je ne c'est comment m'y prendre... je vais éesayer de trouver un autre plug, dommage, si tu as la réponse je suis preneur ! merci encore !
Faudrait vraiment que tu fasses gaffe aux erreurs d'inattention… à la dernière ligne de ton fichier style.css, tu as laissé ça :

#rss


Corrige et on voit après si y'a d'autres erreurs. Et concernant le reste, je te conseille de suivre les propositions de Florent.


PS : ah et si la lightbox marche pas dans la galerie, c'est simplement parce que tu appelles le script sur un élément qui n'est pas présent dans la page. Du coup, ça renvoie une erreur avant l'appel de la lightbox, et paf ça marche plus.
Modifié par ZeB_panam (15 Jul 2010 - 23:52)
ok je met de l'odre,

concernant la light box, comment faire pour l'inclure dans ma page gallerie ? il est dans le header.php je ne comprend pas pourquoi ca ne le detecte pas...

mais effectivement quand je place une class lightbox sur mon index.php la l'effet marche..
Bon, je crois que j'ai trouvé.

Sur la page galerie, tu utilises le plugin jQuery.s3Slider, que tu instancies ainsi:
$('#s3slider').s3Slider({ 
   timeOut: 3000 
});

Le problème, c'est qu'il n'y a pas d'élément qui porte l'identifiant "s3slider" dans la page. En temps normal ça ne pose pas de problème, le plugin devrait pouvoir retourner une valeur vide et éviter de s'exécuter. Sauf que là il s'exécute quand même, et génère une erreur JavaScript qui a l'air de bloquer le reste des scripts (pas l'appel du script lightbox, qui intervient avant, même si dans le code HTML il apparait après; mais l'instanciation du plugin lightbox, oui).

Donc en gros on peut dire que ce plugin (s3Slider) est mal fichu.
Solutions possibles:
- Ne pas utiliser s3Slider et préférer un plugin mieux fait, ou coder soi-même l'effet souhaité.
- Ne pas appeler et surtout ne pas instancier s3Slider sur les pages où il ne doit pas être utilisé (pas bien compliqué, hein).
- Tester que l'élément qui porte l'id "s3slider" est dans la page avant d'instancier le plugin s3Slider.
Florent V. a écrit :

Le problème, c'est qu'il n'y a pas d'élément qui porte l'identifiant "s3slider" dans la page.

Oui, c'est ce que je disais ici, mais de façon bien moins explicite Smiley langue
a écrit :

PS : ah et si la lightbox marche pas dans la galerie, c'est simplement parce que tu appelles le script sur un élément qui n'est pas présent dans la page. Du coup, ça renvoie une erreur avant l'appel de la lightbox, et paf ça marche plus.


Et tout à fait d'accord avec toi Florent, ce plug-in a l'air assez mauvais…

Sinon, pour savoir si un élément est présent dans la page, il suffit de chercher son index() via jQuery. S'il est absent, cela retourne -1.

Exemple :

jQuery(function ($) {
	var element = $("#s3Slider");
	if(element.index()!=-1){
		$('#s3slider').s3Slider({  
			timeOut: 3000  
		});
	}
});


Ou encore avec la propriété length :

jQuery(function ($) {
	var element = $("#s3Slider");
	if(element.length!=0){
		$('#s3slider').s3Slider({  
			timeOut: 3000  
		});
	}
});
bon j'ai à peu près saisie et je vous en remercie ! (je n'y connais rien autre qu'en html/css), et en remplaçant l'apelle PHP de mon header par le code et en enlevant les script slider effectivement la light box marche... il faudrais donc que j'arrive à isoler mon "slider" et à seulement l'appeller sur "index.php", je pense que c'est ce que tu suggère ici : "Ne pas appeler et surtout ne pas instancier s3Slider sur les pages où il ne doit pas être utilisé (pas bien compliqué, hein)."

mais comment faire cette "include" car il est obliger de ce situer avant le body...
Teytoon a écrit :
mais comment faire cette "include" car il est obliger de ce situer avant le body...

D'une, tu peux tout à fait appeler tes scripts JS à la fin du BODY plutôt que dans le HEAD.
De deux, il y a différents moyens en PHP (et autres langages) pour afficher du code commun à toutes les pages et d'autres codes spécifiques à certaines pages. Par exemple, dans galerie.php tu peux déclarer des variables, et si ensuite tu inclues un header.php ou footer.php un fichier de ce genre, tu peux tester la valeur de ces variables ou les utiliser pour modifier le code HTML produit.
merci pour ta réponse, je suis trop novice en php pour le coup des variables par contre je vais tenté le coup avec les script dans le body, merci !
Sujet clos
Aller à