| Auteur |
|
| Alomon |
|
| 62 Posts |
Hello,
J'ai mis en place ce système sur mon site (pas celui en signature  ) : http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript
Il arrive que j'aie plusieurs lignes de minatures, donc j'aurais aimé savoir comment faire pour forcer le centrage des miniatures dans le bloc.
Je pense que vous comprenez ce que je veux dire, sinon dites-le-moi.
Merci d'avance !
Modifié par Alomon (26 Nov 2007 - 19:48)
|
|
| Alomon |
|
| 62 Posts |
J'aurais une autre question sur le même sujet : est-ce possible de mettre plusieurs blocs de gallerie sur une même page ? Parce que le problème, c'est que les id #gallerie et autres sont alors utilisés plusieurs fois, ce qui n'est pas trop apprécié par le navigo
Y a-t-il un moyen d'y remédier ?
Merci !
++
Modifié par Alomon (13 Oct 2007 - 23:44)
|
|
| Alomon |
|
| 62 Posts |
Alomon a écrit :
J'aurais une autre question sur le même sujet : est-ce possible de mettre plusieurs blocs de gallerie sur une même page ? Parce que le problème, c'est que les id #gallerie et autres sont alors utilisés plusieurs fois, ce qui n'est pas trop apprécié par le navigo
Y a-t-il un moyen d'y remédier ?
Merci !
++
Bon, j'ai trouvé la solution, c'est forcément assez lourd, mais ça marche impec.
Comme ce n'est pas le sujet initial du topic, je préfère ne la donner que si quelqu'un la demande, pour qu'on ne s'étende pas sur le sujet
Par contre, ma question sur le centrage des miniatures reste entière 
|
|
| 6l20 |
|
Chasseur de 1/2 Kiwiz Modérateur 926 Posts |
Bonsoir,
Mets un exemple de ce que tu fais en ligne que nous puissions objectivement y jeter un oeil ( ou même les deux ), là, c'est un peu "abstrait"
XHTML: structure. CSS: présentation. Javascript: comportement.
|
|
| Alomon |
|
| 62 Posts |
Bon, officiellement, le site n'est pas ouvert, mais bon... Je vous donne l'adresse, mais chuuuuut
Prenons par exemple cette page : http://www.heikki.fr/testons/spip.php?page=photos_2003
Il y a 4 photos de 120 px de large (soit 480 px pour les fainéants du calcul mental  ), dans un bloc de 750 px (matérialisé en gris). Les 480 px sont alignés à gauche, je préfèrerais que ce soit centré dans le bloc de 750 px. Alors disons que là, visuellement, ce n'est pas très gênant, mais prenez par exemple cet album : http://www.heikki.fr/testons/spip.php?page=photos_2005#f1_sm . Les photos y apparaissent sur plusieurs lignes, et ça fait assez déséquilibré quand cest aligné à gauche.
Bon, disons que c'est un détail, vu que par chance, ça apparait quasiment centré, mis imaginons que le bloc fasse 800 px, ça ferait plutôt moche !
Voilà, j'espère que je me suis mieux fait comprendre
@++
Modifié par Alomon (15 Oct 2007 - 23:02)
|
|
| JJJ |
|
| 35 Posts |
Alomon a écrit :
Bon, j'ai trouvé la solution, c'est forcément assez lourd, mais ça marche impec.
Comme ce n'est pas le sujet initial du topic, je préfère ne la donner que si quelqu'un la demande, pour qu'on ne s'étende pas sur le sujet
Je suis intéréssé...puisque je cherche éventuellement à mettre plusieurs galeries sur une même page.
Par contre, ma question sur le centrage des miniatures reste entière
A priori tu connais le nombre de miniatures que tu auras sur chaque ligne. Tu connais la taille du bloc conteneur. Tu connais la largeur des miniatures et tu connais leur espacement.
Avec le calcul mental que tu affectionnes, tu ne devrais pas avoir de mal à trouver la bonne valeur pour les déplacer dans le bon sens avec un margin-left et un nouveau conteneur de la même couleur que l'initial, non ?
Modifié par JJJ (26 Nov 2007 - 05:11)
|
|
| Florent V. |
|
On va manger des chips. Modérateur 12457 Posts |
Bonjour,
À partir de l'exemple suivant:
http://css.alsacreations.com/xmedia/exemples/galerie_photo_js/
Il suffit de remplacer le CSS pour les li:
ul#galerie_mini li {
float: left ;
} par ceci:
ul#galerie_mini li {
display: inline;
}
Comme div#galerie est en text-align: center, ça devrait suffire.
|
|
| Alomon |
|
| 62 Posts |
Alors, reprenons
Pour le sujet initial, c'est-à-dire le centrage des miniatures, je confirme que le display:inline fonctionne, merci beaucoup, Florent V. !!
Pour mettre plusieurs galeries sur une même page, j'ai une méthode un peu bourrine, mais qui fonctionne, et à vrai dire je vois pas trop comment faire autrement.
Tout d'abord, comme on utilise des div, j'ai défini dans ma CSS autant de styles qu'il y avait de galeries. Je m'explique. Considérons que tu veuilles mettre 3 galeries sur une même page. Je transforme alors :
div#galerie{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;}
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 1px ;
border: 1px solid #dcb ;}
dl#photo{
clear: both ;
margin: 0 auto ;}
dl#photo dt{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;}
dl#photo dd{margin: 0 ;}
dl#photo img{border: 1px solid #dcb ;}
par :
div#galerie1, div#galerie2, div#galerie3{
width: 410px ;
background: #eed ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;}
ul#galerie_mini1, ul#galerie_mini2, ul#galerie_mini3{
margin: 0 ;
padding: 0 ;
list-style-type: none ;}
ul#galerie_mini1 li, ul#galerie_mini2 li, ul#galerie_mini3 li{float: left ;}
ul#galerie_mini1 li a img, ul#galerie_mini2 li a img, ul#galerie_mini3 li a img{
margin: 2px 1px ;
border: 1px solid #dcb ;}
dl#photo1, dl#photo2, dl#photo3{
clear: both ;
margin: 0 auto ;}
dl#photo1 dt, dl#photo2 dt, dl#photo3 dt{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;}
dl#photo1 dd, dl#photo2 dd, dl#photo3 dd{margin: 0 ;}
dl#photo1 img, dl#photo2 img, dl#photo3 img{border: 1px solid #dcb ;}
Dans gallerie.js, il faut alors lancer le script sur chaque galerie.
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
// 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
return false; // Et pour finir on inhibe l'action réelle du lien
};
}
//2
var photos2 = document.getElementById('galerie_mini2') ;
var liens2 = photos2.getElementsByTagName('a') ;
if (liens2.length > 0){
//Test si au moins 2 albums, sinon inutile de continuer
var big_photo2 = document.getElementById('big_pict2') ;
for (var i = 0 ; i < liens2.length ; ++i) {
liens2[i].onclick = function() {
big_photo2.src = this.href;
return false;
};
}
//3
var photos3 = document.getElementById('galerie_mini3') ;
var liens3 = photos3.getElementsByTagName('a') ;
if (liens3.length > 0){
//Test si au moins 3 albums, sinon inutile de continuer
var big_photo3 = document.getElementById('big_pict3') ;
for (var i = 0 ; i < liens3.length ; ++i) {
liens3[i].onclick = function() {
big_photo3.src = this.href;
return false;
};
}
}
}
}
On remarquera un petit test avant chaque exécution de la boucle for(), afin d'éviter de perdre du temps s'il n'y a qu'un seul album sur la page, par exemple. Le tout est placé en cascade ; ainsi, s'il n'y a qu'un seul album, il n'effectuera que la première boucle et les 2 premières lignes consacrées à un éventuel 2e album, puis le script sera arrêté.
Pour finir, tu adaptes ta page contenant la partie affichage, en n'oubliant pas de numéroter chaque div :
<div id="[b]galerie1">
<ul id="galerie_mini1">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="photo1">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict1" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
<div id="galerie2">
<ul id="galerie_mini2">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="photo2">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict2" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
<div id="galerie3">
<ul id="galerie_mini3">
<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/minis/m_photo1.png" alt="Le titre de la photo 1" /></a></li>
<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>
<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>
<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
</ul>
<dl id="photo3">
<dt>Titre de la photo 1</dt>
<dd><img id="big_pict3" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
Et voilà, ça marche
Je le répète : c'est peut-être pas la solution la plus simple et peut-être pas non plus la plus commode, mais elle marche et je lai trouvée seul, alors que je suis pas du tout spécialiste de Javascript. Je m'excuse donc si ça ne respecte pas telle ou telle norme [/i][/i][/i]
|
|
| Florent V. |
|
On va manger des chips. Modérateur 12457 Posts |
Alomon a écrit :
Je le répète : c'est peut-être pas la solution la plus simple et peut-être pas non plus la plus commode
Clairement pas, effectivement. 
Pour le CSS, il suffirait de travailler avec des classes plutôt qu'avec des identifiants. Ça sera tout de même plus simple.
div.galerie {...}
ul.galerie_mini {...}
ul.galerie_mini li {...}
ul.galerie_mini li a img {...} etc.
Côté HTML, il faut bien sûr modifier en fonction.
Côté Javascript, par contre, il faudra peut-être (surement) modifier la fonction, qui doit se servir d'un certain nombre de getElementById...
C'est le gros morceau.
Sinon, on peut se contenter d'optimiser le CSS en passant par des classes... et en gardant les identifiants pour le Javascript:
<div id="galerie1" class="galerie">
<ul id="galerie_mini1" class="galerie_mini">...</ul>
<dl id="photo1" class="photo">...</dl>
</div>
<div id="galerie2" class="galerie">
<ul id="galerie_mini2" class="galerie_mini">...</ul>
<dl id="photo2" class="photo">...</dl>
</div>
<div id="galerie3" class="galerie">
<ul id="galerie_mini3" class="galerie_mini">...</ul>
<dl id="photo3" class="photo">...</dl>
</div>
|
|
| Alomon |
|
| 62 Posts |
Le problème est qu'il n'existe pas de fonction getElementByClass en Javascript J'ai très longtemps cherché de ce côté, ça aurait vachement simplifié les choses, mais mes recherches m'ont donné un résultat clair : impossible de passer par les class...
|
|
| Julien Royer |
|
Coin coin Modérateur 3635 Posts |
Salut,
Alomon a écrit :
Le problème est qu'il n'existe pas de fonction getElementByClass en Javascript J'ai très longtemps cherché de ce côté, ça aurait vachement simplifié les choses, mais mes recherches m'ont donné un résultat clair : impossible de passer par les class...
Très longtemps ? Un conseil, cherche un peu mieux.
Il existe de nombreuses bibliothèques, ou même fonctions qui permettent de sélectionner les éléments par classe.
|
|
| Alomon |
|
| 62 Posts |
Bah comme je l'ai dit, je suis pas du tout spécialiste du JavaScript, donc c'est possible que j'ai mal cherché... En tout cas, j'avais rien trouvé.
|
|
| Florent V. |
|
On va manger des chips. Modérateur 12457 Posts |
Alomon a écrit :
Le problème est qu'il n'existe pas de fonction getElementByClass en Javascript
En natif, non, effectivement. Ensuite, il y a quantité de gens qui ont codé une fonction getElementsByClass. Une recherche sur "getElementsByClass" (nota: ElementSSSSS, pas Element) sur google ou autre donne des résultats à priori très corrects.
Et même si on ne touche pas au Javascript, ça n'empêche pas d'utiliser les classes pour optimiser la feuille de styles.
|
|
| Alomon |
|
| 62 Posts |
OK. C'est donc sûrement une solution Ca peut être intéressant : c'est bien moins bourrin que ce que j'ai mis en place
Merci
|
|
| eebee |
|
| 60 Posts |
bonjour,
J'ai fait le tutoriel de la galerie http://css.alsacreations.com/Tutoriels-JavaScript/galerie-photo-javascript ce W.E et j'ai le même problème : je veux mettre plusieurs galeries dans la même page.
J'ai trouvé une solution, j'espère qu'elle vous intéressera.
Pour cela j'utilise la bibliothèque jquery (voir http://blog.alsacreations.com/2007/01/24/329-jquery-une-bibliotheque-javascript-simple-et-efficace )
et j'utilise une classe galerie au lieu des id (comme le conseille Florent V. )
Conclusion, la feuille de style devient
div.galerie
{
width: 100% ;
background: #000 ;
border: 1px solid #dcb ;
padding: 15px ;
margin: 15px 30px ;
text-align: center ;
font: 0.9em Georgia, serif ;
}
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 1px ;
border: 1px solid #dcb ;
}
dl.galerie_photo
{
clear: both ;
margin: 0 auto ;
}
dl.galerie_photo dt
{
font: italic 2.5em/1.5em Georgia, serif ;
color: #dcb ;
}
dl.galerie_photo dd
{
margin: 0 ;
}
dl.galerie_photo img
{
border: 1px solid #dcb ;
}
le fichier html devient
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/style.css" />
<!-- jQuery library -->
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/galeries.js"></script>
</head>
<body>
<!-- Contenu du document -->
<div class="galerie" id="galerie1">
<ul class="galerie_mini">
<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
</ul>
<dl class="galerie_photo">
<dt>Titre de la photo 1 : galerie 1</dt>
<dd><img src="img/chat013.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
<div class="galerie" id="galerie2">
<ul class="galerie_mini">
<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
<li><a href="img/chat013.jpg" title="Titre de la photo 1"><img src="img/minis/m_chat013.jpg" alt="Le titre de la photo 1" /></a></li>
<li><a href="img/chat015.jpg" title="Titre de la photo 3"><img src="img/minis/m_chat015.jpg" alt="Le titre de la photo 3" /></a></li>
<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
<li><a href="img/chat014.jpg" title="Titre de la photo 2"><img src="img/minis/m_chat014.jpg" alt="Le titre de la photo 2" /></a></li>
<li><a href="img/chat016.jpg" title="Titre de la photo 4"><img src="img/minis/m_chat016.jpg" alt="Le titre de la photo 4" /></a></li>
</ul>
<dl class="galerie_photo">
<dt>Titre de la photo 1 : galerie 2</dt>
<dd><img src="img/chat013.jpg" alt="Photo 1 en taille normale" /></dd>
</dl>
</div>
</body>
</html>
Remarque : j'ai bien deux galeries et je ne suis même pas obligée de les nommer. Attention , ne pas oublier l'appel à la librairie jquery ainsi que l'appel au fichier javascript à la sauce jquery galeries.js qui devient alors :
$(document).ready(function(){
/* pour chaque galerie */
$('.galerie').each(function(i) {
/* trouver la grosse photo, son titre */
var big_photo = $(this).find('dl').find('dd').find('img');
var titre_photo =$(this).find('dt');
/* pour chaque galerie */
$(this).find('ul').find('li').each(function(i) {
/* pour chaque lien de la minie galerie */
$(this).find('a').click(function() {
/* modifier le comportement au click sur chaque lien */
big_photo.attr('src',$(this).attr('href')); // On change l'attribut src de l'image en le remplaçant par la valeur du lien
big_photo.attr('alt',$(this).attr('title')); // On change son titre
titre_photo.html($(this).attr('title')); // On change le texte de titre de la photo
return false; // Et pour finir on inhibe l'action réelle du lien
});
});
});
});
Donnez moi votre avis ! 
Salut
|
|
Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org