ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Информер для модуля видео

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

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

Вообщем создаём информер для модуля онлайн видео(материалы, рейтинг материала или воспроизведения (по убыв.) на ваше усмотрение) количество колонок 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 Августа 2016 Загрузок: 11 Просмотров: 1569 Комментариев: (11)

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

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

Оставь свой отзыв

Комментарии: 11
Kosten
Kosten 05 Августа 2016 18:381
0
Здраво сделан информер под киноленту, в первые такой скрипт вижу.
Scheme
Scheme 05 Августа 2016 18:422
0
По стилям видно что он адаптирован.
tsakonter
tsakonter 05 Августа 2016 18:553
0
Информер можно сделать как материалы, или он отдельно идет?
Angerfist
Angerfist 05 Августа 2016 19:024
0
Делал именно информер, под вид материалов не пробовал так как лень было писать медиа запросы, попробуй) только надо выставить уже проценты на всю ширину и количество колонок уже менять в настройках модуля.
И чтобы при сужении была 1 колонка перебить через !important системные стили
Kosten
Kosten 05 Августа 2016 19:145
0
Да кому нужно тот настроит, так говорю в первые вижу в таком дизайн сделан, чисто под видео.
Angerfist
Angerfist 05 Августа 2016 19:176
0
Экспериментирую от делать нефиг, когда денег на баккарди нет и заняться нечем)))
Kosten
Kosten 05 Августа 2016 19:527
0
Но как видно эксперименты хорошие.
Angerfist
Angerfist 23 Января 2017 06:498
0
лажа полная, я описываюсь) не я писал
Kosten
Kosten 23 Января 2017 13:029
0
Почему полная лажа, как знаю, ты лажу не заливал, не понимаю что случилось, что за не объективность такая, что это тоже сливать, просто не пойму?
Angerfist
Angerfist 23 Января 2017 14:3710
0
не не) удаляй) это детский лепет, все мои ))) стыдно
Kosten
Kosten 23 Января 2017 15:0211
0
Здесь не проблема, могу просто на себя переписать, но удалять то зачем.
avatar