Jump to content
IPS Invision Community
Sign in to follow this  

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


Description

Гайд, как добавить ознакомление с сайтом в IPS

Вот пример:

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

 

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 ТУТ

  • Нравится 2
  • Спасибо 1


Recommended Comments

arash ranjbar

Posted

hi dear

I did all the steps but it didn't work.

 

Share this comment


Link to comment
Share on other sites
Sipsb

Posted

@arash ranjbar I just checked this option is fully working. IPS 4.4.10

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

2020-07-07_17-21-18.png

 

Share this comment


Link to comment
Share on other sites
arash ranjbar

Posted

My language is not Russian, maybe that's why I didn't do it right

Share this comment


Link to comment
Share on other sites
Shinobi

Posted

@arash ranjbar In English:

  1. Go to globalTemplate
  2. In <head></head> section add this line:
  3. Now in globalTemplate find 

and add above:

To select your own elements on your forum just change id of elements in element: '#elementid'

To trigger the function you can use a button:

You can find full documentation of IntroJS HERE

  • Нравится 2

Share this comment


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...
Вверх