Commentaires sur l'article jsPhotoViewer diaporama javascript facile

Bonsoir,
Votre script correspond parfaitement à ce dont j'ai besoin.
Malheureusement il entre en conflit avec un autre javascript sur la même page qui pourtant n'utilise pas jQuery. Donc jQuery.noconflict ne fonctionne pas dans ce cas.
Pouvez-vous m'aider?
d'avance merci et bonne année

Bonjour Trabi11fr,

Il entre en conflit à quel niveau ? Vous avez un exemple en ligne ?

Merci de me répondre aussi rapidement.
Pas d'exemple en ligne car le site est encore en construction. Mais je peux vous envoyer en zip les pages concernées.
J'ai un script pour un menu déroulant horizontal placé en premier:
******************
<script type="text/javascript">

var l=document.getElementById("Menu").getElementsByTagName('li');
for ( var n=0; n<l.length; n++ )
{

if ( l[n].getElementsByTagName('ul') && l[n].getElementsByTagName('ul').length>0 )
{
l[n].onmouseover = function()
{
this.getElementsByTagName('ul')[0].style.visibility="visible";
}
l[n].onmouseout = function()
{
this.getElementsByTagName('ul')[0].style.visibility="hidden";
}
l[n].getElementsByTagName('a')[0].innerHTML;
}

}

</script>
*********************

Les deux scripts fonctionnent correctement lorsqu'ils sont seuls sur une page. Mais si je les place sur la même page le premier ne fonctionne plus. Le problème semble se situer au niveau de ces lignes:

document.addEventListener('DOMContentLoaded', function(){ document.body.innerHTML += '<div id="jsPhotoViewer"><h3></h3><h2></h2><img onclick="jsPhotoViewerHide();" onload="jsPhotoViewerImgFadeIn();" onKeyPress="jsPhotoViewerHide();" src="#" alt="" /><p></p><ul><li><a id="jsPhotoViewerBtPrev" href="#" onclick="jsPhotoViewerPrev();return false;"><span>Pr&eacute;c&eacute;dent</span></a></li><li><a id="jsPhotoViewerBtNext" href="#" onclick="jsPhotoViewerNext();return false;"><span>Suivant</span></a></li></ul></div>';
});

addEventListener provoque l'arrêt de l'autre script.

Merci pour votre aide.

Bonjour Trabi11fr,

Vous pouvez coller le code du fichier dans un commentaire, je l'effacerais juste après si vous voulez.

Merci pour votre réactivité. ;-)

Voici le code du menu qui est ensuite inséré dans mes pages per un include:
*********************
[...]

***********************

Merci et bonne fin de journée

Il me faudrait le code générer pour que je trouve le problème. Comme ça c'est pas évident ;-)

Que voulez-vous dire par "le code générer" ?
Voici le code source d'une page complète telle qu'elle s'affiche lorsqu'elle est appelée.

**********************
[...]

Oui c'est. Je regarde ça plus tard et vous dit si je vois quelque chose.

Alors j'ai changé la ligne 211 en appelant jQuery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Le problème se situe à quelle niveau ?
En cliquant sur les images le script affiche bien le fond noir, le titre et la navigation. Mais le chargement ne va pas au bout parce qu'il ne trouve pas d'image.

Normal qu'il ne puisse pas charger les images puisque vous ne les avez pas.
Vous pouvez créer un répertoire "img" puis un sous répertoire "jardin" et y placer quelques photos.

La modification de la ligne 211 n'apporte rien. c'est déjà cette librairie que j'utilise. Je l'ai télécharger dans mon répertoire "js".

Comme je l'ai dit votre script fonctionne parfaitement mais il bloque le script du menu qui pourtant n'utilise pas jQuery.

Demain je suis absent. Mais dès que je rentre je vais mettre le site en ligne pour que vous puissiez mieux vous rendre compte du résultat.

Merci pour votre aide.

Jean-Luc Bonicoli

Ce sera plus simple avec quelque chose en ligne.

