Une lightbox sur un portail

[8Bonhomme5]

Rappel du premier message :

Bonsoir à tous,

Le forum que j'administre commence a bien grandir,
Je suis donc en train de réaliser une photothèque sur le portail ==> http://aqua-univers.forumsclub.com/portal?pid=2
histoire de montrer "les plus belles photos" qui ont été posté.

je pense qu'il va y en avoir pas mal.
Pour le moment j'ai insérer les images tout simplement ==> http://aqua-univers.forumsclub.com/portal?pid=5
mais en faite je voudrais afficher toutes les images en petit (ex 100px de large) et permettre de visionner les images sous forme de lightbox

mais là, j'aurais besoin d'aide,

[8Bonhomme5]

se n'est pas dans le css que ça va se jouer?

car toutes les images au final ont des dimensions différentes,
c'est pour ça qu'un px sur le padding-top ne fonctionne que moyennement,

car le bas de certaine images se retrouve masqué

[kheino]

Ah tu parles de la grande image ?
Et tu aimerais modifier le padding-top de chaque image séparement, c'est ça ?
Si oui, nous allons mettre le padding-top dans la "div" de la grande image directement :

Code:

<p><a href="#macible1"><img src="http://i67.servimg.com/u/f67/14/97/57/70/dsc_0084.jpg" width="100" height="100" /></a></p><div class="lightbox" id="macible1" style="padding-top: 43px;"><a href="#"><img src="http://i67.servimg.com/u/f67/14/97/57/70/dsc_0084.jpg" alt="bloup" /> </a></div>

Là, en exemple avec le "bloup" du début, j'ai mis un padding-top de 43 pixels.

C'est bien ce que tu cherchais ?

[8Bonhomme5]

oui, c'est ça que je cherche, mais là du coup ça ne résout pas vraiment le problème,

car le soucis viens du fait que chaque personne a un réglage différent de son écran

du coup, j'ai vue en cherchant sur le net que c'est possible mais en créant un tableau, et en plaçant l'image dedans,

mais je n'ai pas encore creusé la question

[kheino]

Oui, on peut effectivement mieux gérer les dimensions via un tableau...

Tu peux aussi attribuer ici un

div.lightbox:target img {
max-width: ???px;
max-height: ???px;
-moz-box-shadow: white 0 0 30px;
-webkit-box-shadow: white 0 0 30px;
box-shadow: white 0 0 30px;
}

[Invité]

Bonjour, Où en-est votre problème ? Deux solutions : Votre problème est résolu, dans ce cas pensez à nous le signaler en cochant l'icône en éditant votre premier message, Votre problème est toujours d'actualité, et dans ce cas pensez à faire des UP régulièrement, afin de ne pas voir votre sujet délesté, A bientôt sur ForumActif

[8Bonhomme5]

je bosse toujours pour centrer verticalement les images automatiquement,
mais sinon c'est bon

[kheino]

Salut Micheloi,

As-tu essayé avec les margin-top: auto; margin-right: auto; dès le moment où tu as donné une hauteur ?
(Cela dit, je ne suis plus sûre si ça fonctionne aussi avec la hauteur comme c'est le cas avec la largeur...)

Ou bien avec le padding ?

[tupac]

Bonsoir

D'après ce que je vois ici vous avez réussi !

[kheino]

D'après ce que je vois ici vous avez réussi !

Tupac, il a réussi à remonter la lightbox, mais non à la centrer verticalement.

Micheloi, ici dans ton CSS, essaie de centrer en augmentant le padding-top: 340px; (par exemple) :

div.lightbox:target{background-color:rgba(100,100,100,.8);display:block;padding-top:50px;position:fixed;text-align:center;z-index:20}

[8Bonhomme5]

désolé, ça fait un moment que je ne suis pas passé donc oui j'ai modifier le padding-top pour contourner le problème,

j'ai tenté le margin-top: auto; mais sans succès,

je vais refaire un éssai

[kheino]

Chez moi ça fonctionne, je peux la centrer "à vue" en jouant sur le padding-top.

[8Bonhomme5]

Chez moi ça fonctionne, je peux la centrer "à vue" en jouant sur le padding-top.

oui, bien sur, sauf que chaque personne à des résolutions d'écran différente,

et surtout toutes les images de la photothèque ne font pas la même taille

[kheino]

oui, bien sur, sauf que chaque personne à des résolutions d'écran différente,

Oui en effet, alors je suis partie en ballade avec "Google est mon ami" et j'ai trouvé entre autre ceci,mais pas eu le temps de tester.

surtout toutes les images de la photothèque ne font pas la même taille

Si c'est en parlant des miniatures, à mon sens, ceci est une erreur et pas beau, surtout si tu as beaucoup d'images.
Pour quoi ne mets-tu pas des dimensions d'office ?

Pareil si c'est pour l'image de la lightbox, dans les propriétés du fameux "target" :

div.lightbox:target img {
width: 30px;
height: 30px;
-moz-box-shadow: white 0 0 30px; /*un peu du jouli*/
-webkit-box-shadow: white 0 0 30px;
box-shadow: white 0 0 30px;
}

Bon, les dimensions que j'ai mises ici ne sont juste que pour te montrer.

Ce qui n'empêche pas qu'il y a moyen de centrer avec un calcul précis et j'espère que le tuto plus haut t'y aidera.

[8Bonhomme5]

les miniatures je l'ai force pour qu'elles soient toutes à la même taille,

mais après les autres je ne peux pas car ce n'est pas le même ratio (longueur / largeur) et si je mets la même taille pour toutes les photos, je vais déformer les poissons

sinon, merci pour le lien, je vais y jeter un oeil

[kheino]

Ah ça y est j'ai trouvé comment centrer horizontalement et verticalement :

Pour centrer un élement horizontalement, on lui donne une largeur fixe, et une marge extérieure "automatique" sur les cotés. Le navigateur fera en sorte que les marges sur les cotés seront de même taille, donc de façon à center l'élément.

Pour le centrage vertical, c'est une autre histoire. Biensûr, on connait la propriété vertical-align, mais elle ne marche pas pour centrer par exemple un dans un autre >div< (elle ne marche que dans les tableaux et dans les éléments de type inline quand une hauteur de ligne est déclarée).

Alors comment faire ?
Ce que l'on veut, c'est centrer un bloc, par exemple un >div<. Pour être plus précis, on veut que le point central du bloc (l'intersection des diagonales) soit au milieu de la fenêtre du navigateur.
Or, ce que l'on fait quand on met un margin: 50% auto auto 50%;, c'est placer le coin supérieur du bloc au centre de la page.

En terme de code, c'est très simple :

Code:

<div class="bloc">
      Contenu du bloc
</div>

Code CSS :

bloc {
position: absolute;
top: 50%;
left: 50%;
height: 256px;
margin-top: -128px;
width: 512px;
margin-left: -256px;
}

Là tu devrais avoir réponse à ton problème, mais comme je l'ai dit plus haut, ça t'oblige à délimiter d'après une dimension minimale, une dimension maximale à toutes les images.

[8Bonhomme5]

ah oui, je comprends, je vais tester demain matin,