Разместить объявление
хостинг
VIPAdmin / CMS / uCoz / uCoz модули / Отображение картинок плиткой как в VK для uCoz

Отображение картинок плиткой как в VK для uCoz



Установка:
Зайдите в ПУ > Управления дизайном > Страница материала и комментариев к нему и там, где должны быть фотографии добавьте следующий код:
<div class="preview">  
  <div class="wrap">  
  <?if($IMG_URL1$)?><div class="grid ulightbox" href="$IMG_URL1$" target="_blank"><img src="$IMG_URL1$" alt="$ENTRY_TITLE$"/></div><?endif?>  
  <?if($IMG_URL2$)?><div class="grid ulightbox" href="$IMG_URL2$" target="_blank"><img src="$IMG_URL2$"/></div><?endif?>  
  <?if($IMG_URL3$)?><div class="grid ulightbox" href="$IMG_URL3$" target="_blank"><img src="$IMG_URL3$"/></div><?endif?>  
  <?if($IMG_URL4$)?><div class="grid ulightbox" href="$IMG_URL4$" target="_blank"><img src="$IMG_URL4$"/></div><?endif?>  
  <?if($IMG_URL5$)?><div class="grid ulightbox" href="$IMG_URL5$" target="_blank"><img src="$IMG_URL5$"/></div><?endif?>  
  </div>  
</div>  
  
<script>  
  var PreviewImageLen = $('.preview .wrap .grid').length;  
  $('.preview .wrap').addClass('len'+PreviewImageLen);  
  $('.preview .wrap .grid').each(function(index){$(this).addClass('img'+(index+1))});  
</script>


Ну и стили - ПУ > Управление дизайном > Таблица стилей (CSS)
.preview {display: block; width: calc(100% - 4px); padding: 2px; background: rgba(0,0,0,.25); margin-bottom: 2px;}  
.preview .wrap {display: grid; grid-gap: 2px; overflow: hidden;}  
.preview .wrap.len1 {grid-template-areas: 'img1';}  
.preview .wrap.len2 {grid-template-areas: 'img1 img2';}  
.preview .wrap.len3 {grid-template-areas: 'img1 img2' 'img1 img3'; grid-template-columns: 2fr 1fr;}  
.preview .wrap.len4 {grid-template-areas: 'img1 img2' 'img1 img3' 'img1 img4'; grid-template-columns: 3fr 1fr;}  
.preview .wrap.len5 {grid-template-areas: 'img1 img1 img1 img1' 'img2 img3 img4 img5';}  

.preview .grid {display: block; width: 100%; height: 100%;}  
.preview .grid img {width: 100%; height: 100%; object-fit: cover;}  
.preview .grid.img1 {grid-area: img1;}  
.preview .grid.img2 {grid-area: img2;}  
.preview .grid.img3 {grid-area: img3;}  
.preview .grid.img4 {grid-area: img4;}  
.preview .grid.img5 {grid-area: img5;}  

.preview .wrap.len1 {min-height: 200px; max-height: calc(100vh - 150px);}  
.preview .wrap.len1 .grid {min-height: 200px; max-height: calc(100vh - 150px);}

Еще немного интересного

Способы заработка / Статьи Сайты с бесплатной накруткой TikTok | YouTube
Криптовалюта / Статьи Второй username в тг | Работа с fragment
Способы заработка / Статьи ЗАРАБОТОК НА YouTube
Криптовалюта / Статьи Как избежать бана на Binance
Раскрутка соц. сетей / Статьи Обучение по трафику с ТикТок. Июль 2021
Статьи / Другое Почему важен дизайн?
Статьи / Другое Запускаем AI стрим на Twitch
Статьи / Другое БЕСПЛАТНАЯ КАРТА «Zelf»
Статьи / Другое Поисковик файлов by DeCoded
Статьи / Безопасность [SIM]Спамблок без заморочек.
Способы заработка / Статьи / Арбитраж трафика Заработок на арбитраже трафика 💎💸
Сервисы / Парсинг A-PARSER - парсер сайтов № 1
Сервисы / Сервера и хостинги Хостинг PrivateAlps (Игнорирует DMCA)
Сервисы / Платёжные системы Merchant001- надежный эквайринг для сайта
Статьи Дорвеи 2023-2024
Арбитраж трафика / Статьи Арбитраж трафика на пуш уведомлениях
Статьи / Софт / Антидетект Браузеры ТОП ЛУЧШИХ АНТИДЕТЕКТ БРАУЗЕРОВ 2023
Сервисы / Трекеры / Клоака Keitaro PRO - трекер для арбитража трафика
Хостинг / Скрипты сайтов / Статьи Как настроить работу почты
Хостинг / Скрипты сайтов / Статьи Урок доступ mysql с любого ip
Хостинг / Скрипты сайтов / Статьи Как сделать моментальную установку сервера? HOSTINPL
Хостинг / Статьи Exim (Восстановление по e-mail)
Скрипты сайтов / Статьи JavaScript - Меняем CSS

Отзывы (0)