Друзья предлагаю к вашему вниманию, немного доработанный и собранный из разных источников под типа хака для вашего сайта.
Преимущества в том, что он даже не хак а скорее удобство.
Что представляет из себя скрипт:
1. Обложка с левой либо с правой стороны, при этом с описанием на одном уровне.
2. Скриншоты после описания в рамках красивые, и на взгляд приятные.
3. Автоматический плеер, после добавления материала вам не нужно думать откуда достать плеер, он сам выведет.
В таблицу стилей CSS в самый низ добавьте код:
Друзья в коде включено сразу несколько функций такие как и торрент раздача..
Источник: zornet.ru (-SAM-)
Преимущества в том, что он даже не хак а скорее удобство.
Что представляет из себя скрипт:
1. Обложка с левой либо с правой стороны, при этом с описанием на одном уровне.
2. Скриншоты после описания в рамках красивые, и на взгляд приятные.
3. Автоматический плеер, после добавления материала вам не нужно думать откуда достать плеер, он сам выведет.
Код
<?if($SCREEN_URL$)?><!--Постер-->
<div class="view-poster">
<div class="view-poster-img">
<a title="$ENTRY_TITLE$" href="$SCREEN_URL$" class="ulightbox" data-fancybox-group="ulightboxgroup" target="_blank"><img src="$SCREEN_URL$" width="180px" alt="$ENTRY_TITLE$" /></a>
</div>
</div>
<!--/Постер--><?endif?>
<div class="view-message">$MESSAGE$</div>
<?if($IMG_URL1$ || $IMG_URL2$ || $IMG_URL3$ || $IMG_URL4$)?> <hr />
<!--Скрины-->
<div class="step-2">
<div class="step-2-screen"><div class="img-step <?if($IMG_URL1$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL1$" style="background-image: url('<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
<div class="step-2-screen"><div class="img-step <?if($IMG_URL2$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL2$" style="background-image: url('<?if($IMG_SMALL_URL2$)?>$IMG_SMALL_URL2$<?else?>$IMG_URL2$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
<div class="step-2-screen"><div class="img-step <?if($IMG_URL3$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL3$" style="background-image: url('<?if($IMG_SMALL_URL3$)?>$IMG_SMALL_URL3$<?else?>$IMG_URL3$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
<div class="step-2-screen"><div class="img-step <?if($IMG_URL4$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL4$" style="background-image: url('<?if($IMG_SMALL_URL4$)?>$IMG_SMALL_URL4$<?else?>$IMG_URL4$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
</div>
<!--/Скрины-->
<?endif?> <hr />
<center>
<div id="yohoho" data-title="$ENTRY_TITLE$"></div>
<script src="//yohoho.cc/yo.js"></script>
<hr /><?if(substr($FILE_DIRECT_URL$,strrpos($FILE_DIRECT_URL$,'.')+1)='torrent')?>
<!--Кнопка скачать торрент-->
<a href="$FILE_URL$" title="Скачать торрент $ENTRY_TITLE$" class="download_torrent_button" rel="nofollow">
<span class="download_torrent_title">Скачать торрент $ENTRY_TITLE$</span>
<span class="download_torrent_subtitle"><span><b>Размер торрента:</b> $FILE_SIZE$</span><b>Размер раздачи:</b> <?if($RFILE_SIZE$)?>$RFILE_SIZE$<?else?>???<?endif?></span>
<span class="download_torrent_subtitle"><b>Название файла:</b> <?substr($FILE_DIRECT_URL$, strrpos($FILE_DIRECT_URL$,'/') +1)?></span>
</a>
<!--/Кнопка скачать торрент-->
<?endif?></center>
<div class="view-poster">
<div class="view-poster-img">
<a title="$ENTRY_TITLE$" href="$SCREEN_URL$" class="ulightbox" data-fancybox-group="ulightboxgroup" target="_blank"><img src="$SCREEN_URL$" width="180px" alt="$ENTRY_TITLE$" /></a>
</div>
</div>
<!--/Постер--><?endif?>
<div class="view-message">$MESSAGE$</div>
<?if($IMG_URL1$ || $IMG_URL2$ || $IMG_URL3$ || $IMG_URL4$)?> <hr />
<!--Скрины-->
<div class="step-2">
<div class="step-2-screen"><div class="img-step <?if($IMG_URL1$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL1$" style="background-image: url('<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>$IMG_URL1$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
<div class="step-2-screen"><div class="img-step <?if($IMG_URL2$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL2$" style="background-image: url('<?if($IMG_SMALL_URL2$)?>$IMG_SMALL_URL2$<?else?>$IMG_URL2$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
<div class="step-2-screen"><div class="img-step <?if($IMG_URL3$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL3$" style="background-image: url('<?if($IMG_SMALL_URL3$)?>$IMG_SMALL_URL3$<?else?>$IMG_URL3$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
<div class="step-2-screen"><div class="img-step <?if($IMG_URL4$)?>ulightbox" data-fancybox-group="ulightboxgroup" href="$IMG_URL4$" style="background-image: url('<?if($IMG_SMALL_URL4$)?>$IMG_SMALL_URL4$<?else?>$IMG_URL4$<?endif?>')<?else?>noscreen<?endif?>"></div></div>
</div>
<!--/Скрины-->
<?endif?> <hr />
<center>
<div id="yohoho" data-title="$ENTRY_TITLE$"></div>
<script src="//yohoho.cc/yo.js"></script>
<hr /><?if(substr($FILE_DIRECT_URL$,strrpos($FILE_DIRECT_URL$,'.')+1)='torrent')?>
<!--Кнопка скачать торрент-->
<a href="$FILE_URL$" title="Скачать торрент $ENTRY_TITLE$" class="download_torrent_button" rel="nofollow">
<span class="download_torrent_title">Скачать торрент $ENTRY_TITLE$</span>
<span class="download_torrent_subtitle"><span><b>Размер торрента:</b> $FILE_SIZE$</span><b>Размер раздачи:</b> <?if($RFILE_SIZE$)?>$RFILE_SIZE$<?else?>???<?endif?></span>
<span class="download_torrent_subtitle"><b>Название файла:</b> <?substr($FILE_DIRECT_URL$, strrpos($FILE_DIRECT_URL$,'/') +1)?></span>
</a>
<!--/Кнопка скачать торрент-->
<?endif?></center>
В таблицу стилей CSS в самый низ добавьте код:
Код
/* Постер */
.view-poster {margin: 8pt 8px 0pt 8pt; text-align: right; float: right; display: block;}
.view-poster-img {background-color: rgb(220, 220, 220);
text-align: center; vertical-align: middle; border: medium double rgb(105, 105, 105); padding: 5px;}
/* эти стили не задействованы [!] >>>
.step-1 {
background-color: #363636;
font-size: 14px;
color: #FFFFFF;
text-align: left;
overflow: hidden;
}
.step-1 img {opacity:1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
float: left;
width: 150px; height: 255px;
border: 2px solid #696969;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 5px 10px 5px 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.step-1 img:hover {opacity:0.75;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);
filter: alpha(opacity=75);-moz-opacity: 0.75;-khtml-opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
@media only screen and (max-width: 320px) {
.step-1 img {width:100%; height: auto; float:none;}
}
<<< но можно подключить в class [!] */
/*---*/
.view-message {text-align: left; display: block; margin: 5pt 0px 2pt 8pt;}
/* Скрины */
.step-2 {margin: 0 auto;
width: 100%;
border: 1px solid #BEBEBE;
overflow: hidden;
}
.step-2-screen {
display: block;
float: left;
width: 24%;
margin: 0.5%;
}
.img-step {
z-index: 1;
border: 2px solid #696969;
border-radius: 3px;
display: block;
position: relative;
margin: 0;
padding-bottom: 65%;
height: 0;
overflow: hidden;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
.img-step.noscreen {
background-image: url('https://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/noscreenshot.jpg');
}
/*---*/
/*.step-1.ulightbox:hover,*/
.view-poster-img .ulightbox:hover,
.img-step.ulightbox:hover {cursor:zoom-in;cursor:-moz-zoom-in;cursor:-webkit-zoom-in;}
/* Кнопка скачать торрент */
.download_torrent_button {
display: inline-block;
font-family: Arial !important;
font-weight: bold;
text-align: left;
margin: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
max-width: 450px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #05a351 url('https://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/download_icon_v3.png') no-repeat -39px 50%;
border-bottom: 1px solid #008841;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,88,42,0.3);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,88,42,0.3);
box-shadow: 0px 1px 3px 0px rgba(0,88,42,0.3);
color: #FFFFFF !important;
font-size: 14px !important;
padding: 11px 15px 10px 80px;
text-transform: uppercase;
}
.download_torrent_button:hover {
background-color: #05974b;
border-bottom: 1px solid #007b3b;
}
.download_torrent_title {
line-height: 16px;
}
.download_torrent_subtitle {
display: block;
color: #e5feee;
font-size: 11px;
font-family: Arial;
font-weight: normal;
text-transform: uppercase;
line-height: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding: 6px 0 0 0;
}
.download_torrent_subtitle span {float: right; padding-left: 20px;}
.download_torrent_subtitle + .download_torrent_subtitle {padding-top: 2px; font-size: 10px;}
.download_torrent_button, .download_torrent_button:hover {
text-decoration: none !important;
}
.download_torrent_button:hover .download_torrent_title {
text-decoration: underline !important;
}
/*---*/
.view-poster {margin: 8pt 8px 0pt 8pt; text-align: right; float: right; display: block;}
.view-poster-img {background-color: rgb(220, 220, 220);
text-align: center; vertical-align: middle; border: medium double rgb(105, 105, 105); padding: 5px;}
/* эти стили не задействованы [!] >>>
.step-1 {
background-color: #363636;
font-size: 14px;
color: #FFFFFF;
text-align: left;
overflow: hidden;
}
.step-1 img {opacity:1;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
float: left;
width: 150px; height: 255px;
border: 2px solid #696969;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 5px 10px 5px 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.step-1 img:hover {opacity:0.75;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);
filter: alpha(opacity=75);-moz-opacity: 0.75;-khtml-opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
@media only screen and (max-width: 320px) {
.step-1 img {width:100%; height: auto; float:none;}
}
<<< но можно подключить в class [!] */
/*---*/
.view-message {text-align: left; display: block; margin: 5pt 0px 2pt 8pt;}
/* Скрины */
.step-2 {margin: 0 auto;
width: 100%;
border: 1px solid #BEBEBE;
overflow: hidden;
}
.step-2-screen {
display: block;
float: left;
width: 24%;
margin: 0.5%;
}
.img-step {
z-index: 1;
border: 2px solid #696969;
border-radius: 3px;
display: block;
position: relative;
margin: 0;
padding-bottom: 65%;
height: 0;
overflow: hidden;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
.img-step.noscreen {
background-image: url('https://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/noscreenshot.jpg');
}
/*---*/
/*.step-1.ulightbox:hover,*/
.view-poster-img .ulightbox:hover,
.img-step.ulightbox:hover {cursor:zoom-in;cursor:-moz-zoom-in;cursor:-webkit-zoom-in;}
/* Кнопка скачать торрент */
.download_torrent_button {
display: inline-block;
font-family: Arial !important;
font-weight: bold;
text-align: left;
margin: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
max-width: 450px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #05a351 url('https://zornet.ru/CSS-ZORNET/Kodak_saita/asvetun/vesan-kigedsab/download_icon_v3.png') no-repeat -39px 50%;
border-bottom: 1px solid #008841;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,88,42,0.3);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,88,42,0.3);
box-shadow: 0px 1px 3px 0px rgba(0,88,42,0.3);
color: #FFFFFF !important;
font-size: 14px !important;
padding: 11px 15px 10px 80px;
text-transform: uppercase;
}
.download_torrent_button:hover {
background-color: #05974b;
border-bottom: 1px solid #007b3b;
}
.download_torrent_title {
line-height: 16px;
}
.download_torrent_subtitle {
display: block;
color: #e5feee;
font-size: 11px;
font-family: Arial;
font-weight: normal;
text-transform: uppercase;
line-height: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
padding: 6px 0 0 0;
}
.download_torrent_subtitle span {float: right; padding-left: 20px;}
.download_torrent_subtitle + .download_torrent_subtitle {padding-top: 2px; font-size: 10px;}
.download_torrent_button, .download_torrent_button:hover {
text-decoration: none !important;
}
.download_torrent_button:hover .download_torrent_title {
text-decoration: underline !important;
}
/*---*/
Друзья в коде включено сразу несколько функций такие как и торрент раздача..
Источник: zornet.ru (-SAM-)
Ctrl
Enter
Заметили ошЫбку
Выделите текст и нажмите Ctrl+EnterКомментарии (0)
Добавить