» »

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

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

Всем привет!
Некоторое время назад на фору один из пользователей попросил помощь по созданию подобного вида материалов для своего сайта и конечно же я не смог пройти мимо его просьбы но так как в тот момент у меня были свои дела я не мог ему помочь но это не значит что его просьба осталась без внимание и вот как только появилась минутка я решил выполнить его просьбу
В примере что предоставил нам человек вид материалов работал на js я же решил отказаться от этого и сделал на css с начало я не хотел выкладывать данный вид бесплатно но после нескольких минут раздумий всё таки решил выложить бесплатно вобщем хватит разговоров давайте приступим к установке

Для начало пару скриншотов того что мы получим после установки

Полная версия вида материалов на сайте


Вид эффекта при наведении на картинку объявления

как вы можете заметить что в обычном режиме есть только картинка название цена и дата объявления но если мы наведём на фото нашего объявления то появится на экране новый блок в котором мы уже увидим вместо картинки слайдер и к нашему объявлению добавится описание также этот блок фиксированный

Мобильный вид


в мобильном виде при наведение на картинку блок появляться не будет
теперь пора уже приступить к установке

Установка

В первую очередь подключим библиотеку jquery перед /head на всех страницах модуля доска объявлений кроме страницы материала и страницы добавления
Код
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

если она у вас уже подключена просто пропустите этот шаг

Теперь подключим скрипты для работы слайдера их мы также добавляем на все страницы модуля но уже перед тегом /body
Код

<link href="//boba.ucoz.com/owl-carousel/owl.carousel.css" rel="stylesheet">
  <link href="//boba.ucoz.com/owl-carousel/owl.theme.css" rel="stylesheet">
  <script src="//boba.ucoz.com/owl-carousel/owl.carousel.min.js"></script>

для корректной работы советую перезолить скрипты выше на свой сайт в файловый менеджер

теперь перейдём в панель управления - дизайн - управление дизайном - доска объявлений - вид материалов и заменим весь код на код ниже
Код
<script>
  $(document).ready(function() {
  $("#owl-demo$ID$").owlCarousel({
  autoPlay: 2000, //Set AutoPlay to 3 seconds
  items : 1,
  loop:true,
  stopOnHover : true,
  navigation : true,
  navigationText : true,
  itemsDesktop : [1199,1],
  itemsDesktopSmall : [979,1],
  itemsTablet : [768,1],
  itemsTabletSmall : [568,1],
  itemsMobile : [479,1],
  });
  });
  </script>

<div id="bc_wid_ob_g">

  <div id="bc_wid_ob_ggg">
  <div id="bc_wid_ob_img">
  <div id="bc_wid_ob_f"><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>
  <center><?if($IMG_URL1$)?> <img src="$IMG_URL1$"><?else?><img src="ССЫЛКА НА КАРТИНКУ ЕСЛИ НЕТ ФОТО"><?endif?></center>
  </div>

<div id="bc_wid_ob_g" class="dop_wid_m">

  <div id="owl-demo$ID$">
  <?if($IMG_URL1$)?> <div class="item"><center><img src="$IMG_URL1$"></center> </div><?else?><div class="item"><center><img src="ССЫЛКА НА КАРТИНКУ ЕСЛИ НЕТ ФОТО"></center> </div><?endif?>
  <?if($IMG_URL2$)?> <div class="item"><center><img src="$IMG_URL2$"></center> </div><?endif?>
  <?if($IMG_URL3$)?> <div class="item"><center><img src="$IMG_URL3$"></center></div><?endif?>
  <?if($IMG_URL4$)?> <div class="item"><center><img src="$IMG_URL4$"></center> </div><?endif?>
  <?if($IMG_URL5$)?> <div class="item"><center><img src="$IMG_URL5$"></center> </div><?endif?>
  <?if($IMG_URL6$)?> <div class="item"><center><img src="$IMG_URL6$"></center> </div><?endif?>

  </div>
  <div id="bc_wid_ob_inf">
  <div id="bc_wid_ob_name">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>
  <div id="bc_wid_ob_cat"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <a href="">ТУТ ОПЕРАТОР ПОЛЯ ИЛИ ФИЛЬТРА ДЛЯ ОТОБРАЖЕНИЯ ГОРОДА</a></div>
  <div id="bc_wid_ob_text">
  $MESSAGE$
  </div>
  <div id="bc_wid_ob_cena">ТУТ ОПЕРАТОР ПОЛЯ ЦЕНЫ <i class="fa fa-rub" aria-hidden="true"></i></div>
  <div id="bc_wid_ob_data"><i class="fa fa-clock-o" aria-hidden="true"></i> $DATE$ в $TIME$</div>
  </div>
  <div id="clr"></div>
