Simindey
1/23/2017 - 7:34 AM

Галерея слайдер

Галерея слайдер

$(function(){
	$('.fade_txt').gallery({
		listOfSlides: 'div.hold > ul > li',
		duration: 3000,
		autoRotation: 10000,
		effect:true,
		autoHeight:true,
		switcher: 'ul.dot > li'
	});
});

//Миниатюры к слайдерам-начало
var slideWidth=103;
var widthTopImg;
var heightTopImg;
var widthAllImg
var leftAllImg;
var countAllImg;
//Устанавливаем Размеры
$(function(){

if ($('.fade_txt').attr('data-id') == '0')
{
	var i;
	var y = $('.fade_txt').length;
	for (i = 0; i <= y-1; i++) {
		countItems(i); //Проверяем на кол-в фото и если его много, то добавляем стрелки
		widthBigImg(i); //Определяем размеры главного фото
	}

}
else
{

	countAllImg = $('.hold').data('count');//Колличество фото
	widthTopImg = $('.fade_txt .hold ul li[data-col=1] img').width();
	heightTopImg = $('.fade_txt .hold ul li[data-col=1] img').height();
	widthAllImg = Math.floor(widthTopImg / slideWidth)* slideWidth; 
	leftAllImg = (widthTopImg - widthAllImg) / 2;
	var topImg = heightTopImg - 75;

	$('.viewport').css({'width':widthAllImg,'left':leftAllImg, 'top':topImg});

	if(parseInt(countAllImg) > Math.floor(widthTopImg / slideWidth)){
		$('.prevm').show();
		$('.nextm').show();
	}

}



});


$(function(){

	$('ul.dot').width($('ul.dot').children().size()*slideWidth);

	$('.fade_txt').on('click','ul.dot li',function(){
	var s = $(this).data('col');
	$('.hold ul li.active').removeClass('active').animate({'opacity':0},2000);
	$('.hold ul li[data-col='+s+']').addClass('active').animate({'opacity':1},2000);
	$('.fade_txt ul.dot li.active').removeClass('active');
	$(this).addClass('active');
    });

    $('.nextm').on('click',function(){
        nextSlide();

    });
    $('.prevm').on('click',function(){
        prevSlide();

    });
/*
(function(){
    //Сохраняем ссылку на стандартный метод jQuery
    var originalAddClassMethod = jQuery.fn.addClass;
    //Переопределяем
    $.fn.addClass = function(){
        var result = originalAddClassMethod.apply(this, arguments);
        //Инициализируем событие смены класса
        $(this).trigger('cssClassChanged');
        return result;
    }
})();

$(function(){
    $("ul.dot li").bind('cssClassChanged', function(){ 

    });
});
*/
});

function countItems(x){
var x;

var count = $('.fade_txt[data-id='+x+'] .hold').data('count');
if(parseInt(count) > Math.floor(widthTopImg / slideWidth)){
		$('.fade_txt[data-id='+x+'] .prevm').show();
		$('.fade_txt[data-id='+x+'] .nextm').show();
}
}

function widthBigImg(z){
var z;

	var widthTImg = $('.fade_txt[data-id='+z+'] .hold ul li[data-col=1] img').width();
	var heightTImg = $('.fade_txt[data-id='+z+'] .hold ul li[data-col=1] img').height();
	var widthAllImg = Math.floor(widthTImg / slideWidth)* slideWidth; 
	var leftAllImg = (widthTImg - widthAllImg) / 2;
	var topImg = heightTImg - 75;

	$('.fade_txt[data-id='+z+'] .viewport').css({'width':widthAllImg,'left':leftAllImg, 'top':topImg});

}


function nextSlide(){

    var currentSlide=parseInt($('ul.dot').data('current'));
    currentSlide++;

	var col = $('ul.dot').children().size()- Math.floor(widthTopImg / slideWidth);
    if(currentSlide>=col)
    {
        $('ul.dot').css('left',-(currentSlide-2)*slideWidth);  
        $('ul.dot').append($('ul.dot').children().first().clone());
		$('ul.dot').children().last().css({'margin-right':'3px'});
        $('ul.dot').children().first().remove();
        currentSlide--;  
    }

    $('ul.dot').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}

function prevSlide(){

    var currentSlide=parseInt($('ul.dot').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        $('ul.dot').css('left',-(currentSlide+2)*slideWidth);  
		$('ul.dot').prepend($('ul.dot').children().last().clone());
		$('ul.dot').children().first().css({'margin-left':'3px'});
        $('ul.dot').children().last().remove();
        currentSlide++;  
    }
    $('ul.dot').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}

//Миниатюры к слайдерам-конец

/**
 * jQuery gallery v2.1.0
 **/

;(function(e){var t=function(e){e.holdWidth=e.list.parent().outerWidth();e.woh=e.elements.outerWidth(true);if(!e.direction)e.parentSize=e.holdWidth;else{e.woh=e.elements.outerHeight(true);e.parentSize=e.list.parent().height()}e.wrapHolderW=Math.ceil(e.parentSize/e.woh);if((e.wrapHolderW-1)*e.woh+e.woh/2>e.parentSize)e.wrapHolderW--;if(e.wrapHolderW==0)e.wrapHolderW=1},n=function(e){if(!e.direction)return{left:-(e.woh*e.active)};else return{top:-(e.woh*e.active)}},r=function(e){e.prevBtn.removeClass(e.disableBtn);e.nextBtn.removeClass(e.disableBtn);if(e.active==0||e.count+1==e.wrapHolderW-1)e.prevBtn.addClass(e.disableBtn);if(e.active==0&&e.count+1==1||e.count+1<=e.wrapHolderW-1)e.nextBtn.addClass(e.disableBtn);if(e.active==e.rew)e.nextBtn.addClass(e.disableBtn)},i=function(e,t,n){t.bind(e.event+".gallery",function(){if(e.flag){if(e.infinite)e.flag=false;if(e._t)clearTimeout(e._t);o(e,n);if(e.autoRotation)f(e);if(typeof e.onChange=="function")e.onChange({elements:e.elements,active:e.active})}if(e.event=="click")return false})},s=function(t){t.switcher.bind(t.event+".gallery",function(){if(t.flag&&!e(this).hasClass(t.activeClass)){if(t.infinite)t.flag=false;t.active=t.switcher.index(jQuery(this))*t.slideElement;if(t.infinite)t.active=t.switcher.index(jQuery(this))+t.count;if(t._t)clearTimeout(t._t);if(t.disableBtn)r(t);if(!t.effect)a(t);else u(t);if(t.autoRotation)f(t);if(typeof t.onChange=="function")t.onChange({elements:t.elements,active:t.active})}if(t.event=="click")return false})},o=function(e,t){if(!e.infinite){if(e.active==e.rew&&e.circle&&t)e.active=-e.slideElement;if(e.active==0&&e.circle&&!t)e.active=e.rew+e.slideElement;for(var i=0;i<e.slideElement;i++){if(t){if(e.active+1<=e.rew)e.active++}else{if(e.active-1>=0)e.active--}}}else{if(e.active>=e.count+e.count&&t)e.active-=e.count;if(e.active<=e.count-1&&!t)e.active+=e.count;e.list.css(n(e));if(t)e.active+=e.slideElement;else e.active-=e.slideElement}if(e.disableBtn)r(e);if(!e.effect)a(e);else u(e)},u=function(e){if(!e.IEfx&&e.IE){e.list.eq(e.last).css({opacity:0});e.list.removeClass(e.activeClass).eq(e.active).addClass(e.activeClass).css({opacity:"auto"})}else{e.list.eq(e.last).animate({opacity:0},{queue:false,easing:e.easing,duration:e.duration});e.list.removeClass(e.activeClass).eq(e.active).addClass(e.activeClass).animate({opacity:1},{queue:false,duration:e.duration,complete:function(){jQuery(this).css("opacity","auto")}})}if(e.autoHeight)e.list.parent().animate({height:e.list.eq(e.active).outerHeight()},{queue:false,duration:e.duration});if(e.switcher)e.switcher.removeClass(e.activeClass).eq(e.active).addClass(e.activeClass);e.last=e.active},a=function(e){if(!e.infinite)e.list.animate(n(e),{queue:false,easing:e.easing,duration:e.duration});else{e.list.animate(n(e),e.duration,e.easing,function(){if(e.active>=e.count+e.count)e.active-=e.count;if(e.active<=e.count-1)e.active+=e.count;e.list.css(n(e));e.flag=true})}if(e.autoHeight)e.list.parent().animate({height:e.list.children().eq(e.active).outerHeight()},{queue:false,duration:e.duration});if(e.switcher){if(!e.infinite)e.switcher.removeClass(e.activeClass).eq(Math.ceil(e.active/e.slideElement)).addClass(e.activeClass);else{e.switcher.removeClass(e.activeClass).eq(e.active-e.count).addClass(e.activeClass);e.switcher.removeClass(e.activeClass).eq(e.active-e.count-e.count).addClass(e.activeClass);e.switcher.eq(e.active).addClass(e.activeClass)}}},f=function(e){if(e._t)clearTimeout(e._t);e._t=setInterval(function(){if(e.infinite)e.flag=false;o(e,true);if(typeof e.onChange=="function")e.onChange({elements:e.elements,active:e.active})},e.autoRotation)},l=function(e){if(e.flexible&&!e.direction){t(e);if(e.elements.length*e.minWidth>e.holdWidth){e.elements.css({width:Math.floor(e.holdWidth/Math.floor(e.holdWidth/e.minWidth))});if(e.elements.outerWidth(true)>Math.floor(e.holdWidth/Math.floor(e.holdWidth/e.minWidth))){e.elements.css({width:Math.floor(e.holdWidth/Math.floor(e.holdWidth/e.minWidth))-(e.elements.outerWidth(true)-Math.floor(e.holdWidth/Math.floor(e.holdWidth/e.minWidth)))})}}else{e.active=0;e.elements.css({width:Math.floor(e.holdWidth/e.elements.length)})}}t(e);if(!e.effect){e.rew=e.count-e.wrapHolderW+1;if(e.active>e.rew)e.active=e.rew;e.list.css({position:"relative"}).css(n(e));if(e.switcher)e.switcher.removeClass(e.activeClass).eq(e.active).addClass(e.activeClass);if(e.autoHeight)e.list.parent().css({height:e.list.children().eq(e.active).outerHeight()})}else{e.rew=e.count;e.list.css({opacity:0}).removeClass(e.activeClass).eq(e.active).addClass(e.activeClass).css({opacity:1}).css("opacity","auto");if(e.switcher)e.switcher.removeClass(e.activeClass).eq(e.active).addClass(e.activeClass);if(e.autoHeight)e.list.parent().css({height:e.list.eq(e.active).outerHeight()})}if(e.disableBtn)r(e)},c=function(t){var n,i=false,s=0,u,l=false,c=e("<span></span>");c.css({position:"absolute",left:0,top:0,width:9999,height:9999,cursor:"pointer",zIndex:9999});t.list.parent().css({position:"relative"}).append(c);c.css({display:"none"});t.list.bind("mousedown.gallery touchstart.gallery",function(e){l=false;if(t._t)clearTimeout(t._t);t.list.stop();i=true;n=e.originalEvent.touches?e.originalEvent.touches[0].pageX:e.pageX;u=t.list.position().left;s=0;if(e.type=="mousedown")e.preventDefault()});e(document).bind("mousemove.gallery touchmove.gallery",function(e){if(Math.abs(n-(e.originalEvent.touches?e.originalEvent.touches[0].pageX:e.pageX))>8&&i){c.css({display:"block"});s=Math.abs((e.originalEvent.touches?e.originalEvent.touches[0].pageX:e.pageX)-n);if(n<=(e.originalEvent.touches?e.originalEvent.touches[0].pageX:e.pageX))s*=-1;if(t.list.position().left>0&&t.active==0||t.list.position().left<-t.woh*t.rew&&t.active==t.rew){t.list.css({left:u-s/3})}else{t.list.css({left:u-s})}return false}}).bind("mouseup.gallery touchend.gallery",function(e){if(i){c.css({display:"none"});i=false;if(s>0&&Math.abs(s)<t.woh&&Math.abs(s)>20){l="left"}if(s<0&&Math.abs(s)<t.woh&&Math.abs(s)>20){l="right"}if(t.list.position().left>0){t.active=0;a(t)}if(t.list.position().left<-t.woh*t.rew){t.active=t.rew;a(t)}if(t.list.position().left>-t.woh*t.rew&&t.list.position().left<0){if(l){if(l=="right"){o(t,false)}else{o(t,true)}l=false}else{if(Math.abs(s)>20){if(s>0)t.active=Math.ceil(-1*t.list.position().left/t.woh);else t.active=-1*Math.ceil(t.list.position().left/t.woh)}else{t.active=-1*Math.round(t.list.position().left/t.woh)}a(t)}}if(t.disableBtn)r(t);if(typeof t.onChange=="function")t.onChange({elements:t.elements,active:t.active});if(t.autoRotation)f(t)}})},h={init:function(t){return this.each(function(){var r=e(this);r.data("gallery",jQuery.extend({},p,t));var o=r.data("gallery");o.aR=o.autoRotation;o.context=r;o.list=o.context.find(o.listOfSlides);o.elements=o.list;if(o.elements.css("position")=="absolute"&&o.autoDetect)o.effect=true;o.count=o.list.index(o.list.filter(":last"));if(!o.IEfx)o.IE=!!/msie [\w.]+/.exec(navigator.userAgent.toLowerCase());if(!o.effect)o.list=o.list.parent();else o.touch=false;if(o.switcher)o.switcher=o.context.find(o.switcher);if(o.switcher.length==0)o.switcher=false;if(o.nextBtn)o.nextBtn=o.context.find(o.nextBtn);if(o.prevBtn)o.prevBtn=o.context.find(o.prevBtn);if(o.switcher)o.active=o.switcher.index(o.switcher.filter("."+o.activeClass+":eq(0)"));else o.active=o.elements.index(o.elements.filter("."+o.activeClass+":eq(0)"));if(o.active<0)o.active=0;o.last=o.active;if(o.flexible&&!o.direction)o.minWidth=o.elements.outerWidth(true);l(o);if(o.flexible&&!o.direction){e(window).bind("resize.gallery",function(){l(o)})}o.flag=true;if(o.infinite){o.count++;o.active+=o.count;o.list.append(o.elements.clone());o.list.append(o.elements.clone());o.list.css(n(o));o.elements=o.list.children()}if(o.rew<0&&!o.effect){o.list.css({left:0});return false}if(o.nextBtn)i(o,o.nextBtn,true);if(o.prevBtn)i(o,o.prevBtn,false);if(o.switcher)s(o);if(o.autoRotation)f(o);if(o.touch)c(o)})},option:function(t,n){if(n){return this.each(function(){var r=e(this).data("gallery");if(r)r[t]=n})}else{var r=[];this.each(function(){var n=e(this).data("gallery");if(n)r.push(n[t])});if(r.length>1)return r;else return r[0]}},destroy:function(){return this.each(function(){var t=e(this),n=t.data("gallery");if(n){if(n._t)clearTimeout(n._t);n.context.find("*").unbind(".gallery");e(window).unbind(".gallery");e(document).unbind(".gallery");n.elements.removeAttr("style");n.list.removeAttr("style");t.removeData("gallery")}})},rePosition:function(){return this.each(function(){var t=e(this),n=t.data("gallery");l(n)})},stop:function(){return this.each(function(){var t=e(this),n=t.data("gallery");n.aR=n.autoRotation;n.autoRotation=false;if(n._t)clearTimeout(n._t)})},play:function(t){return this.each(function(){var n=e(this),r=n.data("gallery");if(r._t)clearTimeout(r._t);r.autoRotation=t?t:r.aR;if(r.autoRotation)f(r)})},next:function(t){return this.each(function(){var n=e(this),i=n.data("gallery");if(t!="undefined"&&t>-1){i.active=t;if(i.disableBtn)r(i);if(!i.effect)a(i);else u(i)}else{if(i.flag){if(i.infinite)i.flag=false;if(i._t)clearTimeout(i._t);o(i,true);if(i.autoRotation)f(i);if(typeof i.onChange=="function")i.onChange({elements:i.elements,active:i.active})}}})},prev:function(){return this.each(function(){var t=e(this),n=t.data("gallery");if(n.flag){if(n.infinite)n.flag=false;if(n._t)clearTimeout(n._t);o(n,false);if(n.autoRotation)f(n);if(typeof n.onChange=="function")n.onChange({elements:n.elements,active:n.active})}})}},p={infinite:false,activeClass:"active",duration:300,slideElement:1,autoRotation:false,effect:false,listOfSlides:"ul:eq(0) > li",switcher:false,disableBtn:false,nextBtn:"a.link-next, a.btn-next, .next",prevBtn:"a.link-prev, a.btn-prev, .prev",IEfx:true,circle:true,direction:false,event:"click",autoHeight:false,easing:"easeOutQuad",flexible:false,autoDetect:true,touch:true,onChange:null};e.fn.gallery=function(t){if(h[t]){return h[t].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof t==="object"||!t){return h.init.apply(this,arguments)}else{e.error("Method "+t+" does not exist on jQuery.gallery")}}};jQuery.easing["jswing"]=jQuery.easing["swing"];jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,t,n,r,i){return jQuery.easing[jQuery.easing.def](e,t,n,r,i)},easeOutQuad:function(e,t,n,r,i){return-r*(t/=i)*(t-2)+n},easeOutCirc:function(e,t,n,r,i){return r*Math.sqrt(1-(t=t/i-1)*t)+n}})})(jQuery);

<div class="fade_txt">
		<div class="prev"></div>
		<div class="next"></div>
		<div class="hold">
			<ul>
			<?foreach($arResult["ITEMS"] as $key => $arItem):?>
				<li data-col="<?=$key?>"><img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="1002" height="564" alt="image" style='height:564px !important;'>
					<?/*<h1 class="h1"><?=$arItem[NAME]?></h1>*/?>
				</li>
			<?endforeach;?>
			</ul>
		</div>

	<?if($USER->IsAuthorized()): ?>
	<?if (CSite::InGroup(array(1))): ?>
	<?//echo '<pre>';
	//print_r($arResult);?>
		<div class="prevm"></div>
		<div class="nextm"></div>
		<div class='viewport'>
			<ul class="dot" data-current="0">
				<?foreach($arResult["ITEMS"] as $key => $arItem):?>
				<?$img = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=>100,'height' => 63), BX_RESIZE_IMAGE_EXACT, true);?>
				<li data-col="<?=$key?>">
				<img src="<?=$img["src"];?>" width="100" height="63" alt="image">
				</li>
				<?endforeach;?>
			</ul>
	<?endif;?> 
	<?endif;?>
		</div>
</div>
ul.dot{
list-style: none;
margin: 0;
padding: 0; 
position: absolute;
}

ul.dot li{
box-shadow:  0px 0px 10px 1px #333333;
-webkit-box-shadow:  0px 0px 10px 1px #333333;
-moz-box-shadow:  0px 0px 10px 1px #333333;
display: inline-block;
cursor: pointer;
width: 100px;
height: 63px;
vertical-align: top;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
background-position: 50% 0;
background-size: cover;
}
ul.dot li:hover{
opacity: 0.9;
border:1px solid #fff;
}
.viewport{
height: 63px;
overflow: hidden;
position: absolute;


z-index: 2;
}
ul.dot li.active{
border:1px solid #fff;
}
.fade_txt .prevm {
left: 1%;
background-position: 0 -523px !important;
background: url(../img/main_ico.png) no-repeat 0 0;
background-size: 28px auto;
}
.fade_txt .nextm {
right: 1%;
background-position: 0 -459px !important;
background: url(../img/main_ico.png) no-repeat 0 0;
background-size: 28px auto;
}
.fade_txt .prevm, .fade_txt .nextm {
    cursor: pointer;
    position: absolute;
    z-index: 10;
    width: 17px;
    height: 54px;
    bottom: 3%;
}