1. Приветствую гостей и пользователей нашего форума! Первый раз вы у нас или же давно участвуете в жизни ресурса, хочу напомнить несколько моментов.

    1) Пользуемся поиском по форуму! Зачастую информация может находиться не по разделу!

    2) Раздел ИНФО-продуктов относительно новый, но имеем уже более 3000 высококлассных материалов (пользуемся сортировкой по прификсам).

    3) И самое важное, КАК КАЧАТЬ БЕЗ ОГРАНИЧЕНИЙ, вся информация находится по этой ссылке КУПИТЬ VIP

    4) Временная акция, получи +5 постов за вступление в нашу группу "Вконтакте" Более подробно ТУТ

    5) Веди активную жизнь на форуме и получай рубли на личный счёт!

    Скрыть объявление
  2. На нашем форуме Null-Prog действует серьёзное правило касательно размещения материалов!

    ДЛЯ РЕЛИЗЁРОВ: категорически запрещается выкладка материалов на файлообменники типа Deposit, letitbit и другие, требующие просмотров рекламы, обрезающие скорость и тд. Нарушителям, первые 2 раза предупреждения, далее БАН. Тему по этому поводу можно посмотреть ТУТ

    Скрыть объявление
  3. В тестовом режиме на нашем форуме открыт онлайн конструктор сайтов. Вы можете попробовать создать свой сайт у НАС, интуитивно понятный интерфейс, переведёт на 95%, быстрый экспорт проекта, от вас только перетаскивать элементы и вставить в них необходимый текст!

    Все вопросы ТУТ

    Скрыть объявление

  4. Скрыть объявление
  5. Уважаемые форумчане, открывается новый раздел форума, посвящённый ремонту и эксплуатации автомобилей. Просмотреть его можно ТУТ

    Так как раздел новый, информация будет пополнять каждый день. Если есть какие либо замечания по этому разделу, отписываемся в соответствующий раздел форума, либо в личку.

    Напоминаю, сообщения в разделе АВТО не учитываются, общение не ограничено.

    Скрыть объявление
  6. Объявляется набор Модераторов на различные раздел форума, свои заявки можно оставлять в ЭТОМ разделе, перед оставлением заявки рекомендуется ознакомиться с ПРАВИЛАМИ для модераторов.

ХАК Креативим - тур по сайту знакомящий с возможностями сайта [dle all]

Тема в разделе "Модули DataLife Engine", создана пользователем DomiTori, 19 июл 2016.

Метки:
  1. DomiTori

    DomiTori Moderator
    Команда форума Модер

    Регистрация:
    29 ноя 2015
    Сообщения:
    22
    Симпатии:
    11
    Наткнулся на шаблон в паблике под названием Zombie TV. Там увидел сиё явление - тур по сайту, который знакомит посетителя с его возможностями. Называется этот скрипт Joyride.

    Решил поставить на свой сайт и заодно написать вам как сделать подобное.
    Для начала решите нужно оно вам или нет, скрипт работает через куки, чтоб отображаться раз в заданное время, поэтому чтоб просмотреть еще раз, очистите куки на том сайте.

    Инструкция:
    1. Скачиваем архив в самом низу и заливаем файлы в ваш шаблон в папки js и style.
    2. Открываем main.tpl вашего шаблона и перед </head> вставляем
    HTML:
    <link href="{THEME}/style/joyride-2.1.
    	
    css" type="text/css" rel="stylesheet" />
            <script type="text/javascript" src="{THEME}/js/jquery.cookie.js"></script>
            <script type="text/javascript" src="{THEME}/js/jquery.joyride-2.1.js"></script>
    2. В main.tpl перед </body> вставляем
    HTML:
    <ol id="joyRideTipContent">
               <li data-class="info" data-button="Далее" data-options="tipLocation:left">Приветствую тебя, отаку. Предлогаю сделать небольшое путешествие по сайту. Сдесь у нас ультрасовременный слайдер с онгоингами, который меняет фон всего сайта при переключении</li>
               <li data-class="sector" data-button="Далее" data-options="tipLocation:bottom">Тут отображаются последние поступления аниме отсортированные по типу</li>
            <li data-class="filter" data-button="Далее" data-options="tipLocation:bottom">В этом блоке вы можете подобрать аниме по разным параметрам, таким как год выхода, жанр, страна и прочим</li>
               <li data-class="avatar" data-button="Закрыть" data-options="tipLocation:left">Предлогаю вам зарегистрироваться и самим изучить другие возможности нашего сайта</li>
            </ol>
    <script type='text/javascript'>
    (function($) {
      $(function() {
        $('#joyRideTipContent').joyride({
          autoStart : true,
          'cookieMonster': true, // true/false для использования cookie
          'cookieName': 'JoyRide', // имя кук
          'cookieDomain': false, //привязка кук к домену
          postStepCallback : function (index, tip) {
            if (index == 2) {
              $(this).joyride('set_li', false, 1);
            }
          },
          modal:true,
          expose: true
        });
      });
    })(jQuery)
    </script>
    3. Настраиваем под свои нужды. Смотрим на код
    HTML:
    <li data-class="info" data-button="Далее" data-options="tipLocation:left">Приветствую тебя, отаку. Предлогаю сделать небольшое путешествие по сайту. Сдесь у нас ультрасовременный слайдер с онгоингами, который меняет фон всего сайта при переключении</li>
               <li data-class="sector" data-button="Далее" data-options="tipLocation:bottom">Тут отображаются последние поступления аниме отсортированные по типу</li>
            <li data-class="filter" data-button="Далее" data-options="tipLocation:bottom">В этом блоке вы можете подобрать аниме по разным параметрам, таким как год выхода, жанр, страна и прочим</li>
               <li data-class="avatar" data-button="Закрыть" data-options="tipLocation:left">Предлогаю вам зарегистрироваться и самим изучить другие возможности нашего сайта</li>
    Это наши 4 подсказки, видим data-class - тут указываем класс блока на который будет наводиться подсказка, видим "Приветствую тебя, .... </li>" - это текст нашей подсказки.
    Меняем на свои классы и свои подсказки по аналогии
    HTML:
    <li data-class="тут класс блока" data-button="Далее" data-options="tipLocation:bottom">тут пишем подсказку</li>
    Часть кода tipLocation:bottom отвечает за месторасположение подсказки, значения могут быть left, right, bottom, top.

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

    Вложения:

    • tour.zip
      tour.zip
      Размер файла:
      11,3 КБ
      Просмотров:
      0
    Метки:

Поделиться этой страницей

iHax Community
Рейтинг@Mail.ru Яндекс.Метрика мониторинг сайтов
Форум программного обеспечения/
Загрузка...