1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
Для добавления необходима авторизация
Ваша корзина
Ваша корзина пуста
Зона обмена Вид материалов для доски объявлений

Автор
waak
написать автору
пожаловаться
ID материала № 39
Авторwaak
CMSuCoz
Просмотров 732
Добавлено 27.01.2018
Комментариев 4

Вид материалов для доски объявлений

Здравствуйте сегодня поделюсь с вами очередным видом материалов для досок объявлений
спонсор данного вида материалов Алексей Лоскутов который внёс денежный взнос для написания данного вида за что ему отдельное спасибо!

Вид в полной версии



Вид в мобильных устройствах



Демо можно посмотреть тут

Установка

В вид материалов модуля
Код
<div class="wid_waak_bc " style="position: relative;">
  <div class="wid_waak_bc_img">
  <div class="img_num"><i class="fa fa-camera" aria-hidden="true"></i>  
   
  <?if($IMG_URL6$)?> 6 <?else?>  
  <?if($IMG_URL5$)?> 5 <?else?>  
  <?if($IMG_URL4$)?> 4 <?else?>  
  <?if($IMG_URL3$)?>3 <?else?>  
  <?if($IMG_URL2$)?> 2 <?else?>  
  <?if($IMG_URL1$)?> 1 <?else?>  
   
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
  <?endif?>  
   
   
   
  </div>
  <a href="$ENTRY_URL$"><center><img src="$IMG_URL1$"></center></a>
  </div>
  <div class="wid_waak_bc_text" >
   
  <div style="float:right;">$MODER_PANEL$</div>
  <div class="wid_waak_bc_text_name"><a href="$ENTRY_URL$">$TITLE$</a></div>
  <div class="wid_waak_bc_text_cena">$OTHER1$</div>
  <div class="wid_waak_bc_text_cat">$CATEGORY_NAME$</div>
  <div class="wid_waak_bc_text_item">
  <span><i class="fa fa-calendar" aria-hidden="true"></i> $DATE$ в $TIME$</span>
  <span><i class="fa fa-eye" aria-hidden="true"></i> $READS$</span>
  </div>
   
  </div>
  <div id="clr"></div>
</div>


$OTHER1$ - Оператор выводит цену можно заменить на свой

В таблицу стилей
Код


.wid_waak_bc {
  width: 100%;
  background: #FFF;
  margin: 20px 0;
  overflow: hidden;
  height: 190px;
  transition:1s;
}
.wid_waak_bc_img {
  width: 30%;
  height: 190px;
  float: left;
  overflow: hidden;
  position: relative;
  background: #FDA649;
   
  transition:1s;
}

.img_num {
  position: absolute;
  z-index: 2;
  color: #FFF;
  font-size: 13px;
  background: rgba(0,0,0,.6);
  padding: 4px 10px;
  bottom: 10px;
  left: 10px;
}
.wid_waak_bc_img img {
  height: 190px;
  width: 100%;
  object-fit: cover;
  transition:1s;
}
.wid_waak_bc_img img:hover {
  margin-left: -30px;
}
.wid_waak_bc_text {
  width: 70%;
  margin-left: 30%;
  padding: 20px;
  transition:1s;
}

.wid_waak_bc_text_name a {
  font-size: 24px;
  font-weight: bold;
  display: block;
  transition:1s;
}

.wid_waak_bc_text_cena {
  font-size: 24px;
  font-weight: bold;
  color: #517EAE;
  padding: 10px 0;
  transition:1s;
}

.wid_waak_bc_text_cat {
  font-size: 16px;
  color: #878787;
}

.wid_waak_bc_text_item {
  padding: 15px 0;
  color: #B5B5B5;
}
.wid_waak_bc_text_item span{
  margin-right: 15px;
}

@media screen and (max-width: 700px) {
  .wid_waak_bc_img {width: 120px;}
  .wid_waak_bc_img img {height: 100px;}
  .wid_waak_bc_text {width: auto;margin-left: 120px;padding: 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 100px;}
  .wid_waak_bc_text_name a {font-size: 16px;}
  .wid_waak_bc_text_cena {font-size: 16px;}
  .wid_waak_bc_text_cat {display: none;}
  .wid_waak_bc_text_item {padding: 0px}
  .img_num {font-size: 10px}
}

@media screen and (max-width: 500px) {
  .wid_waak_bc_img {width: 100px;}
  .wid_waak_bc_img img {height: 90px;}
  .wid_waak_bc_text {width: auto;margin-left: 100px;padding: 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 90px;}
  .wid_waak_bc_text_name a {font-size: 16px;}
  .wid_waak_bc_text_cena {font-size: 16px;padding: 3px 0;}
   
}

@media screen and (max-width: 350px) {
  .wid_waak_bc_img {width: 90px;}
  .wid_waak_bc_img img {height: 70px;}
  .wid_waak_bc_text {width: auto;margin-left: 90px;padding: 5px 10px;}
  .wid_waak_bc, .wid_waak_bc_img {height: 70px;}
  .wid_waak_bc_text_name a {font-size: 12px;}
  .wid_waak_bc_text_cena {font-size: 12px;padding: 2px 0;}
  .wid_waak_bc_text_item {padding: 0px;font-size: 10px;}
   
}




Так же нам нужно будет подключить шрифтовые иконки если они ещё не подключены
в самый верх таблицы стилей
Код
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css');


Сохраняем чистим кеш браузера и готово!
4 7
Вимание:
При копирование материалов. указание автора материала и наличие в теле копируемого (перерабатываемого) материала активной ссылки на сайт talantlev.ucoz.ru обязательно!
Уважайте чужой труд!
Алексеевна
11.01.2019 в 12:47
Waak, день добрый.
Огромное желание установить себе такой вид материалов!
Но, столкнулась с проблемой.
При установке скрипта фотографии отображаются очень большие, почти во всю страницу, и не видно заголовок, количество фотографий, адрес и стоимость объекта.

Когда заходишь в объявлений хотелось бы видеть уменьшенную версию фотографий,почти как миниатюры, а нажав на саму фотографию, что- бы она увеличивалась.
Хотелось бы сделать так, что- бы, когда заходишь в само объявление, объект отображался на карте. И можно было сделать поиск объектов на главной в категории, не на главной странице, а именно в категории. Я как понимаю, необходимо в ручную добавлять адрес объекта, при создании объявления, для этого необходимо создать отдельное поле, которое будет взаимодействовать с картой.
Если необходимо, для ответа на мой вопрос, вот сайт neagent.my1.ru
0
waak
11.01.2019 в 21:11
Это вид материалов а не страница материала и что бы вам помочь нужно ссылку на сайт где стоит данный вид материалов что бы определить и исправить проблему а по поводу остального то это отдельно нужно разрабатывать
trem200
17.02.2018 в 16:15
Спасибо за вид материала, отличный вид материала.
2
waak
17.02.2018 в 16:53
Не за что!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Гость
Для добавления необходима авторизация