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


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

591
9.6 из 10
Проголосовало: 16






Компактная таблица из скринов, для страницы материала.
Таблица эта напоминает ту самую таблицу фотографий в ВК (собственно идея и была взята оттуда).
Таблица вмешает в себя до 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?>


Установка завершена.
Автор публикации: Загрузка
Загрузка
CbIPoK2513, это его n материал
Источник: http://pandora.clan.su/
  • Всего комментариев: 13

Десерт
0
Десерт написал: Написано 21 Июля 2016 в 21:45
Комментарий №13
А если я добавлю ещё одно изображение, то ни чего не испортится?

А так классно выглядит

1488
0
1488 написал: Написано 17 Июля 2016 в 15:37
Комментарий №6
норм тема!

Вовчик
0
Вовчик написал: Написано 17 Июля 2016 в 09:38
Комментарий №1
на демо в браузере опера кабордак, картинки все большие...

CbIPoK2513
+1
CbIPoK2513 написал: Написано 17 Июля 2016 в 09:59
Комментарий №2
Хм.. Странно, только что проверил в Chrome 51 - всё норм, в Mozila 47 - всё норм, Opera от 32 до 38 - всё норм, в Safari 5 - косяк и в IE 8 - косяк.

Вовчик
0
Вовчик написал: Написано 17 Июля 2016 в 10:16
Комментарий №4
опера 12 tongue

CbIPoK2513
0
CbIPoK2513 написал: Написано 17 Июля 2016 в 10:29
Комментарий №5
Ну ты даёшь XD

k43
0
k43 написал: Написано 18 Июля 2016 в 12:44
Комментарий №7
ничего что сейчас актуальная версия: 38.0.2220.41

CbIPoK2513
0
CbIPoK2513 написал: Написано 18 Июля 2016 в 13:51
Комментарий №8
Ну вдруг у него лагают новые версии?
У меня так со скайпом было, пару обновлений назад, я использовал старый скайп, пока мне связь в нём не обрубил.

k43
0
k43 написал: Написано 19 Июля 2016 в 10:05
Комментарий №12
скайп и опера абсолютно разные программы, скайп уже давно глючный и по сути его уже мало кто использует

Вовчик
0
Вовчик написал: Написано 18 Июля 2016 в 18:02
Комментарий №9
да мне по барабану какая щас версия, я пользуюсь 12 biggrin

p.s. а во-вторых я из-за компа не могу новую ставить, она что-то у меня косячит, что только не делал а новая опера у меня не работает только 12

CbIPoK2513
0
CbIPoK2513 написал: Написано 18 Июля 2016 в 20:16
Комментарий №10
Ставь Мозилку :3

Вовчик
0
Вовчик написал: Написано 18 Июля 2016 в 21:15
Комментарий №11
нафига

CbIPoK2513
0
CbIPoK2513 написал: Написано 17 Июля 2016 в 10:06
Комментарий №3
В Safari 7 - всё норм.

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: