VA

VIPAdmin.club

Навигация

DLE релизы

Плагины для WordPress

Войти

Отображение картинок плиткой как в 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);}

Комментарии

Комментариев пока нет..
Ты можешь быть первым, кто оставит комментарий к публикации!

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

uCoz / uCoz модули

Автор публикации

Enoot

Дата публикации

19-01-2022, 15:48

Просмотров

222

Комментариев

Нравится

Не нравится

Внимание! Данный материал предоставлен сайтом VIPAdmin.Club исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое

Магазин

23-03-2023, 14:32

Скрипты сайтов / Магазин

Shop-Script 9.2.2.63 [WEBASYST]

Shop-Script — движок и конструктор интернет-магазина

18-05-2023, 09:30

WordPress / Плагины для WordPress / Магазин

My Popup - плагин всплывающих окон для WordPress

My Popup - удобный и легкий в использовании плагин для WordPress, который позволяет создавать красивые и эффективные

23-05-2023, 12:00

WordPress / Плагины для WordPress / Магазин

WPStories - плагин для создания историй

WPStories - поможет привлечь больше внимания к контенту, сделать его более интерактивным и привлекательным для

Техникс 1.4.1 - универсальный шаблон Opencart

22-06-2020, 11:47

OpenCart шаблоны / OpenCart (ocStore) / Магазин

Техникс 1.4.1 - универсальный шаблон Opencart

«Техникс 1.4.1» — универсальный шаблон интернет-магазина на OpenCart. Разработан на основе фреймворка Bootstrap 5.x,

Stroimarket – шаблон магазина стройматериалов Opencart 2.3

21-02-2022, 19:57

OpenCart (ocStore) / OpenCart шаблоны / Магазин

Stroimarket – шаблон магазина стройматериалов Opencart 2.3

Stroimarket – это недорогой шаблон интернет магазина opencart на тему строительство и ремонт. Открыть интернет-магазин

Смотрите также

Consultix v3.0.2 - бизнес-консалтинг WordPress тема

11-08-2022, 11:36

WordPress шаблоны

Consultix v3.0.2 - бизнес-консалтинг WordPress тема

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

3-05-2020, 19:57

PSD макеты и графика

PSD исходник - Instagram сторис

Весенняя тема дизайн-оформления профиля для социальной сети Инстаграм.

7-01-2018, 08:56

Хостинг

BGPanel

Это бесплатная и открытая панель управления для игровых серверов Linux. Он позволяет пользователям управлять игровым

Zinc - универсальный шаблон веб-сайта агентства

21-03-2022, 00:20

html шаблоны

Zinc - универсальный шаблон веб-сайта агентства

Zinc - это бесплатный универсальный шаблон Bootstrap 5 для веб-сайта агентства, который поставляется с множеством

obGrabber v4.3.1 - автоматический граббер для Joomla

22-03-2020, 21:18

Joomla плагины

obGrabber v4.3.1 - автоматический граббер для Joomla

obGrabber позволяет собирать новости и публиковать их в Вашем блоге на Joomla в автоматическом режиме. Поддерживает

19-01-2022, 15:48

222

uCoz модули

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

Информация

Версия

v1.405

Версия CMS

v15.0

Тематика

Новости, Блог, Каталог

Фреймворк

Bootstrap v5

Описание

<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);}

[xfgiven_images]

Изображения

[/xfgiven_images]