[Résolu] Galerie Photos + Texte Liste Contacts

Bonjour, j'ai suivi le Tuto "Galerie photo avec JavaScript" de Alsacréations.

En fait je l'ai adapté à mon besoin qui est d'avoir simplement l'affichage de photos miniatures, et lorsqu'on clique sur une miniature, ça n'affiche pas la photo en grand mais du texte.

Dans le HTML, j'ai donc remplacé le contenu de l'attribut 'title' (Titre de la photo 1) des balises 'a' par le texte que je voulais afficher. Cela fonctionne y'a pas de soucis il affiche ce que je veux.

Le soucis c'est que dans mon texte, j'aimerai pouvoir y inserer des liens 'mailto' notamment, et pouvoir passer à la ligne (/br) qd je le veux.
Donc forcément ça pose problème puisqu'à l'intérieur de l'attribut 'title' on peut pas mettre ce genre de trucs ...


J'ai réflechi à une solution de type : Cliquer sur une image renvoie à une balise <div> qui s'afficherai où je veux avec le contenu que je veux, mais ça me semble pas très facile à mettre en place.

Voilà, si vous voyez ce que je veux dire, je vous serais très reconnaissant de me passer un coup de main, merci d'avance.

Communautairement,

ToNiO
Modifié par Tonio45 (20 Jun 2007 - 00:05)

Salut,

J'avais fait un petit topo sur ce sujet, alors ça te sera peut être utile.

C'est ici :

http://www.clb56.fr/test_php_js/etude_galerie_js/

Je te remercie pour le sérieux de cette étude et pour ta réponse
Cela dit, et même en reprenant tes scripts, je n'arrive pas à mes fins.

Le contenu des balises <p> reste affiché. Alors que le code JS est censé faire en sorte que le contenu d'une balise <p> ne s'affiche que lorsqu'on clique sur la photo correspondante, non ?

Merci d'avance.

Salut,

a écrit :

Le contenu des balises <p> reste affiché. Alors que le code JS est censé faire en sorte que le contenu d'une balise <p> ne s'affiche que lorsqu'on clique sur la photo correspondante, non ?

Oui c'est presque ça, en fait c'est tous les éléments p (et leur contenu) qui sont supprimés via javascript.
Le contenu de chaque p n'existant plus que dans un tableau (array), et restant donc néanmoins manipulable.

Le plus simple pour moi, pour t'aider, serait que tu mettes ton essai en ligne.

Ou à défaut, le code in extenso.

La difficulté de mes topos c'est qu'il ne s'agit pas de tutoriels, et donc le lecteur est obligé de faire un sacré bout de boulot.
L'autre difficulté c'est que je ne raisonne qu'en terme de surcouche javascript.
Modifié par Christian Le Bouler (14 Jun 2007 - 18:36)

Je te remercie Chrisitian. Je metterai le code demain afin que tu puisses y jeter un oeil et sans doute m'aider. Je suis en galère!
Merci encore A dem

Ok voici mes fragments de code :

A commencer par le HTML :

<div id="galerie">
	

		
	
	<ul id="galerie_mini">
		
		<li><a href="#" ><img src="photos/personne1.jpg"></a>
		<p> Personne 1 - Responsable Activité 1 </br> Mail: <a href="mailto:personne1@truc.com">personne1@truc.com</a></br> Tél: 06 00 00 00 00 </br> </p>
		</li>

		<li><a href="#" ><img src="photos/personne2.jpg"></a>
		<p> Personne 2 - Responsable Activité 2 </br> Mail: <a href="mailto:personne2@truc.com">personne2@truc.com</a></br> Tél: 06 00 00 00 00 </br> </p>
		</li>		

		<li><a href="#" ><img src="photos/personne3.jpg"></a>
		<p> Personne 3 - Responsable Activité 3 </br> Mail: <a href="mailto:personne3@truc.com">personne3@truc.com</a></br> Tél: 06 00 00 00 00 </br> </p>
		</li>
		
		<li><a href="#" ><img src="photos/personne4.jpg"></a>
		<p> Personne 4 - Responsable Activité 5 </br> Mail: <a href="mailto:personne4@truc.com">personne4@truc.com</a></br> Tél: 06 00 00 00 00 </br> </p>
		</li>

		<li><a href="#" ><img src="photos/personne5.jpg"></a>
		<p> Personne 5 - Responsable Activité 5 </br> Mail: <a href="mailto:personne5@truc.com">personne5@truc.com</a></br> Tél: 06 00 00 00 00 </br> </p>
		</li>
	
	</ul>

		<dl id="photo">
			<dt>Contacts - Cliquez sur une image</dt>
		</dl>
</div>

Le CSS Correspondant :

div#galerie
{
	width: 800px;
	height: 100px;
	background: none ;
	border: none ;
	padding: 0px ;
	margin-left: 20px ;
	margin-right: -9%;
	text-align: center ;
	font: 6px Calibri;
}

ul#galerie_mini
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}

ul#galerie_mini li
{
	float: left ;
}

ul#galerie_mini li a img
{
	margin: 2px 5px ;
	border: 1px solid lightgrey ;
	
}

ul#galerie_mini li a:hover
{
		border: 1px solid red;
}

dl#photo
{
	clear: both ;
	margin: 0 auto ;
}

dl#photo dt
{
	font: bold 14px Calibri ;
	color: black;
	width: 650px;
}

dl#photo dd
{
	margin: 0 ;
}

dl#photo img
{
	border: 1px solid lightgrey ;
}

Et le JS utilisé est celui de ton étude. Je le remet au cas où :

function DisplayPics2()
{

var photos = document.getElementById('galerie_mini') ;
var liens = photos.getElementsByTagName('a') ;
var tableau_commentaire=new Array();

for (var i = 0 ; i < liens.length ; ++i)
{
tableau_commentaire[i]=liens[i].parentNode.getElementsByTagName('p')[0].innerHTML;

var para=liens[i].parentNode.getElementsByTagName('p')[0];
liens[i].parentNode.removeChild(para);


// On ajoute maintenant...

/* Merci à golog pour cette technique permettant de récupérer le numéro d'ordre de chaque vignette lien */
liens[i].no_ordre = i;

liens[i].onclick = function()
{
big_photo.src = this.href;
big_photo.alt = this.title;

/* Pour chaque occurence de lien cliqué on récupère la description de même niveau d'ordre dans le tableau 'tableau_commentaire' ... */
var commentaire_big_photo=tableau_commentaire[this.no_ordre];

/* ... Et on utilise le résultat pour générer le contenu de l'élément 'titre_photo' ( pour l'instant indéterminé ) */
titre_photo.innerHTML = commentaire_big_photo;

return false;
}
}
}

Voilà et donc en fait ce que j'aimerai c que le contenu des balises <p> s'affiche simplement lorsqu'on clique sur la photo correspondante et non tout le temps.

Merci beaucoup, j'attends de tes nouvelles.[/i][/i][/i][/i][/i][/i]

Salut,

tu déclares la fonction mais tu ne la lances pas, il manque :

window.onload=DisplayPics2;

Tout à la fin.

Tiens j'ai pris un peu de temps pour trouver une construction qui réponde à ce que tu cherches à obtenir.

J'en ai profité pour mettre des noms de variables plus en cohérence avec ton contexte.

J'obtiens ceci :
http://www.clb56.fr/test_contacts_js/

Avec comme js principal :
http://www.clb56.fr/test_contacts_js/js_contacts.js

Et un petit js complémentaire, à appeler en 1er dans le head du document :
http://www.clb56.fr/test_contacts_js/wait_loading.js


C'est fonctionnel même si loin d'être optimal. Il manque le passage du focus de l'image cliquée au lien mail s'il existe par exemple.
Et il y a aussi le fait que quand js est inactif, les images n'ont vraiment plus aucune raison d'être dans des liens.

Mais bon ça demanderait un travail plus pointilleux pour régler tous les détails. Et là j'ai un peu la flemme
Modifié par Christian Le Bouler (16 Jun 2007 - 12:04)

Ah impeccable!
Ca marche ici, ça fait plaisir.
Merci beaucoup Christian pour ton aide et ton esprit communautaire.

++

Dis moi, j'ai simplement une dernière question supplémentaire, j'ai besoin d'afficher les photos horizontalement.
Y'aurait-il qqc dans le JS qui fait que les photos sont les unes en dessous des autres ?
Y'a moyen en CSS de les afficher alignées mais c vraiment pas très propore.

Aurais-tu à tout hasard une astuce pour les afficher en ligne ?

Merci.

Tonio45 a écrit :

Y'aurait-il qqc dans le JS qui fait que les photos sont les unes en dessous des autres ?

