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


Автор публикации
Дата публикации
19-01-2022, 15:48
Просмотров
117
Комментариев
0

0
0
Внимание! Данный материал предоставлен сайтом VipAdmin.Club исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое
Реклама
Как скачать?
Пройдите регистрацию на сайте
Воспользуйтесь кнопкой "Скачать"
Ровно через 15 секунд вам будет доступна прямая ссылка на файл
Отображение картинок плиткой как в VK для uCoz
19-01-2022, 15:48
117

Отображение картинок плиткой как в 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]
Автор публикации
wad
Комментарии и отзывы
  • Пустота..
    Людям пока лень писать тут отзывы и комментарии..


  • Вы не зарегистрированы

Последние комментарии
Шаблон LIQUID для DLE
aaaa
Вчера, 16:02
у меня все криво..
Фикс вк для хостинпл 5.6
davis1997
Вчера, 14:56
добавляю строки как у тебя в файле и ошибка http 500 сервер не отвечает
Unisite Board 4.4 NULLED NEW 2022
Олег
28 сентября 2022 20:22
Если кому понадобиться то вот телеграмм чувака у которого покупал 4.7 версию, так же помогает
Unisite Board 4.4 NULLED NEW 2022
Олег
28 сентября 2022 20:21
Вот у него брал @toolartur
Unisite Board 4.4 NULLED NEW 2022
Олег
28 сентября 2022 20:20
Если кому понадобиться то вот телеграмм чувака у которого покупал 4.7 версию, так же помогает
Hostinpl бот для вк
davis1997
27 сентября 2022 13:32
нельзя скачать
Wovie v1.0.2 - Movie and TV Series Streaming Platform
franco manuel
27 сентября 2022 09:09
Does anyone have the V2? https://codelug.com/item/wovie-movie-and-tv-show-streaming-platform-1
Модуль DLE-Billing 0.7.1 для DLE
aconse
21 сентября 2022 09:41
.xml нету в архиве для установки, вот и вся песенка
BitExchanger v2.0 - скрипт обменника валюты
Борис
21 сентября 2022 03:57
Хотел бы получить скрипт
Авто-донат MangoDonate (самописный)
Никита
13 сентября 2022 15:24
Для какой игры?
MyDonate
Гость Дмитрий
11 сентября 2022 21:52
По-умолчанию -- root
Скрипт магазина аккаунтов Оплата QIWI, ЮMoney, Visa
LocoTrip
11 сентября 2022 19:29
Как войти в админ панель
EngineGamePanel v3
Lite
11 сентября 2022 16:24
Дак давным давно слита и тем более панель в открытом доступе. А в архиве закоден установщик и хер
Sngine v3.1 NULLED - движок социальной сети
HGH
11 сентября 2022 09:42
Подскажите пожалуйста почему регистрация пользователя только на латинице? Как исправить эту
Скрипт рулетки Bellereve c 7 игровыми режимами
Аня Мамашина
10 сентября 2022 18:23
помоги пожалуйста у тебя есть вк для связи!