Партнёр №1
Заказать рекламу
Ветрина ссылок
Новые файла
1Проверка о...
Дата: 18.10.2019
Скачан: 0
Просмотров: 47

2МОДЕРНИЗАЦ...
Дата: 11.10.2019
Скачан: 0
Просмотров: 54

3ЗАКАЗ УСЛУ...
Дата: 11.10.2019
Скачан: 0
Просмотров: 74

Опрос
Чего бы вы хотели больше видеть на сайте

Всего ответов: 1

Назад


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


Добавляли картинки в ВК? Думаю что да, так вот там картинки отображаются своеобразной плиткой.
Так вот теперь Ваши материалы могут похвастаться тем же.
P.s. сразу хочу сказать, что данный вид предназначен если картинок не больше пяти штук, но при желание это можно изменить

Установка:
Зайдите в ПУ > Управления дизайном > Страница материала и комментариев к нему и там, где должны быть фотографии добавьте следующий код:

Код

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


HTML
BB-Code
Ссылка


Вы на странице с файлом: Отображение картинок плиткой для uCoz. Вы нашли его, потому что скорее всего искали что то из тематики Скрипты. Скачать Отображение картинок плиткой для uCoz можно обычно несколькими способами и один из них, скачивание с сайта посредством загрузки архива с нашего сервера, что очень быстро, а главное без ожидания. Еще можно скачать файл с НАРОДА.РУ и других файлообменников. Надеемся вы нашли то что искали, а если нет то посмотрите остальные файлы на As-Play.Ru


Скрипты Добавил: FasT Просмотров: 37 Загрузок: 0

Всего комментариев: 0
Имя *:
Email:
Подписка:1
Код *:

Профиль

Мини-чат
Есть вопросы? - Пишите администратору в Discord:
FasT#9309
Статистика

Яндекс.Метрика
Сайт живет
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Сегодня были
Статистика
Здравствуй, ты попал на активный сайт - As-Play.Ru... Чем мы отличаемся от других сайтов ?
1. Пока что не высокая посещаемость, но это поправимо.
2. Свежие новости из мира Игр.
3. Большое колличество файлов.
4. Обучающие статьи по системе Ucoz.
5. Уникальные конкурсы c призами.
6. Первоклассный "мониторинг серверов для Counter Strike Source,Counter Strike 1.6, и т.д"
7. Мы пользуемся только Фотохостингом "As-Play.Ru"
Мы используем uCoz
Новые пользователи:
nikitaneva1337
☠Փ₳尸₳Øℋ☠
Bekke
VamPipezc
Апчхииииии
Информация:

Уважаемые гости, пожалуйста зарегистрируйтесь или войдите под своим логином

Рип As-Play.Ru ЗАПРЕЩЕН!
Нарушение прав: Плагиат