Извините за долгое ожидаение.
Такой слайдер можно подключить к шаблону "Пластик" следующим образом.
Создать резервную копию шаблона.
В раздел Редактор шаблонов добавить все файлы из архива
SkitterSlideshow.zip 287,07К
177 Количество загрузок:
Теперь нужно изменить файл HTML.
Код:
<script type="text/javascript" src="{FORALL_JS_PATH}jquery-1.4.2_nyroModal-1.6.2_validate_capslock_jquery-ui-1.8.4.custom_fancybox-1.3.4.version2.min.js"></script>
Заменить:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="{FORALL_JS_PATH}jquery.nyroModal-1.6.2.min.js"></script>
<script type="text/javascript" src="{FORALL_JS_PATH}jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="{FORALL_JS_PATH}jquery.validate.min.js"></script>
<script type="text/javascript" src="{FORALL_JS_PATH}jquery.capslock.min.js"></script>
<script type="text/javascript" src="{FORALL_STYLES_PATH}fancybox/2.1.4/jquery.fancybox.pack.js"></script>
<!-- Skitter Styles -->
<link href="{ASSETS_STYLES_PATH}skitter.styles.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" language="javascript" src="{ASSETS_JS_PATH}jquery.easing.1.3.js"></script>
<script type="text/javascript" language="javascript" src="{ASSETS_JS_PATH}jquery.skitter.js"></script>
Теперь пропишем вывод слайдера на верхней части главной страницы.
До код:
{BODY}
Добавить:
% IF index_page %}
<!-- Init Skitter -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('.box_skitter_large').skitter({
theme: 'clean',
numbers_align: 'center',
progressbar: true,
dots: true,
preview: true
});
});
</script>
<div id="page">
<div id="content2">
<div class="border_box">
<div class="box_skitter box_skitter_large">
<ul>
<li><a href="#cube"><img src="{ASSETS_IMAGES_PATH}001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
<li><a href="#cubeRandom"><img src="{ASSETS_IMAGES_PATH}002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li>
<li><a href="#block"><img src="{ASSETS_IMAGES_PATH}003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li>
<li><a href="#cubeStop"><img src="{ASSETS_IMAGES_PATH}004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li>
</ul>
</div>
</div>
</div>
</div>
{%ENDIF%}
тут же можно добавлять или изменять сами изображения. Например можно добавить лишний код:
<li><a href="#cube"><img src="{ASSETS_IMAGES_PATH}001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li>
001.jpg - название изображения.
{ASSETS_IMAGES_PATH} - переменная пути.
После внесения изменений рекомендую очистить кеш браузера.
3
