форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
30-12-2018 в 00:05 248

Вид материалов для информера популярных треков


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

Пример вида информера



Ну и конечно сразу видео демка



Теперь если вам всё таки он понравился и вы хоте его себе то приступим к его установки

Установка



В первую очередь мы с вами создадим информер с такими параметрами
Раздел: тот модуль что вы используете к примеру Каталог файлов

Тип данных: Материалы

Способ сортировки: тут как вам хочется по рейтингу или по просмотрам может по скачиванию решайте сами

Количество материалов: по суте тоже как вам хочется к примеру 10

Количество колонок: 1

Материалы за текущий период: можно не трогать

Отлично теперь жмём кнопку создать

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

Код

<div class="vidmusicwaakbc">
  <div class="vidmusicwaakcont">
  <a href="тут ссылка или код для вызова плеера">
  <div class="vidmusicwaakbcob"><img src="$IMG_URL1$"></div>
  <div class="vidmusicwaakbcava"><img src="$IMG_URL2$"></div>
  </a>
  <div class="vidmusicwaakbctext">
  <a href="$ENTRY_URL$"><h1>$TITLE$</h1></a>
  <span>$OTHER1$</span>
  </div>
  <div class="vidmusicwaakbcfoot">
  <span>$NUMBER$</span>
  <p>
  $READS$ просмотров<br>
  $RATED$ голосов  
  </p>
  </div>
   
  </div>
</div>

подробнее о коде выше!

Цитата

$IMG_URL1$ - картинка обложки квадратная
$IMG_URL1$ - картинка с фотографией исполнителя
$TITLE$ - название трека
$OTHER1$ - вывод имени исполнителя или название группы тут можно ссылкой в поле добавлять что бы к примеру сделать поиск по исполнителям будет удобно на мой взгляд
$NUMBER$ - порядковый номер
$READS$ - просмотров
$RATED$ - голосов

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

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

Код

  .vidmusicwaakbc a {
  text-decoration: none;
  font-size: 15px;
  }
  .vidmusicwaakcont {
  position: relative;
  background: radial-gradient(at top, #01A6F5, #002C67);
  color: #FFF;
  width: auto;
  height: 210px;
  margin:10px 5px;
  }
  .vidmusicwaakbcob {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 5px;
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 20px;
  cursor: pointer;
  }
  .vidmusicwaakbcob img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  }

  .vidmusicwaakbcob::after {
  background-color: rgba(0, 0, 0, .8);
  font: normal normal normal 20px/1 FontAwesome;
  content: "\f04b";
  text-align: center;
  line-height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  opacity: 0;
  transition: 1s;
  color: #ffdb4d;
  }
  .vidmusicwaakcont:hover .vidmusicwaakbcob::after {opacity: 1;}

  .vidmusicwaakbcava {
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 75px;
  }
  .vidmusicwaakbcava img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  }
  .vidmusicwaakbctext {
  position: relative;
  top: 90px;
  font-size: 15px;
  color: rgba(255,255,255,.7);
  padding: 0 20px;
  text-transform: uppercase;
  }
  .vidmusicwaakbctext h1 {
  font-size: 15px;
  font-weight: 300;
  color: #FFF;

  }
  .vidmusicwaakbctext h1:hover {
  font-size: 15px;
  font-weight: 300;
  color: #ffdb4d;
  }
  .vidmusicwaakbctext span a {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,.7);
  }
  .vidmusicwaakbctext span a:hover {
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,1);
  }

  .owl-pagination {
  display: none;
  }
  .owl-theme .owl-controls .owl-buttons div {
  width: 50px;
  height: 50px;
  background: #FFF;
  position: absolute;
  top: 50%;
  border-radius: 50%;
  margin-top: -25px;
}

.owl-prev {left: -25px;}
.owl-next {right: -25px;}

.owl-prev:before, .owl-next:before {
  font: normal normal normal 20px/1 FontAwesome;
  content: "\f060";
  text-align: center;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  transition: 1s;
  color: #000;
   
}
.owl-next:before {
  content: "\f061";
}
.owl-theme .owl-controls {
  margin-top: 0;
}

.vidmusicwaakbcfoot {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 5px 20px;
}
.vidmusicwaakbcfoot span {
  float: left;
  font-size: 28px;
  display: inline-block;
  border-right: 1px solid rgba(255,255,255,.5);
  padding: 0 10px;
  text-align: center;

}
.vidmusicwaakbcfoot p {
  display: inline-block;
  padding: 5px 15px;
  font-size: 13px;
  line-height: 20px;
}

Отлично не забываем сохранить!

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

Код

<div id="owl-example" class="musikinfbywaak">  
$MYINF_ТУТ НОМЕР ВАШЕГО ИНФОРМЕРА$
</div>

ОБРАТИТЕ ВНИМАНИЕ НА ВОТ ЭТУ СТРОЧКУ

Цитата
$MYINF_ТУТ НОМЕР ВАШЕГО ИНФОРМЕРА$

В ней вам нудно в место слов ТУТ НОМЕР ВАШЕГО ИНФОРМЕРА указать номер вашего информера тот что вы создали в самом начале

Отлично самое простое мы сделали теперь нам нужно подключить скрипты для работы слайдера
в данном скрипте я использую код слайдера owl.carousel если он у вас уже подключен то второй раз вам этого делать не нужно!!!

Для тех у кого он не подключён качаем архив и загружаем все файлы в папки с тем же названием что и в архиве

Затем на странице где мы поставили код вывода информера добавим несколько строк перед закрывающим тегом
Код
</head>
код для размещения

Код

<link rel="stylesheet" href="css/owl.carousel.css">  
<link rel="stylesheet" href="css/owl.theme.css">  
  <script src="js/owl.carousel.js"></script>  

<script>  
$(document).ready(function(){  
$('.musikinfbywaak').owlCarousel({  
items:4,  
loop:true,  
navigation : true,  
navigationText : true,  
autoPlay: 5000,  
stopOnHover : true,  
itemsDesktop : [1199,3],  
itemsDesktopSmall : [979,3],  
itemsTablet : [768,2],  
itemsTabletSmall : [568,2],  
itemsMobile : [479,1],  
})  
});  
</script>

Отлично не забываем сохранить!

Теперь подключим иконки от font-awesome если они у вас ещё не подключены то просто добавьте в свою таблицу стилей в самый верх вот эту строчку

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

Отлично не забываем сохранить!

Осталось почистить кеш в браузере это можно сделать комбинацией клавиш Ctrl + f5 Если возникнут вопросы пишите их в комментариях


Комментарии

Комментариев пока нет!
Добавлять комментарии могут только зарегистрированные пользователи.

[ Регистрация | Вход ]

Автор


Похожие материалы

Реклама



Дополнение

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

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru