Вопрос по fancybox (js альбом)

196

16 мая 2018, 06:40

Поставил fancybox, чтобы был нормальный фотоальбом. Так вот, я использовал data-caption="", и у меня отображается все слево (некрасивое описание получается).

Подскажите, как я могу использовать тут css, чтобы к примеру был текст по центру

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet"/> 
 
<div class="col-md-3 col-sm-4 col-xs-6 thumb"> 
  <a data-fancybox="gallery" href="1.png" data-caption="Какой-то текст"> 
    <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> 
  </a> 
</div>

Благодарю за помощь.

Answer 1

Класс .fancybox-caption отвечает за стили текста data-caption.

.fancybox-caption { 
  color: red; 
  text-align: center; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet" /> 
 
<div class="col-md-3 col-sm-4 col-xs-6 thumb"> 
  <a data-fancybox="gallery" href="https://picsum.photos/200/300" data-caption="Какой-то текст"> 
    <img class="img-responsive" src="https://picsum.photos/200/300" alt=""> 
  </a> 
</div>