все просто

Набор основных используемых скриптов на сайте

Не большая сборка скриптов, для работы сайта. Все взято с просторов интернета, нет общего источника. Что-то там, что-то тут..

$(document).ready(function () {

Задается маска тедефона всем input на сайте с типом tel

Для работы необходим скрипт jquery.maskedinput.min.js

    $('input[type=tel]').mask('+7 (999) 999-99-99');
	

В статьях часто используются картинки и необходимо их увеличивать при клике на них. Можно добавить новый класс fullscreen

	$('.content-text>img:not(.fullscreen), .content-text p>img:not(.fullscreen), .fullscreen').click(function(){		
		$.fancybox.open([{src:$(this).attr('src')}],{"padding":"0"});
	});
	

Для слайдов на страницах хорош в использованиии slick позволяет реализовать большинство необходимых задач

Настройки сладера

    $('.main-about_slider').slick({
        dots: true, //включаем точки
        arrows:false,  // отключаем стрелки
        infinite: true, //прогоняем по кругу
        speed: 300, //скорость прокрутки
		fade:true, //режим затухания
        slidesToShow: 1,  //показывать слайдов
        autoplay: true,  //авто запуск
        autoplaySpeed: 2000,  // через сколько начала запуска
        dotsClass:'about-dots', // класс обертки точек
    });
	
    $('.constr-slider').slick({
        dots: true,
        arrows:true, //включаем стрелки
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        autoplay: false,
        dotsClass:'constr-dots',
        prevArrow:'<button type="button" class="constr-prev fas fa-arrow-left"></button>',  //задаем стрелочки назад и следующий
        nextArrow:'<button type="button" class="constr-next fas fa-arrow-right"></button>',
		responsive:[
          {breakpoint:1100,
            settings: {
              slidesToShow:3,  // уменьшаем количество слайдов, адаптив
            }
          },
         {breakpoint:800,
            settings: {
              slidesToShow: 2,
            }
          },
         {breakpoint: 500,
            settings: {
              slidesToShow: 1,
            }
          }
        ]
    });
	

получаем значения слайдов

	$('.constr-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
		console.log(currentSlide+'--'+nextSlide+'--'+slick.slideCount );
	});
	

получение слайдера с выводом количества слайдов и номера текущего слайда

    $('.homes-slides').on('init reInit', function(event, slick) {
      $(this).parent().find('.homes-counter').html(1 + '/<span>' + slick.slideCount+'</span>');
    });
    $('.homes-slides').slick({
        dots: false,
        arrows:true,
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        autoplay: false,
        dotsClass:'homes-dots',
        prevArrow:'<button type="button" class="homes-prev fal fa-long-arrow-left"></button>',
        nextArrow:'<button type="button" class="homes-next fal fa-long-arrow-right"></button>',
    });
    $('.homes-slides').on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
      let i = (currentSlide ? currentSlide : 0) + 1;
      $(this).parent().find('.homes-counter').html(i + '/<span>' + slick.slideCount+'</span>');
    })
	

табы на странице

    $('.header-tab>li').on('click', function(e){
	e.preventDefault();
        $('.header-tab>li.active').removeClass('active');
        $('.tab-content>.active').removeClass('active');
        $(this).addClass('active');
        $('.tab-content>.tab-'+$(this).data('tab')).addClass('active');
    });
	

табы на странице, разметка

		<ul class="header-tab">
			<li class="active" data-tab="1">Описание товара
			<li data-tab="2">Характеристики
		</ul>
		<div class="tab-content">
			<div class="tab-1 active">

			</div>
			<div class="tab-2">
				
			</div>
               </div>
	

аккардеон, если надо

	$('.akkord-header').on('click', function(){
	if ($(this).hasClass('active')){
		$(this).removeClass('active');
		$(this).parent('.akkord-item').children('.akkord-content').slideUp('slow');
	}else{
		$('.akkord-header').removeClass('active');
		$('.akkord-content').slideUp('slow');
		$(this).addClass('active');
		$(this).parent('.akkord-item').children('.akkord-content').slideDown('slow');
	}
    });
	

бутерброд меню

    $('.navbar-toggle').click(function(){
        $('.menu').slideToggle( "slow", function() {
          if($(this).css('display') === 'none'){
            $(this).removeAttr('style');
          }
        });
        $(this).toggleClass('active');
    });
	

модальное(попав) окно fancybox, с функцией передачи параметров и скрытия полей

	    $('.callback').fancybox({
		afterLoad: function(instance, slide) {
			var title = slide.opts.$orig.data('title');
			var hide = slide.opts.$orig.data('hide');
			var mess = slide.opts.$orig.data('page');
			if (title) {
				$('#modal_title').text(title); 
			}else{
				$('#modal_title').text('Оставте заявку');
			}
			$('.ajax-form .form-control').show();
			// console.log(hide);
			if (hide) {
				var h=hide.split(',');
				$.each(h,function(i,elem){
					$('#'+ $.trim(elem)).hide();
				});
			}
			if (mess){
				$('#mess').text(mess);
			}else{
				$('#mess').text('');
			}
		}
	});
	

