Une lightbox sur un portail

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Une lightbox sur un portail

Message par 8Bonhomme5 le Sam 24 Sep 2011 - 21:01

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,


Dernière édition par Micheloi le Mar 25 Oct 2011 - 22:03, édité 1 fois

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par 8Bonhomme5 le Mer 28 Sep 2011 - 22:06

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é

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Une lightbox sur un portail

Message par Final-Blonde le Jeu 29 Sep 2011 - 19:01

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 ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par 8Bonhomme5 le Ven 30 Sep 2011 - 21:56

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

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par Final-Blonde le Ven 30 Sep 2011 - 22:15

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;
}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par Invité le Sam 8 Oct 2011 - 10:14

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 résolu 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 Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par 8Bonhomme5 le Dim 9 Oct 2011 - 10:47

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

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par Final-Blonde le Dim 9 Oct 2011 - 18:30

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 ?

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par tupac le Mar 11 Oct 2011 - 3:48

Bonsoir

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

tupac
+ Hyperactif +

Masculin
Messages : 2331
Inscrit(e) le : 13/10/2010

tupac a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par Final-Blonde le Mar 11 Oct 2011 - 9:31

@tupac a écrit: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}

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par 8Bonhomme5 le Mar 18 Oct 2011 - 21:08

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

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par Final-Blonde le Mar 18 Oct 2011 - 21:17

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

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par 8Bonhomme5 le Mar 18 Oct 2011 - 21:47

@Final-Blonde a écrit: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

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par Final-Blonde le Jeu 20 Oct 2011 - 8:33

Micheloi a écrit: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.

Micheloi a écrit: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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par 8Bonhomme5 le Sam 22 Oct 2011 - 20:35

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

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par Final-Blonde le Sam 22 Oct 2011 - 20:40

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

LHV a écrit: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.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Une lightbox sur un portail

Message par 8Bonhomme5 le Sam 22 Oct 2011 - 21:58

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

8Bonhomme5
*****

Masculin
Messages : 647
Inscrit(e) le : 11/06/2007

http://www.aqua-univers.com/
8Bonhomme5 a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum