Search code examples
javascripthtmlcsstwitter-bootstrapfigure

Add multiple thumbnails in figure

I have a figure and a figcaption and I would like to have one picture and when I click on it, have more thumbnails/pictures.

My figure : 

<!-- Bootstrap CSS -->
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />

<div class="col-6 col-lg-3">
  <figure>
    <figcaption>
      <h3>project</h3>
      <h4>project test</h4>
      <a href="img/realisations/imagexl.png" data-lightbox="work" data-title="resume"><img src="https://picsum.photos/300/100" alt="loupe.svg"></a>
    </figcaption>
    <br>
    <img src="https://picsum.photos/300/101" alt="imagexs.jpg">
  </figure>
</div>

<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Thank you.

Solution

  • One way you could do it would be to set the intital display of images to none and on click display them 

    $(document).ready(function() {
  var MoreImages = document.getElementById("moreImages");
  var ShowImages = document.getElementById("showImages");
  MoreImages.style.display = "none";

  ShowImages.addEventListener("click", function() {
    document.getElementById("moreImages").style.display = "";
  });
});
    img {
  height: 150px;
  width: 150px;
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Bootstrap 4 JS -->
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-lg-6">
          <figure>
            <figcaption>
              <h3>project</h3>
              <h4>project test</h4>
              <span id="showImages"
                ><img
                  src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
                  alt="loupe.svg"
              /></span>
            </figcaption>
            <div class="row" id="moreImages">
              <div class="col-4">
                <span
                  ><img
                    src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
                    alt="loupe.svg"
                /></span>
              </div>
              <div class="col-4">
                <span
                  ><img
                    src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
                    alt="loupe.svg"
                /></span>
              </div>
              <div class="col-4">
                <span
                  ><img
                    src="https://image.shutterstock.com/image-vector/cartoon-apple-260nw-651312034.jpg"
                    alt="loupe.svg"
                /></span>
              </div>
            </div>
          </figure>
        </div>
      </div>
    </div>

    <script src="./index.js"></script>
  </body>
</html>