Question

Доброго времени суток!

Для вставки картинок использую вот такой код:

 

Код

<p style="text-align: center;">
<a data-fancybox-group="ultbx" class="ulightbox" href="/vosp_rabota/19-20/IMG-20200129-WA0011.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0011.jpg" style="width: 300px; height: 225px;" /></a>&nbsp;
<a data-fancybox-group="ultbx" class="ulightbox" href="/vosp_rabota/19-20/IMG-20200129-WA0014.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0014.jpg" style="width: 300px; height: 225px;" /></a><br>
<a data-fancybox-group="ultbx" class="ulightbox" href="/vosp_rabota/19-20/IMG-20200129-WA0016.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0016.jpg" style="width: 300px; height: 225px;" /></a>&nbsp;
<a data-fancybox-group="ultbx" class="ulightbox" href="/vosp_rabota/19-20/IMG-20200129-WA0017.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0017.jpg" style="width: 300px; height: 225px;" /></a><br>
<a data-fancybox-group="ultbx" class="ulightbox" href="/vosp_rabota/19-20/IMG-20200129-WA0018.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0018.jpg" style="width: 300px; height: 225px;" /></a>&nbsp;
<a data-fancybox-group="ultbx" class="ulightbox" href="/vosp_rabota/19-20/IMG-20200129-WA0019.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0019.jpg" style="width: 300px; height: 225px;" /></a></p><br>

Но он достаточно громоздкий, особенно когда на странице много фотографий и текст. Как можно его немного укоротить?

Answer 1

Если вы вставляете много фото и прописываете в данном коде свои ссылки, тогда сократить не получится так как по сути в итоге будет работать не так как нужно и без лайтбокса или без фиксированной ширины.

Comments

Использование модуля фотоальбом тоже?

---

Андрей Овсиенко,

Зачем в данной ситуации модуль фотоальбом если вы добавляете фото ссылками в материалах с помощью своего кода, здесь другой модуль не поможет.

---

Yuri_Geruk,

А если не выводить все миниатюры, а только одну, а остальные будут переключатьься уже в  увеличенном режиме? Можно так сделать?

---

Андрей Овсиенко,

Нет, все картинки должны быть физически на странице.

Answer 2

Можно сократить только так.... стили вынести в ксс

.ulightbox img {width:300px; height:225px;}  

html сокращаем, пример для одной картинки, сделать для всех так.  

<a  class="ulightbox" href="/vosp_rabota/19-20/IMG-20200129-WA0019.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0019.jpg" /></a>   

В самом низу пишем скрипт

<script> $(function(){$('.ulightbox').each(function(){$(this).attr('data-fancybox-group','ultbx');});}); </script>

Comments

Спасибо, попробую!

---

Андрей Овсиенко,

Еще вопрос - а можно как-то ограничить эту "карусель" (data-fancybox-group) в рамках только одной конкретной группы фото, а не всех, которые представлены на странице?

---

Андрей Овсиенко,

Да, 

html сделайте таким

<a  class="ulightbox  rs" href="/vosp_rabota/19-20/IMG-20200129-WA0019.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200129-WA0019.jpg" /></a>

Скрипт таким

 <script> $(function(){$('.ulightbox rs').each(function(){$(this).attr('data-fancybox-group','ultbx');});}); </script>

---

Sentimo,

Спасибо!

То есть, если я правильно понял, то нужно придать уникальность ulightbox ? ТО есть если для первой группы использовать "ulightbox  rs", то для второго, например "ulightbox  st" - что-то вроде якоря?

---

Андрей Овсиенко,

Нет, для всех нужных "ulightbox  rs".

---

Sentimo,

Сделал всё как Вы написали, карусель исчезла - нет стрелок для просмотра слудеющих фото в рамках класса ulightbox  rs...

код копировал прямо из вашего сообщения, не понимаю что не так...

 

Код

<a class="ulightbox rs" href="/vosp_rabota/19-20/IMG-20200219-WA0013.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200219-WA0013.jpg" style="width: 225px; height: 300px;" /></a>&nbsp;
<a class="ulightbox rs" href="/vosp_rabota/19-20/IMG-20200219-WA0014.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200219-WA0014.jpg" style="width: 225px; height: 300px;" /></a><br>
<a class="ulightbox rs" href="/vosp_rabota/19-20/IMG-20200219-WA0015.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200219-WA0015.jpg" style="width: 300px; height: 200px;" /></a>

 <script> $(function(){$('.ulightbox rs').each(function(){$(this).attr('data-fancybox-group','ultbx');});}); </script>

Может быть из-за того, что указаны размеры картинок?

---

Андрей Овсиенко,

Сделайте так...

<span class="groupone">
<a class="ulightbox" href="/vosp_rabota/19-20/IMG-20200219-WA0013.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200219-WA0013.jpg" style="width: 225px; height: 300px;" /></a>&nbsp;
<a class="ulightbox" href="/vosp_rabota/19-20/IMG-20200219-WA0014.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200219-WA0014.jpg" style="width: 225px; height: 300px;" /></a><br>
<a class="ulightbox" href="/vosp_rabota/19-20/IMG-20200219-WA0015.jpg"><img alt="" src="/vosp_rabota/19-20/IMG-20200219-WA0015.jpg" style="width: 300px; height: 200px;" /></a>
</span>
<script> $(function(){$('.groupone .ulightbox').each(function(){$(this).attr('data-fancybox-group','ultbx');});}); </script>