Архив

Публикации с меткой ‘jquery’
17 августа 2020 Нет комментариев

Добавляется js: https://huynhhuynh.github.io/owlcarousel2-filter/dist/owlcarousel2-filter.min.js

$(document).ready(function(){
	var owl=$('.owl_1').owlCarousel({
		loop:false,
		margin:0,
		items:4,
		nav:true,
		dots:false,
		navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
	});
	$('.owl-filter-bar').on('click','li',function(){
		var item=$(this);
		$('.owl-filter-bar ul li').removeClass('active');
		item.addClass('active');
		var filter=item.data('owl-filter');
		owl.owlcarousel2_filter(filter);
	});
});
<div class="owl-filter-bar">
	<ul>
		<li data-owl-filter="*" class="active">Все</li>
		<li data-owl-filter=".d1">1</li>
		<li data-owl-filter=".d2">2</li>
		<li data-owl-filter=".d3">3</li>
		<li data-owl-filter=".d4">4</li>
		<li data-owl-filter=".d5">5</li>
	</ul>
</div>
<div class="owl-carousel owl-theme owl_1">
	<div class="item d1"></div>
	<div class="item d2"></div>
	<div class="item d3"></div>
	<div class="item d4 d5"></div>
	<div class="item"></div>
</div>

https://huynhhuynh.github.io/owlcarousel2-filter/

Categories: Javascript Tags:
$(".link").fancybox().trigger('click');

равнозначно

$(window).load(function(){
	$(".link").click();
});
Categories: Javascript Tags:
$('.gb .item .photos').each(function(){
	$(this).magnificPopup({
		type:'image',
		tClose:'Закрыть',
		delegate:'a',
		gallery:{
			enabled:true,
			tPrev:'Назад',
			tNext:'Вперед',
			tCounter:'<span class="mfp-counter">%curr% из %total%</span>',
		}
	});
});
Categories: Javascript Tags:

при клике внутри label по блоку .finded отменить стандартное действие и отправить форму

$('.filters_inline label').on('click',function(event){
	if($(event.target).closest(".finded").length){
		event.preventDefault();
		$(this).closest('form').submit();
	}
});
Categories: Javascript Tags:

Закомментировать данный код в chosen.jquery.js

    AbstractChosen.browser_is_supported = function() {
      /*
	  if ("Microsoft Internet Explorer" === window.navigator.appName) {
        return document.documentMode >= 8;
      }
      if (/iP(od|hone)/i.test(window.navigator.userAgent) || /IEMobile/i.test(window.navigator.userAgent) || /Windows Phone/i.test(window.navigator.userAgent) || /BlackBerry/i.test(window.navigator.userAgent) || /BB10/i.test(window.navigator.userAgent) || /Android.*Mobile/i.test(window.navigator.userAgent)) {
        return false;
      }
	  */
      return true;
    };
Categories: Javascript Tags:

Для нормальной работы ui на мобильных устройствах подключить https://github.com/furf/jquery-ui-touch-punch

Categories: Javascript Tags:
$(document).ready(function(){
	var sync1=$("#owl_detail");
	var sync2=$("#owl_thumbs");
	var slidesPerPage=4;
	var syncedSecondary=false;
	sync1.owlCarousel({
		items:1,
		//slideSpeed:2000,
		nav:true,
		autoplay:false,
		dots:false,
		loop:false,
		//responsiveRefreshRate:200,
	}).on('changed.owl.carousel',syncPosition);
	sync2.on('initialized.owl.carousel',function(){
		sync2.find(".owl-item").eq(0).addClass("current");
	}).owlCarousel({
		items:slidesPerPage,
		dots:false,
		nav:false,
		loop:false,
		margin:25,
		//smartSpeed:200,
		//slideSpeed:500,
		//slideBy:slidesPerPage,
		//responsiveRefreshRate:100
	}).on('changed.owl.carousel',syncPosition2);
	function syncPosition(el){
		/*
		var count=el.item.count-1;
		var current=Math.round(el.item.index-(el.item.count/2)-.5);
		if(current<0){
			current=count;
		}
		if(current>count){
			current=0;
		}
		*/
		var current=el.item.index;
		sync2.find(".owl-item").removeClass("current").eq(current).addClass("current");
		var onscreen=sync2.find('.owl-item.active').length-1;
		var start=sync2.find('.owl-item.active').first().index();
		var end=sync2.find('.owl-item.active').last().index();
		if(current>end){
			sync2.data('owl.carousel').to(current,100,true);
		}
		if(current<start){
			sync2.data('owl.carousel').to(current-onscreen,100,true);
		}
	}
	function syncPosition2(el){
		if(syncedSecondary){
			var number=el.item.index;
			sync1.data('owl.carousel').to(number,100,true);
		}
	}
	sync2.on("click",".owl-item",function(e){
		e.preventDefault();
		var number=$(this).index();
		sync1.data('owl.carousel').to(number,300,true);
	});
});
<div class="large">
	<div class="owl-carousel owl-theme" id="owl_detail">
		<div class="item">
			<img src="images/detail_1.jpg" alt=""/>
		</div>
		<div class="item">
			<img src="images/detail_2.jpg" alt=""/>
		</div>
	</div>
</div>
<div class="thumbs">
	<div class="owl-carousel owl-theme" id="owl_thumbs">
		<div class="item">
			<img src="images/detail_1.jpg" alt=""/>
		</div>
		<div class="item">
			<img src="images/detail_2.jpg" alt=""/>
		</div>
	</div>
</div>
Categories: Javascript Tags: