Bonjour à tous, novice en création de site web j'ais utilisé le lien
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
pour créer ma galerie photo en javascript mais mon problème est que j'arrive bien a avoir les miniatures mais seul la premiere grande photo apparaitdans le cadre! Je peux cliquer sur les miniatures ou leur format normal apparait mais dans une autre page vierge. Je ne comprend pas ce qui bloque pouriez vous me venir en aide. Merki.
PS: Je travaille en interne et sous Fireworks.
Voici mes codes : HTML / CSS / JAVASCRIPT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Croquis persos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design3" href="design3.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/croquis_persos/dessin02.jpg" title="dessin02"><img src="images/minis/m_dessin02.jpg" alt="m_dessin02" /></a></li>
<li><a href="images/croquis_persos/dessin03.jpg" title="dessin03"><img src="images/minis/m_dessin03.jpg" alt="m_dessin03" /></a></li>
<li><a href="images/croquis_persos/dessin04.jpg" title="dessin04"><img src="images/minis/m_dessin04.jpg" alt="m_dessin04" /></a></li>
<li><a href="images/croquis_persos/dessin05.jpg" title="dessin05"><img src="images/minis/m_dessin05.jpg" alt="m_dessin05" /></a></li>
<li><a href="images/croquis_persos/dessin07.jpg" title="dessin07"><img src="images/minis/m_dessin07.jpg" alt="m_dessin07" /></a></li>
<li><a href="images/croquis_persos/dessin12.jpg" title="dessin12"><img src="images/minis/m_dessin12.jpg" alt="m_dessin12" /></a></li>
<li><a href="images/croquis_persos/dessin27.jpg" title="dessin27"><img src="images/minis/m_dessin27.jpg" alt="m_dessin27" /></a></li>
<li><a href="images/croquis_persos/dessin29.jpg" title="dessin29"><img src="images/minis/m_dessin29.jpg" alt="m_dessin29" /></a></li>
<li><a href="images/croquis_persos/dessin30.jpg" title="dessin30"><img src="images/minis/m_dessin30.jpg" alt="m_dessin30" /></a></li>
</ul>
<dl id="photo">
<dt>dessin02</dt>
<dd><img id="big_pict" src="images/croquis_persos/dessin02.jpg" alt="dessin02 en taile normale" /></dd>
</dl>
</div>
</body>
</html>
_____________________________________________________________
div#galerie
{
height: 800px;
background: black ;
border: 1px solid #ee9b00 ;
padding: 30px ;
padding-bottom: 100px;
margin: 30px;
text-align: center ;
font: 0.5em Georgia, serif ;
}
ul#galerie_mini
{
margin: 15px ;
padding: 15px ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 10px 10px ;
border: 2px solid #ee9b00 ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 30px ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
body
{
background-color: black;
}
_____________________________________________________________
<script type="text/javascript">
<head>
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; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
</head>
<body>
</body>
</script>
Modifié par PrK (06 Jan 2008 - 17:06)
http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
pour créer ma galerie photo en javascript mais mon problème est que j'arrive bien a avoir les miniatures mais seul la premiere grande photo apparaitdans le cadre! Je peux cliquer sur les miniatures ou leur format normal apparait mais dans une autre page vierge. Je ne comprend pas ce qui bloque pouriez vous me venir en aide. Merki.
PS: Je travaille en interne et sous Fireworks.
Voici mes codes : HTML / CSS / JAVASCRIPT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Croquis persos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="design3" href="design3.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="galerie">
<ul id="galerie_mini">
<li><a href="images/croquis_persos/dessin02.jpg" title="dessin02"><img src="images/minis/m_dessin02.jpg" alt="m_dessin02" /></a></li>
<li><a href="images/croquis_persos/dessin03.jpg" title="dessin03"><img src="images/minis/m_dessin03.jpg" alt="m_dessin03" /></a></li>
<li><a href="images/croquis_persos/dessin04.jpg" title="dessin04"><img src="images/minis/m_dessin04.jpg" alt="m_dessin04" /></a></li>
<li><a href="images/croquis_persos/dessin05.jpg" title="dessin05"><img src="images/minis/m_dessin05.jpg" alt="m_dessin05" /></a></li>
<li><a href="images/croquis_persos/dessin07.jpg" title="dessin07"><img src="images/minis/m_dessin07.jpg" alt="m_dessin07" /></a></li>
<li><a href="images/croquis_persos/dessin12.jpg" title="dessin12"><img src="images/minis/m_dessin12.jpg" alt="m_dessin12" /></a></li>
<li><a href="images/croquis_persos/dessin27.jpg" title="dessin27"><img src="images/minis/m_dessin27.jpg" alt="m_dessin27" /></a></li>
<li><a href="images/croquis_persos/dessin29.jpg" title="dessin29"><img src="images/minis/m_dessin29.jpg" alt="m_dessin29" /></a></li>
<li><a href="images/croquis_persos/dessin30.jpg" title="dessin30"><img src="images/minis/m_dessin30.jpg" alt="m_dessin30" /></a></li>
</ul>
<dl id="photo">
<dt>dessin02</dt>
<dd><img id="big_pict" src="images/croquis_persos/dessin02.jpg" alt="dessin02 en taile normale" /></dd>
</dl>
</div>
</body>
</html>
_____________________________________________________________
div#galerie
{
height: 800px;
background: black ;
border: 1px solid #ee9b00 ;
padding: 30px ;
padding-bottom: 100px;
margin: 30px;
text-align: center ;
font: 0.5em Georgia, serif ;
}
ul#galerie_mini
{
margin: 15px ;
padding: 15px ;
list-style-type: none ;
}
ul#galerie_mini li
{
float: left ;
}
ul#galerie_mini li a img
{
margin: 10px 10px ;
border: 2px solid #ee9b00 ;
}
dl#photo
{
clear: both ;
margin: 0 auto ;
}
dl#photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl#photo dd
{
margin: 30px ;
}
dl#photo img
{
border: 1px solid #dcb ;
}
body
{
background-color: black;
}
_____________________________________________________________
<script type="text/javascript">
<head>
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; // Et pour finir on inhibe l'action réelle du lien
};
}
}
window.onload = displayPics;
// Il ne reste plus qu'à appeler notre fonction au chargement de la page
</head>
<body>
</body>
</script>
Modifié par PrK (06 Jan 2008 - 17:06)