bonjour,
j ai un probleme je fais un site où doit faire apparaitre des references qui viennent d une base de données mysql dont plusieurs photos que j ai mis dans une galerie javascrit.
j ai regarde sur ce forum et j ai trouve le code pour faire ma galerie d image le probleme c est que cela marche uniquement pour la premiere reference !!!
merci pour votre aide
voici mon code javascript :
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens.onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.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;
code html/php :
foreach($reference as $r)
{
?>
<div class="unereference">
<div class="gauche">
<h4><?echo $r->titre_ref;?></h4>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="/<?echo $r->photo1_ref;?>" alt="Photo 1 en taille normale" /></dd>
</dl>
<img id="preload" src="/imgages/img-presentation.jpg">
<img id="preload" src="/imgages/batindus2.jpg">
<img id="preload" src="/imgages/maisonpierre.jpg">
</div><!--fermeture div gauche-->
<div class="droite">
<ul id="galerie_mini">
<a href="/<?echo $r->photo2_maxi;?>"><img class="detail" src="/<?echo $r->photo2_mini;?>" alt="Le titre de la photo 1" /></a>
<a href="/<?echo $r->photo3_maxi;?>"><img class="detail" src="/<?echo $r->photo3_mini;?>" alt="Le titre de la photo 2" /></a>
<a href="/<?echo $r->photo4_maxi;?>"><img src="/<?echo $r->photo4_mini;?>" alt="Le titre de la photo 3" /></a>
</ul>
<ul class="description">
<li><strong>Client :</strong><?echo $r->client_ref;?></li>
<li><strong>Lieu du chantier : </strong><?echo $r->lieu_ref;?></li>
<li><strong>Année de réalisation : </strong><?echo $r->annee_ref;?></li>
<li><strong>Montant des travaux TTC : </strong><?echo $r->montant_ref;?></li>
<li><strong>Description : </strong><?echo $r->description_ref;?></li>
</ul><!--fermeture ul description-->
</div><!--fermeture div droite-->
<p>******************************************************************************************************************************************</p>
</div> <!----fermeture div unereference----->
<?php
}
j ai un probleme je fais un site où doit faire apparaitre des references qui viennent d une base de données mysql dont plusieurs photos que j ai mis dans une galerie javascrit.
j ai regarde sur ce forum et j ai trouve le code pour faire ma galerie d image le probleme c est que cela marche uniquement pour la premiere reference !!!
merci pour votre aide
voici mon code javascript :
function displayPics()
{
var photos = document.getElementById('galerie_mini') ;
// On récupère l'élément ayant pour id galerie_mini
var liens = photos.getElementsByTagName('a') ;
// On récupère dans une variable tous les liens contenu dans galerie_mini
var big_photo = document.getElementById('big_pict') ;
// Ici c'est l'élément ayant pour id big_pict qui est récupéré, c'est notre photo en taille normale
var titre_photo = document.getElementById('photo').getElementsByTagName('dt')[0] ;
// Et enfin le titre de la photo de taille normale
// Une boucle parcourant l'ensemble des liens contenu dans galerie_mini
for (var i = 0 ; i < liens.length ; ++i) {
// Au clique sur ces liens
liens.onclick = function() {
big_photo.src = this.href; // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.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;
code html/php :
foreach($reference as $r)
{
?>
<div class="unereference">
<div class="gauche">
<h4><?echo $r->titre_ref;?></h4>
<dl id="photo">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict" src="/<?echo $r->photo1_ref;?>" alt="Photo 1 en taille normale" /></dd>
</dl>
<img id="preload" src="/imgages/img-presentation.jpg">
<img id="preload" src="/imgages/batindus2.jpg">
<img id="preload" src="/imgages/maisonpierre.jpg">
</div><!--fermeture div gauche-->
<div class="droite">
<ul id="galerie_mini">
<a href="/<?echo $r->photo2_maxi;?>"><img class="detail" src="/<?echo $r->photo2_mini;?>" alt="Le titre de la photo 1" /></a>
<a href="/<?echo $r->photo3_maxi;?>"><img class="detail" src="/<?echo $r->photo3_mini;?>" alt="Le titre de la photo 2" /></a>
<a href="/<?echo $r->photo4_maxi;?>"><img src="/<?echo $r->photo4_mini;?>" alt="Le titre de la photo 3" /></a>
</ul>
<ul class="description">
<li><strong>Client :</strong><?echo $r->client_ref;?></li>
<li><strong>Lieu du chantier : </strong><?echo $r->lieu_ref;?></li>
<li><strong>Année de réalisation : </strong><?echo $r->annee_ref;?></li>
<li><strong>Montant des travaux TTC : </strong><?echo $r->montant_ref;?></li>
<li><strong>Description : </strong><?echo $r->description_ref;?></li>
</ul><!--fermeture ul description-->
</div><!--fermeture div droite-->
<p>******************************************************************************************************************************************</p>
</div> <!----fermeture div unereference----->
<?php
}