J'ai une galerie d'images qui ouvre chaque image, sous la grille d'images, sous forme d'agrandissement avec un texte descriptif. Je n'arrive pas à centrer le texte et à rester sur l'image. J'ai essayé de changer le CSS avec débordement, largeur, etc., mais je pense que c'est dans le code JS. Je ne connais pas JS, j'ai trouvé le code sur un codepen et j'ai apporté les modifications nécessaires (et avec de l'aide sur le débordement de pile !). De plus, j'aimerais que l'image agrandie se ferme et revienne à la galerie après un certain temps. Est-ce possible?

Le lien vers mon codepen est https://codepen.io/Ovimel/pen/YgzVeg Le la première image montre le problème que j'ai.

Je suis un novice en matière de codage et je ne suis pas sûr d'avoir correctement posté le code ici. En fait, je sais que ce n'est pas correct car les images ne sont pas alignées et les tailles standard et les agrandissements ne se chargent pas, mais dois-je tout poster ? Le codepen est l'endroit où vous verrez qu'il fonctionne / ne fonctionne pas. Merci d'avance pour votre aide!

/*styling for gallery page images*/

* {
  box-sizing: border-box;
}


/*The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 200px;
  overflow: hidden;
}


/*Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
  max-width: 100%;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container-gallerypage {
  position: relative;
  display: none;
  padding: 15px;
  text-align: center;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 35px;
  color: red;
  font-size: 20px;
  text-align: center;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}


/*styling for footer and footer text links*/

footer {
  background-color: #6e6b5c;
  color: white;
  font-family: "Days One", sans-serif;
  font-size: .8em;
  text-align: center;
  padding: 10px;
  border: solid 3px #194a76;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


/*@media only screen and (max-width: 320px) {
  .footer {
    background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
  }
}*/

a.footerlinks {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

a.footerlinks:link,
a.footerlinks:visited {
  color: white;
}

a.footerlinks:hover,
a.footerlinks:active {
  color: #194a76;
  text-decoration: underline;
}
<article role="main">
  <header>
    <h1>THE GALLERY</h1>
    <p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
  </header>


  <!-- slide gallery -->
  <!-- The four columns -->

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). 
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>


  <div class="container-gallerypage">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:80%">
    <div id="imgtext" style="text-align: center;width:100%;"></div>
  </div>

</article>

<br>

<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
  <p>This site is hosted at no cost to the public by
    <a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
    <a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
    <a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
  <p>Copyright &copy;2012-2019. All rights reserved. Design and website by Vivian Linderman.
    <address>
            <a class="footerlinks" href="mailto:vivian_lbdn@hotmail.com">CONTACT WEBMASTER</a>
          </address>Created 2012, updated 2019.
  </p>
</footer>
</div>
0
Ovimel 7 mars 2019 à 03:21

2 réponses

Meilleure réponse

Personnellement, je recommencerais le tout, mais l'ajouter à votre CSS devrait vous aider

#imgtext {
    width: 70%;
    display: block;
    margin: auto;
    position: relative;
    bottom: 100px;
}

Je viens de tester dans le stylo de code et cela nécessite la balise !important

#imgtext {
    width: 70%!important;
    display: block!important;
    margin: auto!important;
    position: relative!important;
    bottom: 100px!important;
}
1
Chris 7 mars 2019 à 00:31

Un petit ajustement de votre css peut donner le résultat souhaité. Définissez un max-width (plus étroit que la pleine largeur) et une marge qui le définira de manière appropriée (dans ce cas, je lui ai donné une largeur maximale de 75% et une marge gauche et droite de 10% [une approximation, en tenant compte marges/padding ajoutées au navigateur du compte], et définissez-le sur display:block avec position:absolute, 20 % à partir du haut. Chacune de ces valeurs peut être modifiée à votre guise, mais vous obtenez l'image. Je le ferais recommande d'utiliser une taille de police plus petite pour bénéficier d'écrans plus petits, d'ici là

J'espère que cela t'aides

//Make older browsers aware of new HTML5 layout tags 
'header nav aside article footer section'.replace(/\w+/g, function(n) {
  document.createElement(n)
})

function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
/*styling for gallery page images*/

* {
  box-sizing: border-box;
}


/*The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
  height: 200px;
  overflow: hidden;
}


/*Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
  max-width: 100%;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container */

.container-gallerypage {
  position: relative;
  display: none;
  padding: 15px;
  text-align: center;
}


/* Expanding image text */

#imgtext {
  display: block;
  max-width:75%;
  position: absolute;
  top:20%;
  text-align:center;
  margin:0 10%;
  color: red;
  font-size: 20px;
}


/* Closable button inside the expanded image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}


/*styling for footer and footer text links*/

footer {
  background-color: #6e6b5c;
  color: white;
  font-family: "Days One", sans-serif;
  font-size: .8em;
  text-align: center;
  padding: 10px;
  border: solid 3px #194a76;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


/*@media only screen and (max-width: 320px) {
  .footer {
    background-image: url(https://kehilalinks.jewishgen.org/images/KehilaLinksLogo.transparent.png);
  }
}*/

a.footerlinks {
  color: white;
  font-weight: 600;
  text-decoration: none;
}

a.footerlinks:link,
a.footerlinks:visited {
  color: white;
}

a.footerlinks:hover,
a.footerlinks:active {
  color: #194a76;
  text-decoration: underline;
}
<body>
<article role="main">
  <header>
    <h1>THE GALLERY</h1>
    <p style="font-style: italic; text-align: center;">Click on an image to read the caption and to view a larger version below.</p>
  </header>


  <!-- slide gallery -->
  <!-- The four columns -->

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side. If there is lots of text for an image how do I keep it within the image or have it offset to the right side and keep the image on the left side.
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>

  <div class="row">
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/20.jpg" alt="The Eli Lechtzer Family, circa 1915. (L - R, seated) Chana Butzarsky Lechtzer, Raizel (Rose) Lechtzer, Eli Lechtzer, and Golda Lechtzer (standing). 
    " style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/2.jpg" alt="Sisters of Stavisht" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/6.jpg" alt="Four girls" style="width:100%" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="https://kehilalinks.jewishgen.org/Stavishche/images/22.jpg" alt="Raizel Lechtzer,  circa 1917. Raizel, wearing her school uniform, is about 7 years old in this photo." style="width:100%" onclick="myFunction(this);">
    </div>
  </div>


  <div class="container-gallerypage">
    <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
    <img id="expandedImg" style="width:80%">
    <div id="imgtext" style="text-align: center;width:100%;"></div>
  </div>

</article>

<br>

<!-- Footer -->
<footer id="footerlogo" role="contentinfo">
  <p>This site is hosted at no cost to the public by
    <a class="footerlinks" href="https://jewishgen.org">JewishGen, Inc.</a>, a non-profit corporation. If you feel there is a benefit to you in accessing this site, please consider supporting our important work through
    <a class="footerlinks" href="https://jewishgen.org/JewishGen-erosity">JewishGen-erosity</a>. Visit the
    <a class="footerlinks" href="https://kehilalinks.jewishgen.org">JewishGen KehilaLinks</a> website to discover other communities.</p>
  <p>Copyright &copy;2012-2019. All rights reserved. Design and website by Vivian Linderman.
    <address>
            <a class="footerlinks" href="mailto:vivian_lbdn@hotmail.com">CONTACT WEBMASTER</a>
          </address>Created 2012, updated 2019.
</footer>
</body>
1
Rachel Gallen 7 mars 2019 à 00:51