Non c'est le code html lui même puisque chaque vignette et son texte associé sont compris dans un item <li> de liste non ordonnée <ul>.

Pour un affichage particulier c'est bien les css qu'il faut utiliser.

Bon comme l'affichage concerne surtout le cas où javascript sera actif chez l'utilisateur le mieux c'est de générer en js une classe à la liste des liens id="liste_contact" pour avoir un style qui ne vient pas fiche le bazard quand js est inactif.
Donc dans js_contacts.js ça en plus :

/*
On génère une classe pour la liste des vignettes afin d'appliquer un style spécifique si js est actif
*/
document.getElementById('liste_contact').className = 'dynGalerie';

J'ai fait les modifications qui illustrent cela dans mon exemple en ligne précédent.
Modifié par Christian Le Bouler (18 Jun 2007 - 16:09)

Ok je comprends ce que tu me proposes de faire.

J'ai mis

 document.getElementById('liste_contact').className = 'dynGalerie';

cette ligne dans js_contacts.js.

Et dans mon CSS j'ai mis du :

#liste_contacts.dynGalerie{

//Le style que j'applique
width: 800px;
height: 200px;
}

A noté aussi que dans mon html j'ai remplacé la balise <ul> de "liste_contacts" par un <div>.

Et donc avec tout ça, toujours pas moyen d'afficher toutes les photos sur la même ligne!? Serais-je mauvais ?

Si tu peux m'aider tu assures, merci d'avance.

PS: Je n'ai pas vu les modifications dans ton exemple en ligne précedent.
Modifié par Tonio45 (18 Jun 2007 - 17:11)

Tonio45 a écrit :

A noté aussi que dans mon html j'ai remplacé la balise <ul> de "liste_contacts" par un <div>.

Et pourquoi donc ???

En plus si tu as changé <ul> en <div> tout en gardant des item <li> alors le code html n'est pas valide.

a écrit :

Je n'ai pas vu les modifications dans ton exemple en ligne précedent.

il y a deux modifs

. Une au début du javascript :

function magic_contact() {
document.getElementById('liste_contact').style.display='block';

/*
  on génère une classe pour la liste des vignettes afin d'appliquer un style spécifique si js est actif
*/
document.getElementById('liste_contact').className = 'dynGalerie';

... Etc...

. Et l'autre dans le head du document html :

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
    <title>
      Test contacts js
    </title> 
    <script type="text/javascript" src="wait_loading.js"></script>
    <script type="text/javascript" src="js_contacts.js"></script>
    [b]
    <style type="text/css">
    #liste_contact.dynGalerie  {
    list-style-type:none;
    margin-left:0;
    padding-left:0;
    }
    #liste_contact.dynGalerie li {
    display:inline;
    margin:10px 5px;
    }
    </style>
    [/b]
</head>

Ce coup-ci c'est bon ça marche parfaitement comme je le voulais, c'est superbe, je suis très satisfait.
Merci encore à toi Christian et merci à Alsacréations pour être si bien réferencé !

En revanche, juste un dernier détail.

Sur la page où j'affiche ces photos, y'a également un menu vertical fait en JS. Celui-ci comporte des sous-menus (qui apparaissent en horizontal lorsque onmouseover () ... etc).

J'ai le pb suivant lorsque je vais sur ma page : les sous-menu déroulants s'ouvrent directement et restent ouvert. Je suis obligé de passer ma souris dessus pour qu'ils s'enlèvent.

Voici ce qu'il y'a dans mon <head>:

<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="wait_loading.js"></script>
<script type="text/javascript" src="js_contacts.js"></script>

Et lorsque que j'enlève l'appelle à wait_loading et js_contacts, alors y'a plus de pb avec le menu.
Sans doute un conflit JS.

Si tu as une idée pour m'aider à régler ce détail, je suis preneur!

Merci A +

C'est un problème bien connu de l'écrasement des différents window.onload

Le mieux c'est que tu consultes la faq, que tu ailles faire un tour du coté des tutoriels javascripts de ce site, et qu'après tout ça tu ailles demander conseils dans le salon javascript. Ce sera mieux si des gens ayant de vraies compétences techniques te répondent.

Bon évidemment il y aurait aussi la possibilité que tu t'épargnes ces fichus menus déroulants ... Mais ça c'est encore une autre histoire dira t'on.

Impeccable je te remercie bien.
Allez A la prochaine ici où là sur ce forum ou un autre.
Bonne continuation ++