Компактный вид скринов для uCoz

Наверх!
Компактный вид скринов для uCoz
Демо Скачать
Доп. услуги
Дополнительно

Описание

Компактная таблица из скринов, для страницы материала.
Таблица эта напоминает ту самую таблицу фотографий в ВК (собственно идея и была взята оттуда).
Таблица вмешает в себя до 9 скринов.

Установка:
Зайдите в ПУ > Управление дизайном > Страница материала и комментариев к нему и вставьте этот код туда.
(Если у Вас уже установлен вывод скринов, то лучше его убрать).

Код
<div class="screen_in_VK">
  <?if($IMG_URL1$)?><img src="$IMG_URL1$" href="$IMG_URL1$" alt="$ENTRY_TITLE$ screen1"><?endif?>
  <?if($IMG_URL2$)?><img src="$IMG_URL2$" href="$IMG_URL2$" alt="$ENTRY_TITLE$ screen2"><?endif?>
  <?if($IMG_URL3$)?><img src="$IMG_URL3$" href="$IMG_URL3$" alt="$ENTRY_TITLE$ screen3"><?endif?>
  <?if($IMG_URL4$)?><img src="$IMG_URL4$" href="$IMG_URL4$" alt="$ENTRY_TITLE$ screen4"><?endif?>
  <?if($IMG_URL5$)?><img src="$IMG_URL5$" href="$IMG_URL5$" alt="$ENTRY_TITLE$ screen5"><?endif?>
  <?if($IMG_URL6$)?><img src="$IMG_URL6$" href="$IMG_URL6$" alt="$ENTRY_TITLE$ screen6"><?endif?>
  <?if($IMG_URL7$)?><img src="$IMG_URL7$" href="$IMG_URL7$" alt="$ENTRY_TITLE$ screen7"><?endif?>
  <?if($IMG_URL8$)?><img src="$IMG_URL8$" href="$IMG_URL8$" alt="$ENTRY_TITLE$ screen8"><?endif?>
  <?if($IMG_URL9$)?><img src="$IMG_URL9$" href="$IMG_URL9$" alt="$ENTRY_TITLE$ screen9"><?endif?>
  </div>
   
  <script>$('.screen_in_VK img').addClass('ulightbox');</script>
   
  <style>
  .screen_in_VK {display: block; width: 100%;}
  .screen_in_VK:after, .screen_in_VK:before {content: ''; display: block; clear: both;}
  .screen_in_VK img {display: inline-block; margin: 0 3px 5px; object-fit: cover; float: left; width: calc(100% - 6px); height: 25vh;}
  .screen_in_VK img:hover {opacity: .85;}
  </style>
  <?if($IMG_URL1$ && $IMG_URL2$)?>
  <style>
  .screen_in_VK img:nth-of-type(1), .screen_in_VK img:nth-of-type(2) {width: calc(50% - 6px);}
  </style>
  <?endif?>
  <?if($IMG_URL1$ && $IMG_URL2$ && $IMG_URL3$ && $IMG_URL4$ && $IMG_URL5$)?>
  <style>
  .screen_in_VK img:nth-of-type(1) {width: calc(100% - 6px);}
  .screen_in_VK img:nth-of-type(3), .screen_in_VK img:nth-of-type(4), .screen_in_VK img:nth-of-type(5) {width: calc(33.333% - 6px)}
  </style>
  <?endif?>
  <?if($IMG_URL1$ && $IMG_URL2$ && $IMG_URL3$ && $IMG_URL4$ && $IMG_URL5$ && $IMG_URL6$ && $IMG_URL7$ && $IMG_URL8$ && $IMG_URL9$)?>
  <style>
  .screen_in_VK img:nth-of-type(1), .screen_in_VK img:nth-of-type(2) {width: calc(50% - 6px);}
  .screen_in_VK img:nth-of-type(3), .screen_in_VK img:nth-of-type(4), .screen_in_VK img:nth-of-type(5) {width: calc(33.333% - 6px);}
  .screen_in_VK img:nth-of-type(6), .screen_in_VK img:nth-of-type(7), .screen_in_VK img:nth-of-type(8), .screen_in_VK img:nth-of-type(9) {width: calc(25% - 6px);}
  </style>
  <?endif?>


Установка завершена.

Важно

При копирование материала указывайте ссылку на страницу и автора материала.
Адресом страницы является ссылка: http://pandora.clan.su/publ/1-1-0-20
Автором материала является: Denis Minov (CbIPoK2513)

Лицензия GNU GPL от 2016 года.
Установку скрипта или его изменение можно заказать через:
VK
Telegram
Комментарии
Комментов нет.. Печально. Может оставишь свой коммент?
Комментарии могут оставлять только зарегистрированные пользователи.