Les images de l'article dans la lightbox sont à 100% de width

  • eddy
  • Auteur du sujet
  • Visiteur
  • Visiteur
il y a 6 ans 9 mois - il y a 6 ans 9 mois #4864 par eddy
J'ai configuré dans le gestionnaire de place pour la lightbox pour ouvrir un article quand le marqueur de lieu est cliqué.

Cette fonction fonctionne bien sauf que les images de l'article sont redimensionnées à 100% de la largeur de la lightbox même lorsque les dimensions de l'image sont définies manuellement dans le code de l'article.

Comment puis-je obtenir ces images à la taille de l'image originale?

Je souhaite que l'adresse web reste privée. Je peux vous envoyer l'URL de la map et de l'article via le formulaire de contact si vous le souhaitez.

Merci pour cet excellent Joomla addon!

Et désolé mon français est pauvre :)
Dernière édition: il y a 6 ans 9 mois par eddy. Raison: erreurs de traduction
Le sujet a été verrouillé.
Plus d'informations
il y a 6 ans 9 mois #4865 par gmapfp
Bonjour,

Envoyer moi le lien par le formulaire de contact.
Les utilisateur(s) suivant ont remercié: eddy
Le sujet a été verrouillé.
  • eddy
  • Auteur du sujet
  • Visiteur
  • Visiteur
il y a 6 ans 9 mois #4866 par eddy
Merci pour la réponse rapide.

Je vous ai envoyé les URL de la map et l'article qui est affiché dans la lightbox via le formulaire de contact

Les avez-vous reçus?
Le sujet a été verrouillé.
Plus d'informations
il y a 6 ans 9 mois #4867 par gmapfp
Bonjour,

Essaye d'ajouter dans le CSS:

#sbox-content article img {
width : initial !important;
}
Les utilisateur(s) suivant ont remercié: eddy
Le sujet a été verrouillé.
  • eddy
  • Auteur du sujet
  • Visiteur
  • Visiteur
il y a 6 ans 9 mois - il y a 6 ans 9 mois #4868 par eddy
Après avoir ajouté le code via l'éditeur CSS de GMapFP, je peux voir qu'il est outrepasser par le fichier CSS du thème de l'modèle, donc cela ne fonctionne pas pour le site.

La solution que j'ai trouvée consistait à remplacer tous l'image styles de largeur avec...
auto !important
dans le fichier custom.css pour l'modèle.

Si j'ai ajouté...
width: initial !important;
certains images peuvent ne pas être réactives et redimensionner si nécessaire.

J'ai ajouté le code suivant au fichier custom.css pour mon modèle afin d'obtenir le résultat souhaité:

/ * GMAPFP LIGHTBOX ARTICLE IMAGE TAILLE * /

article img,
.article-intro img {
  display: block;
  max-width: auto !important;
  height: auto;
}

article img[align="left"],
.article-intro img[align="left"],
article .img-fulltext-left,
.article-intro .img-fulltext-left,
article .img-intro-left,
.article-intro .img-intro-left,
article .img_caption.left,
.article-intro .img_caption.left,
article .pull-left.item-image,
.article-intro .pull-left.item-image {
  margin-right: 20px;
  max-width: auto !important;
}

article img[align="right"],
.article-intro img[align="right"],
article .img-fulltext-right,
.article-intro .img-fulltext-right,
article .img_caption.right,
.article-intro .img_caption.right,
article .img-intro-right,
.article-intro .img-intro-right,
article .pull-right.item-image,
.article-intro .pull-right.item-image {
  margin-left: 20px;
  max-width: auto !important;
}

.img-intro-none,
.img-intro-left,
.img-intro-right,
.img-fulltext-none,
.img-fulltext-left,
.img-fulltext-right,
.img_caption {
  position: relative;
  margin-bottom: 20px;
  max-width: auto !important;
} 

@media screen and (max-width: 992px) {
  article img,
  .article-intro img,
  article img[align=left],
  .article-intro img[align=left],
  article img[align=right],
  .article-intro img[align=right],
  article .img_caption,
  .article-intro .img_caption,
  article .article-image-full,
  .article-intro .article-image-full,
  article .article-image-intro,
  .article-intro .article-image-intro,
  article .img-intro-none,
  .article-intro .img-intro-none,
  article .img-intro-left,
  .article-intro .img-intro-left,
  article .img-intro-right,
  .article-intro .img-intro-right,
  article .img-fulltext-none,
  .article-intro .img-fulltext-none,
  article .img-fulltext-left,
  .article-intro .img-fulltext-left,
  article .img-fulltext-right,
  .article-intro .img-fulltext-right {
    float: none !important;
    margin-left: 0;
    margin-right: 0;
    width: auto !important;
  }
}

Avec cette information, pouvez-vous trouver une meilleure façon de mettre en œuvre une solution?

Merci encore!
Dernière édition: il y a 6 ans 9 mois par eddy. Raison: erreurs de traduction
Le sujet a été verrouillé.
Plus d'informations
il y a 6 ans 9 mois #4869 par gmapfp
Bonjour,

Afin que ce code ne soit pas outrepassé par le CSS de ton modèle, je te conseil de le collé dans le CSS de ton modèle après les lignes qui l'outrepasse.
Le sujet a été verrouillé.
Temps de génération de la page : 0.092 secondes
Propulsé par Kunena
FaLang translation system by Faboba