Архив

Архив раздела ‘Javascript’
15 октября 2022 Нет комментариев
function responsiveCarousel(){
	var ww=$(window).width();
	var owl_structure=$(".escort .structure .items");
	if(ww>767){
		if(typeof owl_structure.data('owl.carousel')!='undefined'){
			owl_structure.data('owl.carousel').destroy();
		}
		owl_structure.removeClass('owl-carousel').removeClass('owl-theme');
	}
	else if(ww<768){
		owl_structure.addClass('owl-carousel').addClass('owl-theme');
		owl_structure.owlCarousel({
			loop:false,
			dots:false,
			nav:true,
			items:1,
			margin:0,
		});
		owl_structure.on('changed.owl.carousel',function(e){
			$('.escort .structure .counter span').text(e.item.index+1);
		});
	}
}
$(document).ready(function(){
	responsiveCarousel();
	$(window).on('resize',function(){
		responsiveCarousel();
	});
});
Categories: Javascript Tags:
5 сентября 2022 Нет комментариев
var catalog_tags=$('#catalog_tags');
catalog_tags.owlCarousel({
	loop:false,
	margin:15,
	items:10,
	nav:true,
	dots:false,
	navText:['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
	autoWidth:true,
});
$('.catalog_tags .all').on('click',function(){
	$(this).remove();
	catalog_tags.trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
	catalog_tags.find('.owl-stage-outer').children().unwrap();
});
Categories: Javascript Tags:
9 августа 2022 Нет комментариев

Когда каждый элемент .block полностью показан (прокручен до конца) добавляем блоку .bullet класс .active

$(document).ready(function(){
	$(window).scroll(function(){
		var scroll=parseInt($(window).scrollTop())+parseInt($(window).height());
		$('.block').each(function(){
			var offset=parseInt($(this).offset().top)+parseInt($(this).height());
			if(scroll>offset){
				$(this).find('.bullet').addClass('active');
			}
		});
	});
});
Categories: Javascript Tags: ,

В примере если опций 2 то выбирать последнюю

var select_format=$('select[name=format]');
var options_count=select_format.find('option').length;
if(options_count==2){
	select_format.prop('selectedIndex',options_count-1).change();
}
Categories: Javascript Tags:
$(window).load(function(){
	var index=0;
	if(index>=$('img.loading').length){
		clearInterval(intrvl);
	}
	intrvl=setInterval(function(){
		$('img.loading').eq(index).attr('src',$('img.loading').eq(index).attr('data-src'));
		index++
	},10);
});
<img data-src="/resize/icons/auto/228/228/icon274.png" class="loading" src="/assets/images/ajax_loader.gif" alt=""/>
Categories: Javascript Tags:

Для ссылок на jpg, которые не открываются в новом окне:

$("a[href$='.jpg'][target!='_blank']").on("click",function(){
});
Categories: Javascript Tags:
13 апреля 2022 1 комментарий

Вместо iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/<?=$item['youtube_id']?>?autoplay=0" allowfullscreen></iframe>

отображаем div

<div class="youtube" id="<?=$item['youtube_id']?>"></div>

css:

.youtube{
	background-position:center;
	background-repeat:no-repeat;
	position:relative;
	display:inline-block;
	overflow:hidden;
	transition:all 200ms ease-out;
	cursor:pointer;
	height:360px;
}
.youtube .play{
	background:url('../images/youtube-play-btn.png') no-repeat;
	background-position:0 -50px;
	-webkit-background-size:100% auto;
	background-size:100% auto;
	position:absolute;
	height:50px;
	width:69px;
	transition:none;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	cursor:pointer;
}
.youtube:hover .play{
	background-position:0 0;
}

javascript:

'use strict';
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
	if(!document.getElementsByClassName){
		var getElementsByClassName=function(node, classname){
			var a=[];
			var re=new RegExp('(^| )'+classname+'( |$)');
			var els=node.getElementsByTagName("*");
			for(var i=0,j=els.length;i<j;i++)
				if(re.test(els[i].className))a.push(els[i]);
			return a;
		}
		var videos=getElementsByClassName(document.body,"youtube");
	}
	else{
		var videos=document.getElementsByClassName("youtube");
	}
	var nb_videos=videos.length;
	for (var i=0;i<nb_videos;i++){
		videos[i].style.backgroundImage='url(https://i.ytimg.com/vi/'+videos[i].id+'/sddefault.jpg)';
		var play=document.createElement("div");
		play.setAttribute("class","play");
		videos[i].appendChild(play);
		videos[i].onclick=function(){
			var iframe=document.createElement("iframe");
			var iframe_url="https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1";
			if(this.getAttribute("data-params"))iframe_url+='&'+this.getAttribute("data-params");
			iframe.setAttribute("src",iframe_url);
			iframe.setAttribute("frameborder",'0');
			iframe.style.width=this.style.width;
			iframe.style.height=this.style.height;
			this.parentNode.replaceChild(iframe,this);
		}
	}
});

Картинка: youtube-play-btn.zip
На основе: https://sitehere.ru/uskorit-zagruzku-stranic-sajta

Categories: CSS, Javascript Tags: ,