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

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

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

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

Скрипт работает на базовом 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("https://abclinux.org/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;}

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

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

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Похожие материалы:
Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Добрый день. Спасибо за полезный скрипт. установил. Работает. Но есть на одной странице - labor-safety.org/blog/svinec_kontrol_za_vozdejstviem_v_proizvodstvennoj_srede/2020-04-15-945 некорректное отображение кнопки - вместо названия следующей страницы - Следующих материалов нет/There is no materials. Можно это исправить.
avatar
Откройте в файловом менеджере на редактирование скрипт paginationPost.js, в 3-4 строках найдете сломанный текст который вы привели в пример, поправьте его и сохраните не трогая сам скрипт, только текст. Можете прописать что-то свое вместо того, что будет выводиться если нет следующего материала или предыдущего.
avatar
Спасибо, попробую найти и подправить. У вас просмотрел, также есть кнопка окончание материалов. Такой вопрос, нельзя ли доработать скрипт, для кругового движения, без конечной кнопки, окончание материалов. Еще раз спасибо, за полезную информацию и вразумительные ответы.
avatar
Увы, когда для меня этот скрипт писали, не задумывалось, чтобы материалы переключались циклически по кругу. Я сам скрипт не доработаю, так как автор и разработчик другой. Вам нужно либо пользоваться чем есть или нанимать специалиста для доработки.
avatar