@aldoshka
Лузер

По клику на картинку в галерее открыть такую же в слайдере?

Мини-галерея:
<div class="morok_gallery">
  <div class="short">
   <img class="open_popup" src="/images/morok/1.jpg" alt="">
  </div>
  <div class="long">
     <img class="open_popup"  src="/images/morok/2.jpg" alt="">
   </div>
   <div class="long">
      <img class="open_popup" src="/images/morok/3.jpg" alt="">
    </div>
     <div class="short">
      <img  class="open_popup" src="/images/morok/4.jpg" alt="">
      </div>    
</div>

По клику на картинку открывается слайдер на весь экран (адреса картинок те же):
<div class="swipe">
        <div class="panel"><img src="/images/morok/1.jpg"></div>
        <div class="panel"><img src="/images/morok/2.jpg"></div>
        <div class="panel"><img src="/images/morok/3.jpg"></div>
        <div class="panel"><img src="/images/morok/4.jpg"></div>
        <div class="panel"><img src="/images/morok/5.jpg"></div>
    </div>

нужно, чтоб в полноэкранном слайдере открывалась та же картинка по которой был клик в мини-галерее.
Jqery:
$('.morok_gallery img').click(function() {
             $('.open_popup').removeClass('active');
              $(this).addClass('active');
         $('.modal_gallery').fadeIn();
                return false;
         });

    
$('.close-btn').click(function() {
		$(this).parents('.modal_gallery').fadeOut();
		return false;
	});		
 
	$(document).keydown(function(e) {
		if (e.keyCode === 27) {
			e.stopPropagation();
			$('.modal_gallery').fadeOut();
		}
	});	
 
  $(function(){
      var tolerance = 100;
     var speed = 650;
    var interactiveElements = $('input, button, a');
    var itemsLength = $('.panel').length;
   var active = 0;
    for (i=1; i<=itemsLength; i++){
        var $layer = $(".panel:nth-child("+i+")");
        var bgImg = $layer.attr("img");
            $layer.css({
              "background": "url("+bgImg+") no-repeat center / cover"
        });
    };
    setTimeout(function() {
        $(".panel").css({
            "transition": "cubic-bezier(.4,.95,.5,1.5) "+speed+"ms"
        });
}, 200);  
  $(".panel:not(:first)").addClass("right");
    function swipeScreen() {
        $('.swipe').on('mousedown touchstart', function(e) {
            
            var touch = e.originalEvent.touches;
            var start = touch ? touch[0].pageX : e.pageX;
            var difference;
            $(this).on('mousemove touchmove', function(e) {
                var contact = e.originalEvent.touches,
                end = contact ? contact[0].pageX : e.pageX;
                difference = end-start;
            });
            $(window).one('mouseup touchend', function(e) {
                e.preventDefault();
                // Переход вправо:
                if (active < itemsLength && difference < -tolerance) {
                    $(".panel:nth-child("+active+")").addClass("left");
                    $(".panel:nth-child("+(active+1)+")").removeClass("right");
                    active += 1;
                    btnDisable();
                };
                // Переход влево:
                if (active > 1 && difference > tolerance) {
                    $(".panel:nth-child("+(active-1)+")").removeClass("left");
                    $(".panel:nth-child("+active+")").addClass("right");
                    active -= 1;
                    btnDisable();
                };
                $('.swipe').off('mousemove touchmove');
            });
        });
    };
    swipeScreen();
    interactiveElements.on('touchstart touchend touchup', function(e) {
        e.stopPropagation();
    });
    // Кнопки:
    $(".btn-prev").click(function(){
        // Переход влево:
        if (active > 1) {
            $(".panel:nth-child("+(active-1)+")").removeClass("left");
            $(".panel:nth-child("+active+")").addClass("right");
            active -= 1;
            btnDisable();
        };
    });
    $(".btn-next").click(function(){
        // Переход вправо:
        if (active < itemsLength) {
            $(".panel:nth-child("+active+")").addClass("left");
            $(".panel:nth-child("+(active+1)+")").removeClass("right");
            active += 1;
            btnDisable();
        };
    });
    function btnDisable() {
        if (active >= itemsLength) {
            $(".btn-next").prop("disabled", true);
            $(".btn-prev").prop("disabled", false);
        }
        else if (active <= 1) {
            $(".btn-prev").prop("disabled", true);
            $(".btn-next").prop("disabled", false);
        }
        else {
            $(".btn-prev, .btn-next").prop("disabled", false);
        };
    };  
    });
  • Вопрос задан
  • 207 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы