Question

Здраствуйте. Помогите разобраться? В общем есть блок для вывода скриншотов материала

<div class="eTitle2" style="background-color:#DAE3F5; padding:5px 5px">
 <?if($IMG_URL2$)?><a href="$IMG_URL2$" class="ulightbox"><img src="$IMG_URL2$" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" class="screen4"></a><?endif?> 
 <?if($IMG_URL3$)?><a href="$IMG_URL3$" class="ulightbox"><img src="$IMG_URL3$" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" class="screen4"></a><?endif?>
 <?if($IMG_URL4$)?><a href="$IMG_URL4$" class="ulightbox"><img src="$IMG_URL4$" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" class="screen4"></a><?endif?>
 <?if($IMG_URL5$)?><a href="$IMG_URL5$" class="ulightbox"><img src="$IMG_URL5$" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" class="screen4"></a><?endif?>
 <?if($IMG_URL6$)?><a href="$IMG_URL6$" class="ulightbox"><img src="$IMG_URL6$" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" class="screen4"></a><?endif?> 
 <?if($IMG_URL7$)?><a href="$IMG_URL7$" class="ulightbox"><img src="$IMG_URL7$" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" class="screen4"></a><?endif?>
     </div>

стиль css

.eTitle2{color:light-dark(var(--tpl-dark-800),var(--dark-tpl-light));display:flex; justify-content: flex-start; margin-bottom:var(--tpl-spacing-2)} 

Но скриншоты выводятся таким вот образом 

Что нужно дописать, чтобы скрины выводились по 3 в ряд на весь размер блока с отспуом 2px между собой? 

 

И еще вопрос почему не работает функция "Группировать изображения материала при просмотре", хотя на других сайтах все норм?

Answer 1

Попробуйте ваши стили заменить на такие:

.eTitle2{
display:flex;
flex-wrap:wrap;
gap:2px;
margin-bottom:var(--tpl-spacing-2);
}

.eTitle2 a{
width:calc((100% - 4px)/3);
display:block;
}

.eTitle2 img{
width:100%;
height:auto;
display:block;
}

Comments

 Прекрасно, спасибо большое!

 

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

---

Александр Склюев,

В условиях рядом к лайтбоксу допишите атрибут:

data-fancybox="gallery"

после листание заработает.

---

Yuri_Geruk,

эмм, это в css?

---

Александр Склюев,

Нет, это в условиях ваших надо, пример:

<?if($IMG_URL2$)?><a href="$IMG_URL2$" class="ulightbox" data-fancybox="gallery"><img src="$IMG_URL2$" alt="$ENTRY_TITLE$" title="$ENTRY_TITLE$" class="screen4"></a><?endif?>