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

  • eddy
  • Topic Author
  • Visitor
  • Visitor
6 years 10 months ago - 6 years 10 months ago #4864 by 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 :)
Last edit: 6 years 10 months ago by eddy. Reason: erreurs de traduction
The topic has been locked.
More
6 years 10 months ago #4865 by gmapfp
Bonjour,

Envoyer moi le lien par le formulaire de contact.
The following user(s) said Thank You: eddy
The topic has been locked.
  • eddy
  • Topic Author
  • Visitor
  • Visitor
6 years 10 months ago #4866 by 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?
The topic has been locked.
More
6 years 10 months ago #4867 by gmapfp
Bonjour,

Essaye d'ajouter dans le CSS:

#sbox-content article img {
width : initial !important;
}
The following user(s) said Thank You: eddy
The topic has been locked.
  • eddy
  • Topic Author
  • Visitor
  • Visitor
6 years 10 months ago - 6 years 10 months ago #4868 by 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!
Last edit: 6 years 10 months ago by eddy. Reason: erreurs de traduction
The topic has been locked.
More
6 years 10 months ago #4869 by 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.
The topic has been locked.
Time to create page: 0.143 seconds
Powered by Kunena Forum
FaLang translation system by Faboba