A tous hasard vous pouvez essayer de supprimer l'ajout du div une fois le DOM chargée :
document.addEventListener('DOMContentLoaded', function(){
document.body.innerHTML += '<div id="jsPhotoViewer"><h3>Chargement...</h3><h2></h2><img onclick="jsPhotoViewerHide();" onload="jsPhotoViewerImgFadeIn();" onKeyPress="jsPhotoViewerHide();" src="#" alt="" /><p></p><ul><li><a id="jsPhotoViewerBtPrev" href="#" onclick="jsPhotoViewerPrev();return false;"><span>Précédent</span></a></li><li><a id="jsPhotoViewerBtNext" href="#" onclick="jsPhotoViewerNext();return false;"><span>Suivant</span></a></li></ul></div>';
});

Et voir si le menu fonctionne correctement.

Bonsoir,

Si je supprime ce bloc, le menu fonctionne, mais les photos s'ouvent une à une dans la fenêtre principale.
***********
document.addEventListener('DOMContentLoaded', function(){
document.body.(......)onclick="jsPhotoViewerNext();return false;"><span>Suivant</span></a></li></ul></div>';
});
**********

J'ai mis une partis du site en ligne à l'adresse suivante :
http://probeseiten.jlbweb.fr/

Vous pourrez constater que sur la première page le menu fonctionne correctement.
Dans ce menu, sélectionnez "Le jardin" dans la rubrique "Présentation" (c'est le seul qui soit actif dans cette démo)
Vous constaterez alors que le menu ne fonctionne plus.
Si vous revenez en arrière par la navigateur sur la page "index", le menu fonctionne à nouveau.

Merci

Bizarre, je ne vois pas le problème.
Mais je sais comment je le contournerais.
J'utiliserais les CSS plutôt que javascript pour afficher / masquer les sous menu.

A tout hasard vous pouvez ajouter manuellement le bloc du visualiseur et supprimer son ajout en javascript :

<div id="jsPhotoViewer">
<h3>Chargement...</h3>
<h2></h2>
<img onclick="jsPhotoViewerHide();" onload="jsPhotoViewerImgFadeIn();" onKeyPress="jsPhotoViewerHide();" src="#" alt="" />
<p></p>
<ul>
<li><a id="jsPhotoViewerBtPrev" href="#" onclick="jsPhotoViewerPrev();return false;"><span>Précédent</span></a></li>
<li><a id="jsPhotoViewerBtNext" href="#" onclick="jsPhotoViewerNext();return false;"><span>Suivant</span></a></li>
</ul>
</div>

Le remplacement du bloc n'apporte aucun changement. :-(

L'avantage d'avoir le menu avec le javascript était d'assurrer un fonctionnement même avec des navigateurs un peu anciens (il y en a encore)

Je vais donc m'atteler à le modifier en CSS (mais ce n'est pas mon fort). J'espère y arriver.
Je vous tiendrais au courant de la suite....

Merci tout de même pour votre disponibilité.

Bonjour,
Mea culpa.
En fait en remplaçant
***********
document.addEventListener('DOMContentLoaded', function(){
document.body.(......)onclick="jsPhotoViewerNext();return false;"><span>Suivant</span></a></li></ul></div>';
});
**********
par le bloc que vus m'avez fournit, tout fonctionne correctement.
Simplement hier soir je ne l'avais pas placé au bon endroit (à l'intérieur du javascrit). La fatigue sans doute :-(
En le plaçant à l'extérieur tout est rentré dans l'ordre.

Que pensez vous de mon ajout dans votre script de la partie permettant de générer la liste des photos dynamiquement?

Encore une fois merci à vous.

Parfait si ça fonctionne. L'idée derrière ce code c'était de minimiser l'écriture javascript.
Je l'avais fait pour générer le balisage HTML depuis un fichier PHP sans avoir à créer de liste.
Après, à chacun d'adapter l'idée à ses besoins :-)

Merci beaucoup pour ce script et le tuto.
Exactement ce qu'il me fallait !

JFR