Webasyst, слайдер Nivo Slider

2 августа 2019

Вот простой рецепт, как в Webasyst подключить слайдер Nivo Slider. Подойдет даже для сайтов, которые размещаются в облаке Webasyst

Для начала СКАЧАТЬ АРХИВ

В приложении Сайт / Файл-менеджер создать папку nsl

Загрузить в нее все файлы из архива (jquery.nivo.slider.js, jquery.nivo.slider.pack.js, nivo-slider.css, nivoslider.jquery.json, package.json)

В файле index.html вашей темы перед </head> добавить

<link rel="stylesheet" href="/wa-data/public/site/nsl/nivo-slider.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wa-data/public/site/nsl/jquery.nivo.slider.js"></script>

Писать код вывода Nivo slider лучше всего в отдельном блоке (Сайт / Блоки / Новый блок)

В слайдере можно вывести или отдельные фото (например рекламные баннеры со ссылками на страницы акций), или просто подтянуть туда все фото из выбранного альбома


Пример Nivo slider из отдельных фото

<div style="max-width:750px;">
	<div id="slider" class="nivoSlider">
		<img src="путь к картинке" alt="" />
		<img src="путь к картинке" alt="" title="Тут можно написать рекламный текст" />
		<a href="тут адрес ссылки"><img src="путь к картинке" alt="" /></a>
		<img src="путь к картинке" alt="" />
	</div>
</div>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
	});
</script>


Пример подключения фотоальбома к Nivo slider

В этом примере для альбома id=1, изображения макс ( Ширина, Высота ) = 750 px. Как узнать id альбома читать тут

<div style="max-width:750px;">
	{if $wa->photos}
    {$photos = $wa->photos->photos("/album/1", "750")}
	<div id="slider1" class="nivoSlider">
		{foreach $photos as $photo}
		<img src='{$photo.thumb_750.url}' alt='{$photo.name}.{$photo.ext}'>
		{/foreach}
	</div>
	{/if}
</div>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider1').nivoSlider();
	});
</script>