Une lightbox sur un portail

Page 1 sur 2 1, 2  Suivant

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

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 Final-Blonde le Dim 25 Sep 2011 - 17:37

Salut Micheloi,

Essayons parce que je découvre aussi ce procédé TOUT EN CSS ("le js c'est bien, mais rien qu'en CSS c'est la classe !" -pas de moi, mais si vrai) et qui utilise la pseudo-class "target".
Fonctionne avec tous les navigateurs.

Commençons par le HTML :
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"><a href="#"><img src="http://i67.servimg.com/u/f67/14/97/57/70/dsc_0084.jpg" alt="bloup" /></a></div>

Dans le CSS :
div.lightbox {
display: none; /* On cache la lightbox*/
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
line-height: 1em;
}
div.lightbox:target {
display: block; /* on l'affiche quand il est ciblé uniquement */
position: fixed;
z-index: 20;
background-color: rgba(100,100,100,.Cool;
text-align: center;
padding-top: 150px;
}
div.lightbox:target img { /*un peu du jouli*/
-moz-box-shadow: white 0 0 30px;
-webkit-box-shadow: white 0 0 30px;
box-shadow: white 0 0 30px;
}

Et voilà.
C'est bien aussi dans un post, et à la place de l'image-miniature, tu peux aussi mettre un lien-texte menant sur une image.



Dernière édition par Final-Blond le Mer 28 Sep 2011 - 21:02, édité 3 fois (Raison : Correction du code html)

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 Dim 25 Sep 2011 - 21:00

magnifique, on est vraiment proche du but,

je viens de faire un éssai et déjà, sa fonctionne, j'ai juste un bout de code qui traine autour de l'image, et une erreur de guillemet dans le css, donc je vais chercher,

Edit: a quoi correspond < alt="bloup"/>

je suis en test sur cette page ==> http://aqua-univers.forumsclub.com/portal?pid=5#

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 tupac le Dim 25 Sep 2011 - 21:19

Bonsoir

Effectivement le code comporte des guillemets en trop.

Le code corrigé.
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"><a href="#"><img src="http://i67.servimg.com/u/f67/14/97/57/70/dsc_0084.jpg" alt="bloup"> </a></div>

Puis pour ajouter plusieurs image faite comme ceci.
Code:
  <p>
  <a href="#macible1"><img src=" image ici " width="100" height="100" /></a>
  <a href="#macible2"><img src=" image ici " width="100" height="100" /></a>
  <a href="#macible3"><img src=" image ici " width="100" height="100" /></a>
  </p>

  <div class="lightbox" id="macible1" alt="bloup"/>
  <a href="#"><img src=" image ici "></a></div>

  <div class="lightbox" id="macible2" alt="bloup"/>
  <a href="#"><img src=" image ici "></a></div>

  <div class="lightbox" id="macible3" alt="bloup"/>
  <a href="#"><img src=" image ici "></a></div>

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 Dim 25 Sep 2011 - 21:21

Très chouette !

Quant au bout de code, je n'en ai pas vu... ?
Le alt="bloup" de faire apparaitre le nom quand on laisse le curseur sur l'image. J'ai mis "bloup" parce que je ne connais pas le nom de ce bloup-bloup...


EDIT : Ah oui Tupac, merci, en effet.

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 Dim 25 Sep 2011 - 21:34

ah oui, bloup, ok, en faite c'est un ramirezi

merci Tupac pour ton aide,

est-ce qu'on peut rajouter un bouton suivant pour changer de photo? et du texte?

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 25 Sep 2011 - 21:41

Micheloi a écrit:est-ce qu'on peut rajouter un bouton suivant pour changer de photo? et du texte?
Je n'ai pas bien compris ce que tu voudrais...
Un peu plus précis ? Un petit schéma ?

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 Dim 25 Sep 2011 - 21:43

quand on affiche l'image en grand, avoir un bouton suivant (ou autre chose) qui permettrait de passer à l'image suivante sans cliquer pour enlever la lightbox et cliquer sur l'icone d'après

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 25 Sep 2011 - 21:50

Ah, il faudrait voir ça en effet...
Si ça ne prend pas de js aussi...

Mais là je dois m'en aller, sorry.
Peut-être quelqu'un d'autre ?

A bientôt et bonne soirée.

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 Dim 25 Sep 2011 - 21:53

en tout cas merci pour ton aide, je vais continuer à chercher,
sinon pour alt="bloup", j'ai fait des recherche et j'ai trouver que ce n'est pas du standard HTML,

il faut utiliser title comme ceci <img src="ijiozajdioaz.gif"title="pour plus d'info, accéder à l'aide en cliquant ici">

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 tupac le Dim 25 Sep 2011 - 22:06

Il tout a fait possible de rajouter un texte a côté ou en dessous de l'image.

Texte a côté faite comme ceci.
Code:
  <div class="lightbox" id="macible1" alt="bloup"/>
<a href="#"><img src="http://i67.servimg.com/u/f67/14/97/57/70/dsc_0084.jpg"> Texte a côté</a></div>
Texte en dessous.
Code:
  <div class="lightbox" id="macible1" alt="bloup"/>
<a href="#"><img src="http://i67.servimg.com/u/f67/14/97/57/70/dsc_0084.jpg"><br>Texte en dessous</a></div>
Pour ce qui est d'ajouter un bouton ( suivant ) le code na pas été fait pour ça.
Pour pouvoir bénéficier d'une galerie avec (bouton suivant ) il vous faudra changer de code,un code avec du javascript.

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 8Bonhomme5 le Dim 25 Sep 2011 - 22:08

ah ok, et donc qui dit java, dit le bazars, celui là va me convenir alors,

j'essaie le texte

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 tupac le Dim 25 Sep 2011 - 22:29

Bazar non disons que la galerie sera composé deux trois codes (css) (html) (js) js qui sera a placer dans une page javascript,il en existe pas mal sur la toile.

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 8Bonhomme5 le Dim 25 Sep 2011 - 23:13

je suis un peut réticent avec les js,

à chaque fois que j'en ai utiliser j'ai eu le droit à des soucis, ralentissement, problème avec IE, ...

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 Lun 26 Sep 2011 - 18:29

Aujourd'hui un inscrit m'a fait remarqué qu'en fermant la lightbox, le retour se faisaient en haut de page,
ce qui va poser problème quand il y aura beaucoup d'images.

j'ai bien identifier le passage du code à changer
<a href="#">, mais comment faire?

EDIT: je viens de trouver, <a href="#ID"> il suffit de fixer un id et ça à l'air de fonctionner

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 Lun 26 Sep 2011 - 18:51

Bonjour Micheloi et Tupac,

Micheloi où as-tu tes images en lightbox ?

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 Lun 26 Sep 2011 - 18:55

Salut,

j'ai fait cette page hier soir ==> http://aqua-univers.forumsclub.com/portal?pid=6

et la je suis en train de faire une deuxième page, mais il y aura une quinzaine de photo
Pc

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 Lun 26 Sep 2011 - 19:35

OK, mais il n'y a pas le "avant-retour" des images ?

Puis-je me permettre une petite critique constructive ?
Je trouve dommage que les liens soient soulignés...
Si tu veux y remédier, il suffit d'un petit code CSS :
a, a:link, a:hover {text-decoration: none !important;
}

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 Lun 26 Sep 2011 - 22:33

Final-Blond a écrit:OK, mais il n'y a pas le "avant-retour" des images ?
je ne comprends pas

Final-Blond a écrit:

Puis-je me permettre une petite critique constructive ?
Je trouve dommage que les liens soient soulignés...
Si tu veux y remédier, il suffit d'un petit code CSS :
a, a:link, a:hover {text-decoration: none !important;
}
je l'ai mis, mais sans succès

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 tupac le Mar 27 Sep 2011 - 1:26

Pour vos liens essayer avec ceux-la.

Code:
a { text-decoration:none; }
a:hover { text-decoration: none!important; }

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 27 Sep 2011 - 18:10

Euh Tupac, le code est bien le bon et fonctionne tel quel aussi avec phpBB3.
Le a:link est aussi nécessaire.

Micheloi, tu as dû faire une erreur en le recopiant :
Code:
a, a:link, a:hover {text-decoration: none!important;
}
Même avec l'espace entre le none et !important ça fonctionne.

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 27 Sep 2011 - 18:30

c'était ça, une erreur de frappe

sinon j'ai toujours le problème du nombre de guillemet impair dans ce code,
je ne vois pas ?
Code:
div.lightbox {display: none; /* On cache la lightbox*/
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
line-height: 1em;}
div.lightbox:target {display: block; /* on l'affiche quand il est ciblé uniquement */
position: fixed;
z-index: 20;
background-color: rgba(100,100,100,.8);
text-align: center;
padding-top: 100px;}
div.lightbox:target img { /*un peu du jouli*/
-moz-box-shadow: white 0 0 30px;
-webkit-box-shadow: white 0 0 30px;
box-shadow: white 0 0 30px;}

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 27 Sep 2011 - 18:52

Je ne donne pas de codes CSS ainsi, je trouve ça très peu lisible.
Cependant, le code est juste et les balises sont bien ouvertes et refermées...
Code:
div.lightbox {
display: none; /* On cache la lightbox*/
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
line-height: 1em;
}
div.lightbox:target {
display: block; /* on l'affiche quand il est ciblé uniquement */
position: fixed;
z-index: 20;
background-color: rgba(100,100,100,.8);
text-align: center;
padding-top: 100px;
}
/*un peu du jouli*/
div.lightbox:target img {
-moz-box-shadow: white 0 0 30px; 
-webkit-box-shadow: white 0 0 30px;
box-shadow: white 0 0 30px;
}


EDIT : Pourquoi écrire ton CSS de cette façon ? C'est tout bon pour faire des erreurs en cas de modifications...

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 27 Sep 2011 - 19:17

en faite, c'est le css que tu m'as donné, j'ai juste modifier la valeur du padding-top
(je suis d'ailleurs en train d'essayer de changer pour centrer verticalement l'image automatiquement)

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 27 Sep 2011 - 19:21

Voici le CSS que je t'ai donné plus haut...
Il n'y a rien de compressé là-dedans !
Spoiler:
Final-Blond a écrit:Dans le CSS :
div.lightbox {
display: none; /* On cache la lightbox*/
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
line-height: 1em;
}
div.lightbox:target {
display: block; /* on l'affiche quand il est ciblé uniquement */
position: fixed;
z-index: 20;
background-color: rgba(100,100,100,.8);
text-align: center;
padding-top: 150px;
}
div.lightbox:target img { /*un peu du jouli*/
-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 8Bonhomme5 le Mar 27 Sep 2011 - 21:40

oui d'accord, mais il n'y a rien de changé,

quand tu le rentres dans la feuille de style, tu as ce message, mais je ne trouve pas l'erreur de guillemet
Erreur détectée
Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

Nous vous conseillons de relire votre code.

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 Invité le Mar 27 Sep 2011 - 22:58

Bonsoir,

Essayez de retirer l'apostrophe dans le commentaire: /* on l'affiche quand il est ciblé uniquement */ devient /* on l affiche quand il est ciblé uniquement */. En général ça règle le problème de guillemets.

Cordialement.

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 Mar 27 Sep 2011 - 23:09

c'était ça, merci

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 - 19:17

Micheloi a écrit:en faite, c'est le css que tu m'as donné, j'ai juste modifier la valeur du padding-top
(je suis d'ailleurs en train d'essayer de changer pour centrer verticalement l'image automatiquement)

Up, j'ai tenté quelques bricole, comme par exemple vertical-align, mais rien ne fonctionne,

comment centrer l'image?


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 Mer 28 Sep 2011 - 19:35

Pourrais-tu donner ce que tu as mis en html dans ta page ?
Avec des précisons de combien d'images par ligne ?

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.

Page 1 sur 2 1, 2  Suivant

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