Добавляем тур по сайту

Вот пример:

Скрытый текст

1. Идем в globalTemplate

2. В <head></head> секции добавляем строку:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.css" integrity="sha256-OYXGS5m4oWZAAqoAKpf7Y3bIdzdd9jBfly/xCavEpGw=" crossorigin="anonymous"/>

3. Теперь в globalTemplate ищем

<!--ipsQueryLog-->

и добавляем выше:

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js" integrity="sha256-fOPHmaamqkHPv4QYGxkiSKm7O/3GAJ4554pQXYleoLo=" crossorigin="anonymous"></script>
<script type="text/javascript">
	function startIntro(){
        var intro = introJs();
        intro.setOptions({
            steps: [
              { 
                intro: "Step 1 text"
              },
              {
                element: document.querySelector('#elNavSecondary_71'),
                intro: "Step 2 text."
              },
              {
                element: document.querySelectorAll('#elNavSecondary_63')[0],
                intro: "Step 3 text",
                position: 'right'
              },
              {
                element: '#elNavSecondary_56',
                intro: 'Step 4 text',
                position: 'left'
              },
              {
                element: '#step4',
                intro: "Step 5 text",
                position: 'bottom'
              },
              {
                element: '#step5',
                intro: 'Step 6 text'
              }
            ]
          });
        intro.start();
      }
</script>

Чтобы выбрать свои собственные элементы на вашем форуме, просто измените id элементов в элементе: '#elementid'

Для запуска функции вы можете использовать кнопку:

Цитата

<a class="ipsButton ipsButton_normal ipsButton_medium" href="javascript:void(0);" onclick="startIntro();" rel="">Start a tour</a>

Вы можете найти полную документацию IntroJS ТУТ

Было ли это полезно?

От Sipsb

24 августа, 2020

Обратная связь

0 комментариев

Создайте учетную запись или войдите, чтобы комментировать

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Добавляем тур по сайту

Обратная связь

Рекомендуемые комментарии

Создайте учетную запись или войдите, чтобы комментировать

Создать аккаунт

Войти

Сообщество

Файлы

Новости

Документация