» »

Информер для модуля видео


Решил выкинуть ещё одно своё безобразие на общее обозрение. На этот раз набросал экспериментальный информер для модуля видео, суть которого выводить на главной странице или ещё где нибудь топ материалов по просмотру или комментариям.

Вообщем создаём информер для модуля онлайн видео(материалы, рейтинг материала или воспроизведения (по убыв.) на ваше усмотрение) количество колонок 1!(так как количество колонок устанавливаем классом video-block в процентах). В архиве 3 иконки и фоновая картинка, скачать и залить в корень сайта, прописать пути в коде.

Сразу оговорюсь, делал под информер а не под вид материалов, адаптацию медиа запросов настравивал под 2 колонки и шаблона шириной контента без боковых блоков 600px. Под вид материалов придётся переделывать, так как системная обёртка иная чем в каталоге файлов и статей.

Код на который надо сменить в шаблоне информера:
Код

<div class="video-block">
<div class="img-block" style="background-image: url('/путь к изображению/film.png'), url($SCREEN_URL$);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='$SCREEN_URL$',sizingMethod='scale');">
<span class="video-name">$TITLE$</span>
<span class="rating-video">
<span class="vie-icon"></span><b style="margin: 0;">$READS$</b>
<span class="com-icon"></span><b style="margin: 0 5px 0 0;">$COMMENTS_NUM$</b></span>
<div class="video-shadow">
<span class="zoom-img"><a href="$IMG_URL1$" class="ulightbox">
<img src="/путь к изображению/zoom.png" width="24" height="24" border="0" title="Увеличить" /></a></span>
<div class="video-message"><a href="$ENTRY_URL$"><?substr($MESSAGE$,0,150)?>...</a>
<span class="all-info">$CATEGORY_NAME$ | Рейтинг $RATED$</span>
</div></div></div></div>


Стили информера:
Код

.video-block {
display: block;
width: 48%;  
float: left;
margin: 0.5% 0 0.5% 1%;
border-radius: 3px;  
}
.video-name {
position: absolute;
top: 35px;
margin: 0 15px;
font-size: 16px;
color: #FFFFFF;
text-transform: uppercase;
font-weight: bold;
}
.img-block {
z-index: 1;
border-radius: 3px;
display: block;
position: relative;
margin: 0;
padding-bottom: 65%;
height: 0;
overflow: hidden;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
.zoom-img {
position: absolute;
bottom: 30px;
right: 15px;
}
.video-shadow {
opacity: 0;
position: absolute;
background-color: rgba(0,0,0,0.6);
width: 100%;
height: 100%;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.video-shadow a {
color: #FFFFFF;
}  
.video-shadow:hover {
opacity: 1;
}
.video-message {
display: block;
margin: 35px 15px 0 15px;
font-size: 16px;
}  
.all-info {
position: absolute;
left: 15px;
bottom: 35px;
color: #FFFFFF;
font-size: 14px;
}
.rating-video {
position: absolute;
bottom: 7px;
right: 13px;
background-color: #F5F5F5;
color: #000000;
font-size: 14px;  
-webkit-box-shadow: inset 1px 2px 0px rgba(0,0,0,0.85);
-moz-box-shadow: inset 1px 2px 0px rgba(0,0,0,0.85);
box-shadow: inset 1px 2px 0px rgba(0,0,0,0.85);  
}
.vie-icon {
width: 14px;
height: 12px;
margin: 0 5px 0 5px;
background: url('путь к изображению/view.png')no-repeat;
display: inline-block;
}
.com-icon {
width: 14px;
height: 12px;
margin: 0 5px 0 5px;
background: url('путь к изображению/com.png')no-repeat;
display: inline-block;
}
@media only screen and (max-width: 620px) {
.video-message {
margin: 10px 10px 0 10px;
font-size: 14px;
}  
.rating-video {
bottom: 2px;
right: 7px;
}
.video-name {
top: 15px;
margin: 0 10px;
font-size: 14px;
}
.all-info {
left: 10px;
bottom: 15px;
}
}
@media only screen and (max-width: 480px) {
.video-block {width:99%;}
.video-name {top: 25px;}
.all-info {
left: 10px;
bottom: 20px;
}  
}  


В архиве 3 иконки для информера и фоновая картинка (16.5кб)
При наведении:
05.08.2016 Загрузок: 4 Просмотров: 446 Комментарий: (7)

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

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

Комментарий: 7
Kosten
Kosten 05.08.2016 18:381
0
Здраво сделан информер под киноленту, в первые такой скрипт вижу.
Scheme
Scheme 05.08.2016 18:422
0
По стилям видно что он адаптирован.
tsakonter
tsakonter 05.08.2016 18:553
0
Информер можно сделать как материалы, или он отдельно идет?
Angerfist
Angerfist 05.08.2016 19:024
0
Делал именно информер, под вид материалов не пробовал так как лень было писать медиа запросы, попробуй) только надо выставить уже проценты на всю ширину и количество колонок уже менять в настройках модуля.
И чтобы при сужении была 1 колонка перебить через !important системные стили
Kosten
Kosten 05.08.2016 19:145
0
Да кому нужно тот настроит, так говорю в первые вижу в таком дизайн сделан, чисто под видео.
Angerfist
Angerfist 05.08.2016 19:176
0
Экспериментирую от делать нефиг, когда денег на баккарди нет и заняться нечем)))
Kosten
Kosten 05.08.2016 19:527
0
Но как видно эксперименты хорошие.
avatar