Скрипты для uKit 12.10.2017 0 508
Делаем кликабельным весь слайдер

Делаем кликабельным весь слайдер

В стандартном конструкторе uKit в слайдер можно вставить кнопку для перехода на другую страницу. Мы предлагаем вам небольшое усовершенствование этой функции.

Если вы добавите этот скрипт на ваш сайт, то сам слайдер целиком можно сделать такой кнопкой. Пользователь, нажимая на любой участок слайдера, переходит на страницу. Необходимость в кнопке при этом отпадает, хотя при желании можно и оставить на месте кнопку, и сделать слайдер полноразмерной гиперссылкой. Эта функция хорошо подойдёт для рекламных баннеров, а также для слайдеров, где есть необходимость в кнопке для перехода, но добавление которой может негативно сказать на его общем дизайне.

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте один из следующих кодов:


Первый вариант. (Кнопка в виджете "Слайдер" скрывается):
 

Код
<script>
    require(['jquery'], function($){
        $(document).ready(function(){
            // Идем по слайдерам
            $('.ul-image').each(function(){
                $(this).css('cursor', 'pointer');
                $(this).find('*').css('cursor', 'pointer');
                $(this).find('a').css('display', 'none');
            });
            
            // Закрыть
            $(document).on('click', '.ul-image', function(){
                if($(this).find('a').attr('href')) window.location.href = $(this).find('a').attr('href');
            });
        });
    });
</script>

 

Второй вариант. (Кнопка не скрывается и доступна в слайдере):

 

Код
<script>
    require(['jquery'], function($){
        $(document).ready(function(){
            // Идем по слайдерам
            $('.ul-image').each(function(){
                $(this).css('cursor', 'pointer');
                $(this).find('*').css('cursor', 'pointer');
            });
            
            // Закрыть
            $(document).on('click', '.ul-image', function(){
                if($(this).find('a').attr('href')) window.location.href = $(this).find('a').attr('href');
            });
        });
    });
</script>

 

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 0
avatar