prowebber.cc - Тут есть все для настоящих вебмастеров

Провеббер » Всё для uCoz » uCoz хаки » Отображение картинок плиткой как в VK для uCoz

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?

Обращайся к нам в ЛС группы Вконтакте.

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

Автор: Mp3Live 2018-5-27 Всё для uCoz / uCoz хаки

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

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

Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных

-6

Просмотры: 2 129 :: Комментарии (0) :: :: Нужна помощь? Задайте вопрос на форуме ::

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей