Главная / Каталог скриптов для uCoz / Информеры, Вид материалов

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

Добавлено 30-12-2018 в 00:05

Категория Информеры, Вид материалов
Авторwaak
Просмотры1149
Комментарии0
Понравилось12
Скачиваний43

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

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

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

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

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

Установка

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

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

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

Количество материалов: по суте тоже как вам хочется к примеру 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>

код для размещения

Код

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

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

Код

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

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

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

Скачать файлы материала

43 загрузок 9.4 Kb Скачать

Скачивание файлов без ограничений доступно только зарегистрированным пользователям.

ВОЙТИ РЕГИСТРАЦИЯ

Оставить комментарий

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

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

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

pa patali2k

Спасибо большое!

06-06-2025 в 05:58 материал

waak

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

Код

У вас $NUM_ENTRIES$ заклад<?if($NUM_ENTRIES$%10=0||$NUM_ENTRIES$%10>4||$NUM_ENTRIES$%100>10&&$NUM_ENTRIES$%100<15)?>ок<?else?><?if($NUM_ENTRIES$%10=1)?>ка<?else?>ки<?endif?><?endif?>

05-06-2025 в 22:07 материал

pa patali2k

Добрый день! Waak подскажи как вы сделали У вас N закладок, у меня выходит 1-5 например, так если можете подскажите как вывести кол.во закладок пользователя например в мини профиль, чтоб кол.во закладок показывало на любой странице

04-06-2025 в 16:51 материал

pa patali2k

Добрый день!
Сегодня снова попробовал установить скрипт и он снова не заработал, все перерыл, изменял, убирал и никак не заводился.
Решение: В общих настройках сайта нужно переключить Версия библиотеки jQuery: на jquery-1.12.4.min.js
В общем теперь просьба, не могли бы переписать скрипт закладок под jquery-3.6.0.min.js