Примерный вид кнопки вызова модального окна

	<a href="#callback" class="btn btn-secondary callback" 
data-title="Заказать звонок"
data-hide="mess,email"
data-page="Текст какой-то, любой">
Заказать звонок</a>

включаем кнопку Наверх и Фиксированное меню

    $(document).on("scroll", function() {
        if ($(document).scrollTop() > 200) {
            //$("#top-menu").addClass("active");
            $("#top").addClass("active");
        } else {
            //$("#top-menu").removeClass("active");
            $("#top").removeClass("active");
        }
    });
	

скролл на верх по кнопке Наверх

    $("#top").on('click', function(e) {
        // prevent default anchor click behavior
        e.preventDefault();
        // animate
        $('html, body').animate({
            scrollTop: $('#header').offset().top
        }, 1100, function() {
            // when done, add hash to url
            // (default click behaviour)
            //window.location.hash = this.hash;
        });
    });
	

много уровневое меню, для ПК и Мобилок, не идеал, но хоть так

function click_hover(){
    var ww = document.body.clientWidth;
      if (ww > 1200) {
        $('.drop-menu').hover(function(){
              $(this).children('.sub-menu').slideDown( "fast");},
			  function(){
					$(this).children('.sub-menu').slideUp('fast', function(){$(this).stop(true);});
				}
			);
			
      } else {
       $('.drop-menu>span, .drop-menu>a').click(function(e){
		e.preventDefault();
        if ($(this).parent().children('.sub-menu').is(':visible')){
          $(this).parent().children('.sub-menu').slideUp("fast", function() {
            if($(this).css('display') === 'none'){
              $(this).removeAttr('style');
            }
          });

        }else{
          $(this).parent().parent().find('.menu-down').children('.sub-menu').slideUp("fast");
          $('.drop-menu').removeClass('menu-down');
          $(this).parent().children('.sub-menu').slideDown( "fast");

        }
         $(this).parent().toggleClass('menu-down');

      });
      }
  };
	/*запуск фукции меню*/
    click_hover();
	
	/* варианты перезапуска меню, при изменении Экрана*/
	
      // Listen for resize changes
     /* window.addEventListener("resize", function() {
          // Get screen size (inner/outerWidth, inner/outerHeight)
          cat_drown();
          //click_hover();
      }, false);*/
      // Listen for orientation changes      
      window.addEventListener("orientationchange", function() {
          // Announce the new orientation number
          click_hover();
      }, false);
	

});

отключаем сообщения об успешной отправке Обратной связи

$(document).ready(function() {
	// Removing AjaxForm success message
	if (typeof(AjaxForm) != 'undefined') {
		AjaxForm.Message.success = function() {};
	}
});

/*выводим свое сообщения об успешной отправке  Обратной связи*/
// Show AjaxForm success message in modal
$(document).on('af_complete', function(event, response) {
	var form = response.form;
	if (response.success) {
		$.fancybox.close();
		$.fancybox.open('<div class="modal" id="popup-call"><div class="popup-title">' + response.message + '</div></div>',[{
			opts : {
				afterShow : setTimeout(function(){$.fancybox.close()}, 2000)
			}
		}]);
	}
});

Запуск функций после обновления списка фильтрации плагином mSearch2

$(document).on('mse2_load', function(e, data) {
    //console.log(e, data);
    homes_slides();
    callback();
});

Изменяем итоговую сумму в строке корзины miniShop

                   <td class="count">
                            <form method="post" class="ms2_form form-inline" role="form">
                                <input type="hidden" name="key" value="{$product.key}"/>
                                <div class="form-group">
                                    <input type="number" name="count" value="{$product.count}"
                                           class="input-sm form-control"/>
                                    <button class="btn btn-default" type="submit" name="ms2_action" value="cart/change"></button>
                                </div>
                            </form>
                        </td>
                        <td> {set $itog = $product.price|replace:" ":"" * $product.count}
                            <span class="cart-sum rub">{$itog}</span>
                        </td>
                        
         $(document).ready(function () {
    		     miniShop2.Callbacks.add('Cart.change.response.success', 'cart_change_ok', function(response) {
                    $('#'+response.data.key+' .cart-sum').text($('#'+response.data.key+' input[name="count"]').val()*$('#'+response.data.key+' .cart-val').text().replace(' ',''));
                });
            });

Скрывать окно при клике вне его

$(document).mouseup(function (e){ // событие клика по веб-документу
		var div = $(".city_key"); // тут указываем ID элемента
		if (!div.is(e.target) // если клик был не по нашему блоку
		    && div.has(e.target).length === 0) { // и не по его дочерним элементам
			div.hide(); // скрываем его
		}
	});

Комментарии ()