Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove stoppropagation on Anchors #271

Closed
psweeting1 opened this issue Sep 13, 2018 · 3 comments
Closed

Remove stoppropagation on Anchors #271

psweeting1 opened this issue Sep 13, 2018 · 3 comments

Comments

@psweeting1
Copy link

psweeting1 commented Sep 13, 2018

Feature request.
version: 3.2.3

Please allow anchors <a> to be clickable within the slider, I really love Glidejs but I can't use Fancybox because there is a stoppropagation on the slider.

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide">
         <a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
      </li>
      <li class="glide__slide">
         <a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
      </li>
    </ul>
  </div>
</div>

This just seems so silly but I understand why due to dragging and touch actions, but it doesn't allow anchors to work even when it's not moving / sliding. Please if it's possible add an option that allows clicking as an for Anchors, at the moment I'm having to use hacks to by pass it, which... is annoying.

@fatihhayri
Copy link

solution: #222 (comment)

@drewrawitz
Copy link

@psweeting1 I'm not sure if this is still an issue for you, but I ran into the exact same problem and was able to fix this with the following code:

import Glide from '@glidejs/glide';
import $ from 'jquery';

$(function() {
  if ($('.glide').length > 0) {
    const glide = new Glide('.glide', {
      type: 'carousel',
      perView: 2,
      gap: 20,
      peek: { before: 0, after: 200 }
    });

    glide.on('mount.after', function() {
      // initialize fancybox on our main slides
      $('.glide__slide:not(.glide__slide--clone) [data-fancybox]').fancybox({
        buttons: [
          'zoom',
          'slideShow',
          'thumbs',
          'close'
        ]
      });

      // click event for cloned slides
      $('.glide__slide--clone a[data-fancybox]').on('click', function(e) {
        const thumb = $(this).attr('data-thumb');

        // find the "real" slide with this exact thumbnail and trigger a click event
        $(`.glide__slide:not(.glide__slide--clone) [data-thumb="${thumb}"]`).trigger('click');

        e.preventDefault();
      });
    });

    glide.mount();
  }
});

Hopefully that helps you or someone else experiencing the same thing.

@jedrzejchalubek
Copy link
Member

#312

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants