Как вызвать fancybox по двойному клику и запретить по одинарному?

#javascript #html #jquery #fancybox #owl_carousel

Есть OwlCarousel с фотографиями, при нажатии на которые по двойному клику должна
открываться галерея fancybox.
 Дело в том, что галерея открывается по умолчанию по одинарному клику.
 А иногда даже просто при попытке сделать свайп карусели открывается модальное окно,
а этого не должно быть.
 Хочу запретить открывать фансибокс по одинарному клику, и слушать двойной.
 Могу отменить первый клик, двойной происходит, но фансибокс не определяется..:



function init() {
  initFancybox();
  initGallerySlider();
}

window.onload = init;


function initGallerySlider() {
  $('.gallery').owlCarousel({
    loop: true,
    margin: 0,
    autoWidth: true
  });
}

function initFancybox() {
  $(document).on('fancybox.init', '.fancybox', function() {
    var
      defaults = {
        maxWidth: 994,
        autoResize: true,
        padding: 0,
        helpers: {
          media: {},
          overlay: {}
        }
      },
      $el = $(this),
      group = $el.attr('data-fancybox-group'),
      options = eval('[' + $el.data('fancybox-options') + ']')[0];

    if (group) $el = $('[data-fancybox-group="' + group + '"]');

    $.extend(defaults, options);

    $el.fancybox(defaults);
  });

  $('.fancybox').trigger('fancybox.init');
}

$('[data-fancybox="gallery"]').click(function(e) {
  e.preventDefault();
});
$('[data-fancybox="gallery"]').dblclick(function() {
  $(this).fancybox();
});
.gallery__item {
  display: block;
  height: 200px;
  width: 200px;
  background-size: cover;
}










  

    

      

        
        
        
        
        
      
      
    
    
  
  





    

Ответы

Ответ 1

Добавил функцию prepairGallery(), которая собирает галерею и правильным образом запускает
по двойному клику, отменяя клик одинарный.



function init() {
  initFancybox();
  initGallerySlider();
  prepairGallery();
}

window.onload = init;


function initGallerySlider() {
  $('.gallery').owlCarousel({
    loop: true,
    margin: 0,
    autoWidth: true
  });
}

function initFancybox() {
  $(document).on('fancybox.init', '.fancybox', function() {
    var
      defaults = {
        maxWidth: 994,
        autoResize: true,
        padding: 0,
        helpers: {
          media: {},
          overlay: {}
        }
      },
      $el = $(this),
      group = $el.attr('data-fancybox-group'),
      options = eval('[' + $el.data('fancybox-options') + ']')[0];

    if (group) $el = $('[data-fancybox-group="' + group + '"]');

    $.extend(defaults, options);

    $el.fancybox(defaults);
  });

  $('.fancybox').trigger('fancybox.init');
}

var gallery = [];

function prepairGallery() {
  $(".gallery__item").each(function(i) {
  
    /* собираем галерею */
    gallery.push({
      src: this.href
    });
    
    $(this).on({
      /* отменяем одинарный клик */
      click: function(event) {
        event.preventDefault();
      },
      /* подключаем двойной клик */
      dblclick: function(event) {

        /* открываем собранную галерею на заданном индексе */
        $.fancybox.open(gallery, {padding: 0}, i);
      }
    });
  });

}
.gallery__item {
  display: block;
  height: 200px;
  width: 200px;
  background-size: cover;
}










  

    

      

        
        
        
        
        
      
      
    
    
  
  

Как сделать горизонтальную прокрутку на сайте?

#javascript #jquery #slickjs #owl_carousel #mootools

С помощью чего можно реализовать горизонтальную прокрутку, как на этом сайте?

https://www.adveris.fr/voeux2015/
    

Ответы

Ответ 1

На нативном js примерно так



function scrollHorizontally(e) { //включает горизонтальный скрол элемента колесом
    e = window.event || e;
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); //это шаг колеса
для разных браузеров
    document.documentElement.scrollLeft -= (delta * 40); //прокручиваем всю страницу
		e.preventDefault();
	};
  
function addMouseWell(elem, callback) { //вешает кроссплатформенный обработчик на
колесо мыши над элементом
	if (elem.addEventListener) {
		if ('onwheel' in document) {
			elem.addEventListener("wheel", callback);
		} else if ('onmousewheel' in document) {
			elem.addEventListener("mousewheel", callback);
		} else {
			elem.addEventListener("MozMousePixelScroll", callback);
		}
	} else {
		elem.attachEvent("onmousewheel", callback);
	}
}

addMouseWell(window, scrollHorizontally);
body {
  overflow:hidden;
  max-width:100%;
}

#wide {
  width:3000px;
}

  
Очень широкий контейнер. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Quibusdam sit libero beatae vitae placeat, culpa similique, at fugit est eum
distinctio cupiditate asperiores! Laborum, porro, exercitationem! Veritatis ea quisquam
repudiandae.
Deserunt unde iste placeat eaque. Error adipisci temporibus neque inventore ratione
dicta quasi, ipsa corrupti alias distinctio nam quibusdam magni cumque, rem possimus
officiis optio laudantium minima amet soluta eligendi. Quis, earum. Vitae eum cupiditate
consequatur pariatur quis voluptatibus, dignissimos nam recusandae voluptatem repellendus
exercitationem excepturi fugiat, obcaecati nostrum libero quaerat. Magni dolorem, deleniti
tempore quas similique distinctio quam animi.
Fugit nihil dolor dolores eos quidem quas, culpa fugiat amet expedita consectetur
provident corporis blanditiis obcaecati tempora eum, repellendus quam! Aliquam quos
pariatur, dignissimos dolor velit quo illum, fugit hic? Praesentium, aliquid id omnis
nesciunt alias deleniti obcaecati ipsa doloremque itaque harum earum assumenda, fuga
quisquam quia voluptate necessitatibus consequatur soluta maxime. Fuga quas autem debitis
earum dicta repellendus illum.



Ответ 2

$(function () {
  $('.slider').slick({
    arrows: false
  });
  
  $('.slider').mousewheel(function (e) {
    if (e.deltaY !== 1) {
      $('.slider').slick('slickNext');
    } else {
      $('.slider').slick('slickPrev');
    }
    
    e.preventDefault();
  });
});
body {
  margin: 0;
}

.slider {
  width: 100vw;
  height: 100vh;
}

.slick-list,
.slick-track {
  width: 100%;
  height: 100%;
}

.slider__item {
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

.slider__item span {
  margin: auto;
  height: 100%;
  font-family: sans-serif;
  font-size: 32px;
  align-items: center;
  justify-content: center;
  display: flex;
}






  
1
  
2
  
3
  
4

OwlCarousel2. Центрирование thumbnails по клику при loop: true

#javascript #jquery #вёрстка #owl_carousel

Есть две owl-карусельки: превьюшная и основная. Они синхронизированы. Обе карусели
имеют loop: true. Не получается заставить превьюшный слайдер центрировать owl-item-s
по клику на них. Что я делаю не так?

Песочница здесь. Код, отвечающий за желаемое поведение, помечу комментарием centered
items (коммент будет в двух местах).



$(document).ready(function() {

    var sync1 = $("#sync1");
    var sync2 = $("#sync2");
    var slidesPerPage = 4;
    var syncedSecondary = true;

    sync1.owlCarousel({
        items: 1,
        slideSpeed: 2000,
        nav: true,
        autoplay: false, 
        dots: true,
        loop: true,
        responsiveRefreshRate: 200,
        navText: ['', ''],
    }).on('changed.owl.carousel', syncPosition);

  sync2.on('initialized.owl.carousel', function() {
    sync2.find(".owl-item.center").eq(0).addClass("current");
  })
  
  /* centered items */
  sync2.find('.owl-item').each(function(index) {
    var item = $(this).attr('data-position', index);
  })
  
  sync2.owlCarousel({
    items: slidesPerPage,
    dots: false,
    nav: false,
    loop: true,
    center: true,
    smartSpeed: 200,
    slideSpeed: 1000,
    slideBy: slidesPerPage,
    responsiveRefreshRate: 100
  }).on('click', '.owl-item', function(e) {
        var carouselSync1 = $('#sync1').data('owl.carousel');
        e.preventDefault();
    
        var current = $(this).index();
        carouselSync1.to(carouselSync1.relative(current));
        
        /* centered items */
        sync2.trigger('to.owl-carousel', $(this).data('position'));
      });

    function syncPosition(el) {
       
        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);
      }
    }
});
#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#sync2 .item {
  background: #c9c9c9;
  padding: 10px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}

.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}










    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    
    

        
5
    
    

        
6
    
    

        
7
    
    

        
8
    



    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    
    

        
5
    
    

        
6
    
    

        
7
    
    

        
8
    




    

Ответы

Ответ 1

$(document).ready(function() {

  const sync1 = $("#sync1");
  const sync2 = $("#sync2");
  let slidesPerPage = 4;
  let syncedSecondary = true;
  
  let call_first = true;
  let correct = 1;

  sync1.owlCarousel({
      items: 1,
      slideSpeed: 2000,
      nav: true,
      autoplay: false, 
      dots: true,
      loop: true,
      responsiveRefreshRate: 200,
      navText: [
        ``,
        ``
      ],
      afterAction : syncPosition,
  }).on('changed.owl.carousel', syncPosition);

  

  sync2.owlCarousel({
    items: slidesPerPage,
    dots: false,
    nav: false,
    loop: true,
    center: true,
    smartSpeed: 200,
    slideSpeed: 1000,
    slideBy: slidesPerPage,
    onInitialized: carousel2Initialized,
    responsiveRefreshRate: 100,
  }).on('changed.owl.carousel', el =>{
    sync1.trigger('to.owl.carousel', [el.item.index + 4, 200, true]);
  });


  $('#sync2').on('click', '.owl-item', function(e) {
    const carousel = $('.owl-carousel').data('owl.carousel');
    e.preventDefault();
    if (call_first) {
      call_first = false;
      carousel.to(carousel.relative($(this).index()));
      sync1.trigger('to.owl.carousel', [carousel.relative($(this).index()), 200, true]);
    } else {
      carousel.to(carousel.relative($(this).index()));
    }  
  });

  $('.owl-prev').on('click', () => {
    if (call_first) {
     correct = -1;
    }
  });

  function syncPosition(el) {
    if (call_first) {  
      setTimeout(() => {
        call_first = false;
        sync2.find(".owl-item").removeClass("current").removeClass('active');
        sync2.trigger("to.owl.carousel", [correct, 300, true]);
        sync2.find(".owl-item.center").addClass("current");
      }, 0 );
    } else {
      sync2.find(".owl-item").removeClass("current").removeClass('active');
      sync2.trigger("to.owl.carousel", [el.item.index - 4, 300, true] );
    }
    sync2.find(".owl-item.center").addClass("current");
  }
  
  function carousel2Initialized () {
    $('#sync2 .owl-item.center').addClass('current');
  }
  

});
#sync1 .item {
  background: #0c83e7;
  padding: 80px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
}

#sync2 .item {
  background: #c9c9c9;
  padding: 10px 0px;
  margin: 5px;
  color: #fff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
#sync2 .item h1 {
  font-size: 18px;
}
#sync2 .current .item {
  background: #0c83e7;
}

.owl-theme .owl-nav [class*="owl-"] {
  transition: all 0.3s ease;
}
.owl-theme .owl-nav [class*="owl-"].disabled:hover {
  background-color: #d6d6d6;
}

#sync1.owl-theme {
  position: relative;
}
#sync1.owl-theme .owl-next,
#sync1.owl-theme .owl-prev {
  width: 22px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
}
#sync1.owl-theme .owl-prev {
  left: 10px;
}
#sync1.owl-theme .owl-next {
  right: 10px;
}







    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    
    

        
5
    
    

        
6
    
    

        
7
    
    

        
8
    



    

        
1
    
    

        
2
    
    

        
3
    
    

        
4
    
    

        
5
    
    

        
6
    
    

        
7
    
    

        
8
    






  UPD получить индекс по клику.

Как вызвать fancybox по двойному клику и запретить по одинарному?

Есть OwlCarousel с фотографиями, при нажатии на которые по двойному клику должна открываться галерея fancybox Дело в том, что галерея открывается по умолчанию по одинарному клику. А иногда даже просто при попытке сделать свайп карусели открывается модальное окно, а этого не должно быть. Хочу запретить открывать фансибокс по одинарному клику, и слушать двойной. Могу отменить первый клик, двойной происходит, но фансибокс не определяется..:
function init() { initFancybox(); initGallerySlider(); } window.onload = init; function initGallerySlider() { $('.gallery').owlCarousel({ loop: true, margin: 0, autoWidth: true }); } function initFancybox() { $(document).on('fancybox.init', '.fancybox', function() { var defaults = { maxWidth: 994, autoResize: true, padding: 0, helpers: { media: {}, overlay: {} } }, $el = $(this), group = $el.attr('data-fancybox-group'), options = eval('[' + $el.data('fancybox-options') + ']')[0]; if (group) $el = $('[data-fancybox-group="' + group + '"]'); $.extend(defaults, options); $el.fancybox(defaults); }); $('.fancybox').trigger('fancybox.init'); } $('[data-fancybox="gallery"]').click(function(e) { e.preventDefault(); }); $('[data-fancybox="gallery"]').dblclick(function() { $(this).fancybox(); }); .gallery__item { display: block; height: 200px; width: 200px; background-size: cover; }

Ответ

Добавил функцию prepairGallery(), которая собирает галерею и правильным образом запускает по двойному клику, отменяя клик одинарный.
function init() { initFancybox(); initGallerySlider(); prepairGallery(); } window.onload = init; function initGallerySlider() { $('.gallery').owlCarousel({ loop: true, margin: 0, autoWidth: true }); } function initFancybox() { $(document).on('fancybox.init', '.fancybox', function() { var defaults = { maxWidth: 994, autoResize: true, padding: 0, helpers: { media: {}, overlay: {} } }, $el = $(this), group = $el.attr('data-fancybox-group'), options = eval('[' + $el.data('fancybox-options') + ']')[0]; if (group) $el = $('[data-fancybox-group="' + group + '"]'); $.extend(defaults, options); $el.fancybox(defaults); }); $('.fancybox').trigger('fancybox.init'); } var gallery = []; function prepairGallery() { $(".gallery__item").each(function(i) { /* собираем галерею */ gallery.push({ src: this.href }); $(this).on({ /* отменяем одинарный клик */ click: function(event) { event.preventDefault(); }, /* подключаем двойной клик */ dblclick: function(event) { /* открываем собранную галерею на заданном индексе */ $.fancybox.open(gallery, {padding: 0}, i); } }); }); } .gallery__item { display: block; height: 200px; width: 200px; background-size: cover; }