</div>
</div>
  <div id="bc_wid_ob_inf">
  <div id="bc_wid_ob_name">
  <a href="$ENTRY_URL$">$TITLE$</a>
  </div>
  <div id="bc_wid_ob_cat"><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a> <a href="">ТУТ ОПЕРАТОР ПОЛЯ ИЛИ ФИЛЬТРА ДЛЯ ОТОБРАЖЕНИЯ ГОРОДА</a></div>
  <div id="bc_wid_ob_cena">ТУТ ОПЕРАТОР ПОЛЯ ЦЕНЫ<i class="fa fa-rub" aria-hidden="true"></i></div>
  <div id="bc_wid_ob_data"><i class="fa fa-clock-o" aria-hidden="true"></i> $DATE$ в $TIME$</div>
  </div>
  <div id="clr"></div>
</div>


Важно замените в скрипте текст

ТУТ ОПЕРАТОР ПОЛЯ ИЛИ ФИЛЬТРА ДЛЯ ОТОБРАЖЕНИЯ ГОРОДАв двух местах на соответствующие операторы
ТУТ ОПЕРАТОР ПОЛЯ ЦЕНЫ в двух местах на соответствующие операторы

теперь подключим стили в таблицу стилей в самый конец

Код

#bc_wid_ob_g {
  background: #FFF;
  width: 100%;
  margin: 10px 0;
  padding: 10px 0px;
}

#bc_wid_ob_img {
  margin: 10px;
  width: 200px;
  max-height: 170px;
  overflow: hidden;
  position: relative;
  float: left;
}

#owl-demo$ID$ {
  margin: 10px;
  width: 200px!important;
  max-height: 170px;
  overflow: hidden;
  position: relative;
  float: left;
}
.owl-pagination {
  position: absolute;
  top: 0;
  z-index: 99999999;
}

#bc_wid_ob_f {
  background: rgba(0,0,0,.7);
  color: #FFF;
  padding: 4px 10px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

#bc_wid_ob_img img {
  max-width: 200px;
  max-height: 170px;
  height: auto;
  object-fit: cover;
}

#bc_wid_ob_inf {
  margin-left: 225px;
  padding-right: 20px;
  overflow: hidden;
}
#bc_wid_ob_name a {
  font-size: 16px;
  font-weight: 600;
  display: block;
  padding: 7px 0px;
}

#bc_wid_ob_cat a {
  font-size: 12px;
  color: 434343;
  font-weight: 600;
  margin-right: 10px;
}
#bc_wid_ob_cat a:hover {color: #4D8EB6;}

#bc_wid_ob_text {
  padding: 10px 0px;
}

#bc_wid_ob_cena {
  font-size: 20px;
  color: #E40008;
  margin: 10px 0px;
}

#bc_wid_ob_data {
  font-size: 12px;
  color: #999;
}

