Скрипт следующий / предыдущий материал

О чем материал?

Сегодня мы рассмотрим материал (скрипт) который позволяет уменьшить процент отказов в статистике для вашего сайта и просто позволяет задержать вашего посетителя на сайте. Не просто удержать его на несколько минут, а предоставить посетителю навигацию для чтения других материалов сайта.

Как работает скрипт и в каких модулях?

Скрипт работает на базовом api uCoz и не требует подключенного PHP. Данный скрипт будет работать лишь в модулях Блог и Новости, так как разрабатывался он исключительно для этих модулей и ранее не задумывалась разработка для модулей каталогов. Уникальность данного скрипта с похожими в сети в том, что он не создает нагрузок на сервера и подгружает название следующего или предыдущего материала.

Как установить скрипт Следующий / Предыдущий материал

1. Прежде всего перейти в общие настройки сайта и отметить пункт - Разрешить использование API. Не отмечать "Использовать API key" так как он нам не нужен, скрипт работает лишь на базовом api.

2. После как подключили базовое API, можно приступить к установке кода кнопок. Перейдите в шаблон страницы материала и комментариев модуля блог или новости, далее после кода $MESSAGE$ или в нужном вам месте установим код кнопок:

 <table id="material-nav" style="clear:both; width:100%;display:none">
 <tr>
 <td style="width:50%; padding:10px;text-align: center; cursor: pointer">
 <span id="prevPost"><i class="fa fa-long-arrow-left"></i><span id="prevTitle"></span></span>
 </td>
 <td style="width:50%; padding:10px;text-align: center; cursor: pointer">
 <span id="nextPost"><i class="fa fa-long-arrow-right"></i><span id="nextTitle"></span></span>
 </td>
 </tr>
</table> 

Вместо выделенного красным можете прописать код для вывода стрелок фото, например так:

<img src="ссылка на фото стрелки влево (left) / вправо (right)">

как видно с примера выше, у меня подключен fontawesome и стрелки я прописал другим кодом, вы же можете прописать прямые ссылки на иконки стрелок.

Установка основного скрипта который управляет работой кнопок

3. Установили код кнопок для переключения, это половина дела, далее нужно установить скрипт который будет управлять работой этих кнопок. Там же на странице материала и комментариев перед тегом </body> установить скрипт:

<script type="text/javascript">
$(document).ready(function(){
 $.getScript("/js/paginationPost.js", function(){
 paginationPost ('$MODULE_ID$', '$TIMESTAMP$');
 });
});
</script>

ссылку на скрипт paginationPost.js желательно заменить на свою, загрузите файл себе в файловый менеджер и замените.

Установка стилей к кнопкам скрипта

4. Завершающий этап, это установка стилей. В таблицу стилей CSS установите стили:

#material-nav td {border-radius:5px;border: 1px solid #CDC7C7!important; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); background: #fff;}
#material-nav td:hover,#material-nav td span:hover,#material-nav td a:hover {background:#55adf5;border-bottom: 1px dashed #FFF;color:#fff;border-radius:5px;}

вот и все, установка скрипта завершена. Желательно после этих манипуляций очистить кеш в браузере и можно проверять результат работы.

Разработчик скрипта: Александр Леонов