Skip to content

Компонент bitrix:catalog.section.list превращаем в горизонтальную ленту времени со скроллингом

Делала я сайт музея истории в Белгородском государственном университете.

Логика сайта университетская, а внешний вид изменён. Есть первая страница — разделы как кнопки на киосках и страницы второго уровня, двухколоночный макет и весь контент по середине:

Доступен по адресу: http://history.bsu.edu.ru/history/

И есть тут на странице «Летопись университета» интересная фишка такая — хронология в виде ленты времени:

Делалось под компонент bitrix:catalog.section.list, скрипт превращения скролла в блоке, угощаю кодом шаблона компонента, скрипт mousewheel и jscrollpane найдётё в интернете:

<?if(!defined(«B_PROLOG_INCLUDED») || B_PROLOG_INCLUDED!==true)die();?>

<script src=»jquery-1.6.1.min.js» type=»text/javascript»></script>
<script src=»jquery.mousewheel3.js» type=»text/javascript»></script>
<script src=»jquery.jscrollpane.js» type=»text/javascript»></script>
<link href=»jquery.jscrollpane.css» rel=»stylesheet» type=»text/css» />

<style type=»text/css»>
.scroll{
padding:10px;
width:600px;
height:350px;
overflow-x:scroll;
overflow-y:hidden;
}
.scroll_child{
width:99999px;
}
.scroll_child > div{
float:left;
width:200px;
text-align:center;
}
</style>

<script type=»text/javascript»>
$(document).ready(function(){
var quqntity=$(«.scroll_child div»).size();
var widthScroll=0;
for (i=0;i<quqntity;i++){
widthScroll+=$(«.scroll_child div:eq(«+i+»)»).width();
}
$(«.scroll_child»).width(widthScroll);
});
</script>

<script type=»text/javascript»>
jQuery(function()
{
jQuery(‘.scroll’).jScrollPane();
});
</script>

<h2>Лента времени</h2>

<?if(strpos($_SERVER[‘HTTP_USER_AGENT’],’MSIE’)!==false || strpos($_SERVER[‘HTTP_USER_AGENT’],’Trident’)!==false || strpos($_SERVER[‘HTTP_USER_AGENT’],’rv:11.0′)!==false):?>

<style type=»text/css»>
.scroll{
padding:10px;
width:600px;
height:100%;
display:block;
clear:both;
}
.scroll_child{display:block; clear:both;}
.scroll_child > div{float:none; display:block; clear:both; text-align:center;}
.jspHorizontalBar {visibility:hidden;}
</style>

<?endif?>

<div class=»scroll» style=»padding-top:40px;»>
<?
$CURRENT_DEPTH=$arResult[«SECTION»][«DEPTH_LEVEL»]+1;
foreach($arResult[«SECTIONS»] as $arSection):
$CURRENT_DEPTH = $arSection[«DEPTH_LEVEL»];
?>
<div class=»scroll_child»>
<div>
<div style=»font-size:1.4em;»>
<a href=»<?=$arSection[«SECTION_PAGE_URL»]?>»><?=$arSection[«NAME»]?></a>
</div>
<div style=»padding:5px;»>
<a href=»<?=$arSection[«SECTION_PAGE_URL»]?>» title=»Подробнее»><img src=»<?=$arSection[«PICTURE»][«SRC»]?>» height=»<?=$arSection[«PICTURE»][«HEIGHT»]?>» width=»<?=$arSection[«PICTURE»][«WIDTH»]?>» alt=»Подробнее» border=»0″ /></a>
<p style=»padding:5px; font-size:smaller;><a href=»<?=$arSection[«SECTION_PAGE_URL»]?>» title=»Подробнее»><?=$arSection[«DESCRIPTION»]?></a></p><br>
</div>
</div>
</div>
<?endforeach?>
</div>

Ещё мне очень понравился компонент от компании СевенПро, я его немного допилила для страницы «детально» — очень классный, ребята постарались сделать его даптивным и в разных цветовых гаммах. Рекомендую установить с маркетплейса: «Временная шкала для новостей, статей, отзывов, работ портфолио»

Published in1С-БитриксВёрстка в БитриксКоды и костылиСкрипты и доработкиСторонние решенияШаблоны компонентов