.dop_wid_m {display: none;}
#bc_wid_ob_ggg:hover .dop_wid_m {
  display: table;
  position: fixed;
  margin: auto;
  top: 50%;
  margin-top: -150px;
  max-width: 700px;
  background: #FFF;
  z-index: 1000;
   
  box-shadow: 0 0 15px rgba(0,0,0,.6);
}
  .owl-next, .owl-prev {display: none!important;}
  #clr {
  clear: both;

}
  @media screen and (max-width: 600px) {
  #bc_wid_ob_ggg, #bc_wid_ob_img {float: none;width: 100%;}
  #bc_wid_ob_inf {margin: 10px 20px;}
  .dop_wid_m {display: none!important;}
  #bc_wid_ob_img, #bc_wid_ob_img img {width: 100%;height: auto;}
}


ну и последний шаг это шрифт иконки добавте также в таблицу стилей но только в самый верх

Код
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

если иконки у вас уже подключены то вам этого делать не нужно

Да ещё не мало важная вещь я сделал отображения 6 картинок в скрипте то есть если их будет больше чем 6 то показываться будут только шесть я это сделал для того что обычно пользователи загружают не больше 3 - 4 но вдруг кто то всё же добавит шест или 5

ДЕМО если дема по данной ссылки больше нет то не переживайте скрипт от этого работать не перестанет просто я мог удалить данный вид материалов со своего сайта
05.02.2017 Просмотров: 1427 Комментарий: (43)

Поделиться в социальных сетях

Материал разместил

Комментарий: 43
trem200
trem200 05.02.2017 22:031
0
Круто смотрится
Kosten
Kosten 05.02.2017 22:032
0
Для интернет магазина также отлично подойдет, хотя под него и сделано.
waak
waak 05.02.2017 22:073
0
Подойти может но сделан для доски объявлений
Сопрано
Сопрано 05.02.2017 22:134
0
Не чего так смотрится.
Nikas
Nikas 05.02.2017 22:365
-1
да что за шлак? щас все в Flat делают
waak
waak 05.02.2017 22:456
+2
Вы как всегда верны себе! если вам кажется что это шлак и он не достоин был публиковаться то я хочу пояснить вам что этот скрипт написан по просьбе пользователя а значит ему нравится такой вариант если вас что то не устраивает это ваше право можете предложить лучше так сделайте это а просто обгадить словесно работу может каждый мол всё это говно и кому оно нужно
Nikas
Nikas 05.02.2017 22:488
0
вариант 2008 года тогда goog+
само собой бесплатно! я бы постедился за это деньги брать
waak
waak 05.02.2017 23:019
0
Судя по вашему сайту в профили вы не далеко ушли
Nikas
Nikas 05.02.2017 23:2911
0
эт не мое
Kosten
Kosten 05.02.2017 22:467
+1
Вообще в интернет ресурсах по продаже не волоку, так дизайн понятен, для меня это главное.
Kosten
Kosten 05.02.2017 23:2410
0
Nikas, мы же цивилизованные люди, и не думаю что нужно переходить на фраерский язык, но не нравится, это ваше мнение, но здесь можно как то по другому дать понять.
waak
waak 05.02.2017 23:3512
0
Здесь вобще не нужно нечего давать понять так как материал написан для конкретного человека а выложен в публикацию для тех кому ещё понадобится или понравится и негде не написано дайте свою оценку а самое главное это писать что вид с 2008 и по этому шлак так не кто же не мешает вам переделать его под 2017 тем болея когда всё готова и вам остаётся только немного его отредактировать
avatar
perepelin 06.02.2017 17:1013
0
Спасибо!!!
попробовал, красиво но возник вопрос по добавлению написал ниже
avatar
perepelin 06.02.2017 17:3314
0
а еще вопрос, а можно этот скрипт как то объединить с вариантом как здесь http://game-im02.ru/board/
если нужен код скрипта который на сайте, то могу предоставить
и как в вашем варианте задать отображение цены?
Kosten
Kosten 06.02.2017 17:4515
0
perepelin, здесь у автора нужно спрашивать.
1 2 3 »
avatar