Une lightbox sur un portail
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Une lightbox sur un portail
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,
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
Re: Une lightbox sur un portail
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 :
Dans le CSS :
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.
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,.;
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)
Re: Une lightbox sur un portail
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#
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#
Re: Une lightbox sur un portail
Bonsoir
Effectivement le code comporte des guillemets en trop.
Le code corrigé.
Puis pour ajouter plusieurs image faite comme ceci.
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>
Re: Une lightbox sur un portail
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.
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.
Re: Une lightbox sur un portail
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?
merci Tupac pour ton aide,
est-ce qu'on peut rajouter un bouton suivant pour changer de photo? et du texte?
Re: Une lightbox sur un portail
Je n'ai pas bien compris ce que tu voudrais...Micheloi a écrit:est-ce qu'on peut rajouter un bouton suivant pour changer de photo? et du texte?
Un peu plus précis ? Un petit schéma ?
Re: Une lightbox sur un portail
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
Re: Une lightbox sur un portail
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.
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.
Re: Une lightbox sur un portail
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">
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">
Re: Une lightbox sur un portail
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.
Pour pouvoir bénéficier d'une galerie avec (bouton suivant ) il vous faudra changer de code,un code avec du javascript.
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>
- 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 pouvoir bénéficier d'une galerie avec (bouton suivant ) il vous faudra changer de code,un code avec du javascript.
Re: Une lightbox sur un portail
ah ok, et donc qui dit java, dit le bazars, celui là va me convenir alors,
j'essaie le texte
j'essaie le texte
Re: Une lightbox sur un portail
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.
Re: Une lightbox sur un portail
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, ...
à chaque fois que j'en ai utiliser j'ai eu le droit à des soucis, ralentissement, problème avec IE, ...
Re: Une lightbox sur un portail
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
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
Re: Une lightbox sur un portail
Bonjour Micheloi et Tupac,
Micheloi où as-tu tes images en lightbox ?
Micheloi où as-tu tes images en lightbox ?
Re: Une lightbox sur un portail
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
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
Re: Une lightbox sur un portail
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 :
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;
}
Re: Une lightbox sur un portail
je ne comprends pasFinal-Blond a écrit:OK, mais il n'y a pas le "avant-retour" des images ?
je l'ai mis, mais sans succèsFinal-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;
}
Re: Une lightbox sur un portail
Pour vos liens essayer avec ceux-la.
- Code:
a { text-decoration:none; }
a:hover { text-decoration: none!important; }
Re: Une lightbox sur un portail
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 :
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;
}
Re: Une lightbox sur un portail
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 ?
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;}
Re: Une lightbox sur un portail
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...
EDIT : Pourquoi écrire ton CSS de cette façon ? C'est tout bon pour faire des erreurs en cas de modifications...
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...
Re: Une lightbox sur un portail
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)
(je suis d'ailleurs en train d'essayer de changer pour centrer verticalement l'image automatiquement)
Re: Une lightbox sur un portail
Voici le CSS que je t'ai donné plus haut...
Il n'y a rien de compressé là-dedans !
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;
}
Re: Une lightbox sur un portail
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
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.
Re: Une lightbox sur un portail
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.
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é
Re: Une lightbox sur un portail
c'était ça, merci
Re: Une lightbox sur un portail
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?
Re: Une lightbox sur un portail
Pourrais-tu donner ce que tu as mis en html dans ta page ?
Avec des précisons de combien d'images par ligne ?
Avec des précisons de combien d'images par ligne ?
Page 1 sur 2 • 1, 2
Sujets similaires
» Lightbox sur forumactif
» FORUM : Pour ceux qui recherche une LIGHTBOX
» comment realiser cet effet de lightbox sur mon forum
» adapter l'effet lightbox seulement sur un post
» Lightbox sur image avec dimensions intermédiaires par le hover.
» FORUM : Pour ceux qui recherche une LIGHTBOX
» comment realiser cet effet de lightbox sur mon forum
» adapter l'effet lightbox seulement sur un post
» Lightbox sur image avec dimensions intermédiaires par le hover.
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum