Je souhaite créer un galerie en javascript affichant une description et une grande image lorsqu'on click sur une miniature.
On a donc un div pour l'affichage de la BIGphoto, un div pour la DESCRIPTION , et une table contenant mes miniatures (avec les ul et li on peut pas mettre de scrollbar hori -_-')
Pour le moment grâce à des tuto j'ai réussis à afficher les miniatures et les grande photos.
Cependant étant débutante en javascript et autre language je ne sais pas par ou m'y prendre pour ajouter ces fameuses descriptions.
Le code pour la galerie est le suivant: (code récupéré et legerement adapté que vous avez du croiser pas mal de fois)
function displayPics()
{
var photos = document.getElementById('mini') ; // On récupère l'élément ayant pour id mini
var liens = photos.getElementsByTagName('a') ; // On récupère dans une variable tous les liens contenu dans mini
var bigphoto = document.getElementById('bigphoto') ;//l'élément bigphoto qui est récupéré
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
for(var i = 0 ; i < liens.length ; i++)//On parcourt l'ensemble des liens dans mini
{liens[i].onclick = function()
{bigphoto.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
bigphoto.alt = this.title ; // On change son titre
titre_photo.firstChild.nodeValue = this.title ; // On change le texte de titre de la photo
return false ; // inhibe l'action réelle du lien
}}}
window.onload = displayPics ;
Ce que je souhaiterai c'est donc dans mon DIV DESCRIPTION pouvoir afficher la description pour chaque photo.
La description devra être sur plusieurs ligne.
Je ne sais pas par ou commencer.
Si quelqu'un pouvait m'aiguiller ça serait gentil car adapté du javascript ça va mais en rajouter OMG!!! (enfin pour ma part^^)
Sur ce je me dirige sur vos tuto une fois de plus.
Je nage et je me noie bientôt dans ces codes javascript!!!
Je vais donc essayer de reformuler ma question.
Sachant que pour chaque catégorie de 'trucmuche' j'ai plusieurs images.
Admettons que trucmucheX contient 8photos et que trucmucheY en contient 6.
J'ai donc 8descriptions différentes pour trucmucheX et 6 pour trucmucheY.
Au click sur une miniature on va donc afficher l'image en grands (cadre de gauche) et la description qui lui est propre (cadre de droite)
La gestion de l'image c'est OK.
Cependant je ne sais pas ou mettre ces fameuses description dans mon code HTML.
J'ai vu l'utilisation d'un tableau créé en javascript contenant les différentes descriptions mais ce genre de tableau ne prend pas en compte les sauts de ligne.Donc la description n'aura au. (apparement en tout cas)
Je pense devoir utiliser certaines ligne comme:
descript=getElementByID('description').getelementsByTagName('p') ;
et pour la restitution
descript.firstChild.nodeValue=??????;
Les solutions passant par un tableau de descriptions devraient fonctionner. Pour les retour à la ligne, il suffit de mettre des <br /> dans la description que tu mets dans le tableau. Comme elle sera insérée dans un élément html, les balises seront lues.
Merki Elias j'ai orienté ma recherche vers les tableaux objets toussa.
C'est pas facile a comprendre -_-
J'ai fait evolué légèrement mon div description qui est devenu dc
Depuis ce matin j'essais de bidouiller du javascript mais evidement tout ce que j'arrive à faire c'est faire planter le script.
Comment je peux recuperer le numero de l'element liens, ou le titre du liens sur lequel on click?
En mettant une alert (i); dans la boucle for jvois les i défiler (logique)
Quand je met alert (nbi); (avec nbi=liens.lenght;) j'ai mon nombre total de liens (tjrs logique)
Mais qd je met ces alert dans "liens[i].onclick = function()"
J'ai des undefine car ils ne sont pas initialisé.
Le tableaux en fait je fais une fonction pour sa structure c'est ça ?
Et apres je l'utilise dans la fonction display ? ou alors j'appel les deux fonctions dans une nouvelles fonction qui utilisera les deux ?
Désolé si certaines questions vous semble stupide mais jfais de la brasse coulée la XD
Du coup jretourne à vos tuto.
Je prend toutes remarques ou toutes autres techniques.
Alors les tableau me prenant bien la tete j'arrive pas a faire le constructeur jsuis toute perdue -_- je use du innerHTML.
Alors alors, mon texte s'affiche (doit s'afficher plus exactement) dans le paragraphe aillant pour id="desc" ce paragraphe au meme titre que mes images s'affiche en fonction du type.
Dit moi si quelque chose va pas apres ces petites explication stp
Donc du coup cherchant a changer cette description qui me rend ouf depuis 4 jours j'ai fini par utiliser le innerHTML.
Du coup j'ai ça :
[code=js]
function displayPics()
{
var photos = document.getElementById('mini') ; // On récupère l'élément mini
var liens = photos.getElementsByTagName('a') ; // On récupère tous les liens contenu dans mini (tag nous fais recup une tab)
var bigphoto = document.getElementById('bigphoto') ; // On recupere l'elem bigphoto(image)
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; // titre de la photo de bigphoto
var nbi = liens.length;
var titre_desc = document.getElementById('description').getElementsByTagName('p')[0].innerHTML;
var desc= document.getElementById('description').getElementsByTagName('p')[1].innerHTML;
alert(desc);
alert(titre_desc);
for(var i = 0 ; i < nbi ; i++)// Une boucle des liens contenu dans mini
{
liens.onclick = function()// Au clique sur ces liens
{
bigphoto.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
bigphoto.alt = this.title ; // On change son titre
titre_photo.firstChild.nodeValue = this.title ; // On change le texte de titre de la photo
alert(bigphoto.alt);
if(bigphoto.alt == 'truc2')
{
alert (desc);
desc= "blabalbal";
alert (desc);
}
return false;
}
}
}
[/code]
J'y ai donc rajouté ceci avant la boucle for:
var titre_desc = document.getElementById('description').getElementsByTagName('p')[0].innerHTML;
var desc= document.getElementById('description').getElementsByTagName('p')[1].innerHTML;
alert(desc);
alert(titre_desc);
Ce qui m'affiche ds la msg box mes msg de base :
-alert(desc)=>Nos truc possède différents modèles.
-alert(titre_desc) => truc
Jusque la je ne fais que recuperer le texte deja inscrit.
Ensuite apres mon liens[i].onclick=function()
J'arrive a recupérer le titre de la photo courante (sur laquelle je viens de cliquer) et j'arrive a rentrer dans ma boucle if du coup.
if(bigphoto.alt == 'truc2')
{
alert (desc);
desc= "blabalbal";
alert (desc);}
le premier alert me renvoie ma premiere phrase (celle deja inscrite en html)
Nos truc possède différents modèles.
le deuxieme alerte me dit que desc a bien pris la valeur blablabla.
Mais apres j'arrive pas a changer
Nos truc possède différents modèles par blablabla.
Soit mon script plante soit il m'affiche pas ce que je lui demande.
Mais SI mon script ne plante pas en tout cas les photos ça reste tjr OK.
Ya t-il une bonne ame pour me repondre et m'aider un peu ????[/i]
Je travail dans une seule page nommée serrurerie.php
Cette page contient 3 catégories porte/portail/cloture
Si je clic sur une de ces catégories alors j'affiche le tableau de miniature de la catégorie sélectionnée.
Pour savoir si on a choisit une catégorie j'utilise une variable php cette variable est renvoyé par un formulaire.
Si $type existe c'est qu'une catégorie a été choisit et dans ce cas j'affiche <?php include 'affichage.php'; ?> (la ou est situé mon pb on va y venir )
<code type="html"><code type="html">
<?php
session_start();
$type=$_POST['type'];
include 'menu.php';?>
<!--/ Si on a choisit une catégorie /-->
if(isset($_POST['type']))
{ ?>
<div id="conteneur2">
<p align="center"> Nos <?php echo $type; ?></p>
<div class="affichagetype" align="center">
<?php include 'affichage.php'; ?>
</div>
<?php }
else { ?>
<div id="conteneur2">
<!--/ Contenu de BASE/-->
<p align="center"> Venez decouvrir nos porte, portail, cloture </p>
<form action="http://localhost/wamp/www/sdmi/serrurerie.php" method="post">
<table class="serru"align="center">
<tr align="center"><td>Porte</td><td>Portail</td><td>Escalier</td></tr>
<tr align="center">
<td><input type="image" src="photo/serrurerie/miniporte.jpg" value="porte" name="type" /></td>
<td><input type="image" src="photo/serrurerie/miniportail.jpg" value="portail" name="type" /></td>
<td><input type="image" src="photo/serrurerie/minicloture.jpg" value="cloture" name="type"/></td>
</tr>
</table>
</form>
</div>
<?php } ?>
Donc admettons maintenant que nous avons choisit la catégorie porte.
Dans ce cas je suis dans cette partie de code et $type aura la valeur : porte
Le code javascript suivant concerne la galerie de miniature donc le include 'affichage.php'
Ce qui me pose problème c'est la description que je voudrait ajouter qui change selon le click de la miniature.
Je ne sais pas comment lui dire. Et je pense devoir travailler sur cette partie de code plus particulierement dans la boucle liens[i].onclick =function()
function displayPics()
{
var photos = document.getElementById('mini') ; // On récupère l'élément mini
var liens = photos.getElementsByTagName('a') ; // On récupère tous les liens contenu dans mini (tag nous fais recup une tab)
var bigphoto = document.getElementById('bigphoto') ; // On recupere l'elem bigphoto(image)
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ; // titre de la photo de bigphoto
var nbi = liens.length;
for(var i = 0 ; i < nbi ; i++)// Une boucle des liens contenu dans mini
{
liens[i].onclick = function()// Au clique sur ces liens
{
bigphoto.src = this.href ; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
bigphoto.alt = this.title ; // On change son titre
titre_photo.firstChild.nodeValue = this.title ; // On change le texte de titre de la photo
return false;
}
}
}
window.onload = displayPics ;
Déjà dit moi si tu me suis jusque la.
En attendant jvais continuer mes super test d'affichage.
Galerie+description javascript
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Ce n'est pas intéressant quand ça marche, mais quand ça ne marche pas !