이미지 아래에 캡션을 추가하는 방법 (이미지는 라이트 박스에 사용됨)

라이트 박스를 사용하여 - Lokesh Dhakar와 나는 연속으로 3 개의 이미지를 가지고 있으며 클릭하면 라이트 박스가 열립니다. 문제는 일반 이미지 만 있고 그 아래에 캡션을 추가하고 싶습니다. 라이트 박스가 열리면 캡션이 아닙니다 (이미 가지고 있습니다). 라이트 박스가 열리기 전에 캡션이 이미지 아래에 있습니다.이미지 아래에 캡션을 추가하는 방법 (이미지는 라이트 박스에 사용됨)

이 코드는 필자가 어떤 장소에 페이지를 추가하는 방법에 대한 장난 시도 이미지

<body> 
    <h1> 
     <a href="index.html"> 
     <img class="logo" src="../img/nota.png"> 
     </a> 
    </h1> 
<hr> 

<section> 
<nav> 
    <li><a href="index.html" class="button">ARTWORK</a></li> 
    <li><a href="logos.html" class="button">LOGOS</a></li> 
    <li><a href="other.html" class="button">OTHER</a></li> 
    <li><a href="contact.html" class="button">CONTACT</a></li> 
</nav> 
</section> 

    <div class="imgcontainer"> 
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1" data-title="CENA:"><img class="artworkimg" src="../img/car.jpg"></a> 
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a> 
    <a class="lightboximage" href="../img/car.jpg" data-lightbox="image-1"><img class="artworkimg" src="../img/car.jpg"></a> 
    <script src="../js/lightbox.js"></script> 
    <script> 
    lightbox.option({'showImageNumberLabel': false}) 
</script> 
    </div> 
</body>

에 대한처럼 보이지만 캔트 그것을 알아낼 것 같다 것입니다.

출처

2017-10-31 Dan073

당신은 전체 코드와 지금까지 무엇을의 작업 예제를 포함 할 수 있다면 정말 도움이 될 것이다. 감사합니다 – sol

원래 게시글을 편집했습니다 – Dan073

아래의 스 니펫에서 수행 한 단계에 따라 캡션을 추가 할 수 있습니다.

캡션 콘텐츠가 .lightboximage 인 span을 중첩했습니다. 이미지 아래에 표시하려면 flexbox 속성을 사용했습니다.

.lightboximage { 
 
display: inline-flex; 
 
flex-direction: column; 
 
text-decoration: none; 
 
} 
 

 
.caption { 
 
    font-family: sans-serif; 
 
    color: black; 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    padding-top: .5em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.9.0/js/lightbox.js"></script> 
 

 

 
<div class="imgcontainer"> 
 
    <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">  <img class="artworkimg" src="https://unsplash.it/200x200"> 
 
    <span class="caption">My Caption</span> 
 
    </a> 
 
    <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">  <img class="artworkimg" src="https://unsplash.it/200x200"> 
 
    <span class="caption">My Caption</span> 
 
    </a> 
 
    <a class="lightboximage" href="https://unsplash.it/200x200" data-lightbox="image-1" data-title="CENA:">  <img class="artworkimg" src="https://unsplash.it/200x200"> 
 
    <span class="caption">My Caption</span> 
 
    </a> 
 
</div>

출처

2017-10-31 17:27:24 sol

당신이 해결했습니다! 놀라워요. 고마워요. 몇 시간 동안 붙어 있었어요. – Dan073

이미지 아래에 캡션을 추가하는 방법 (이미지는 라이트 박스에 사용됨)

답변

관련 문제