1

I have a bootstrap carousel with images and text, and I'm trying to have a link inside the paragraph (the link could also be on the same image) that should open the image in a new window.

But I only get the link that when clicked doesn't show image (or anything else) in a new window.

The following is the code I'm using:

<div id="carouselFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/id/1051/300/200" class="d-block w-100" alt="...">
      <div class="image-description">
        <p>
          <a href="https://picsum.photos/id/1051/300/200" target="_blank">Click here</a> to see it bigger
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/id/103/300/200" class="d-block w-100" alt="...">
      <div class="image-description">
        <p>
          ble ble ble
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/id/1039/300/200" class="d-block w-100" alt="...">
      <div class="image-description">
        <p>
          bli bli bli
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/id/104/300/200" class="d-block w-100" alt="...">
      <div class="image-description">
        <p>
          blo blo blo
        </p>
      </div>
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/id/1043/300/200" class="d-block w-100" alt="...">
      <div class="image-description">
        <p>
          blu blu blu
        </p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Advices on how to achieve the result I want are welcome :)

It could also be done using a bootstrap modal (I've tried it but I couldn't make it work, that's why I'm trying this other strategy).

Let me know if you find a way to do this.

Thanks to you all!

Luis Costa
  • 31
  • 5

0 Answers0