FancyBox на увеличенной картинке отобразить текст (caption) не из title, а из span

0 из 5, голосов: 0
268
Мне потребовалось подписать миниатюры в галерее. И эти же подписи к миинатюрам отобразить под увеличенной картинкой в модальном окне.

При этом не хотелось по 2 раза писать одинаковые подписи (одну для миниатюры, вторую для увеличенной картинки).

В решении все это присутствует + есть возможность форматировать надписи к картинкам html-тегами (и делать переносы в тексте), т.к. тексты фактически размещены не в атрибутах (например, title), а в теге span. Суть дополнения в том, что мы размещаем текст в span, а потом функцией переносим этот текст из span в caption (надпись).

Пример

Скачать zip-архив с этим примером

Код этого примера: 

<!DOCTYPE html><html><head></head><body>

<!--Подключаем скрипты для работы fancybox-->
<link rel="stylesheet" type="text/css" href="fancybox_3-5-7.css" media="screen">
<script type="text/javascript" src="jquery_3-5-1.min.js"></script>
<script type="text/javascript" src="fancybox_3-5-7_min.js"></script>

<!--Показываем нашу галерею-->
<table>
<tr>
<td><a data-fancybox="images" href="img/1.jpg"><img src="img/1s.jpg"><br>
<span>1111111111<br>Текст 1. Текст 1. Текст 1.</span></a></td>
<td><a data-fancybox="images" href="img/2.jpg"><img src="img/2s.jpg"><br>
<span>2222222222<br>Текст 2. Текст 2. Текст 2.</span></a></td>
<td><a data-fancybox="images" href="img/3.jpg"><img src="img/3s.jpg"><br>
<span>3333333333<br>Текст 3. Текст 3. Текст 3.</span></a></td>
</tr>
</table>

<!--После отображения картинок (галереи), берем текст из span и назначаем его подписью к увеличенной картинке-->
<script type="text/javascript">
$( '[data-fancybox="images"]' ).fancybox({
  caption : function( instance, item ) {
      return $(this).find('span').html();
  }
});
</script>

</body></html>
В документации (https://fancyapps.com/fancybox/3/docs/) есть примерно такой же пример.

И из этой документации стоит ссылка на рабочий пример, только обратите внимание, в этом (нижеследующем) примере текстовые надписи в галерее скрыты стилями CSS (если надписи открыть, то пример будет очень похож на мой, т.к. я скрипт от-туда и взял): https://codepen.io/fancyapps/pen/aaerxw



[0.011108]