JavaScript галерея закрывается (вместо l oop), когда достигнут конец / начало галереи - PullRequest
Новая
       24

JavaScript галерея закрывается (вместо l oop), когда достигнут конец / начало галереи

1 голос
/ 18 января 2020

Пожалуйста, смотрите заголовок. Я хотел бы добиться следующего:

1. На мобильном телефоне: В PhotoSwipe при обнаружении прокрутки для просмотра следующего изображения (при уже просмотре последнее изображение) , Закрыть PhotoSwipe.

2. На мобильном телефоне: То же, что и выше, но при просмотре 1-го изображения. Если вы уже просматриваете 1-е изображение и проводите пальцем, чтобы показать, что предыдущее изображение обнаружено, закройте PhotoSwipe.

3. На рабочем столе: Используя приведенный ниже код, когда 1-е изображение при просмотре, кнопка со стрелкой влево PhotoSwipe UI скрывается (так как предыдущее изображение не отображается) и клавиша со стрелкой влево на клавиатуре отключается. Цель здесь заключается в том, чтобы при просмотре первого изображения и нажатии клавиши со стрелкой влево на клавиатуре вместо того, чтобы ничего не делать (или переходить к последнему изображению), галерея PhotoSwipe закрывается сама.


Здесь jsfiddle, показывающий текущее состояние кода:
https://jsfiddle.net/bezq08oc/



Возможно, подход может состоять в том, чтобы снова включить l oop и в его место для ввода кода, чтобы закрыть галерею, а не зацикливать ее? 

loop: false



Я использую код ниже, чтобы:

  • Скрыть ненужную стрелку при просмотре первого или последнего изображения.
  • Отключение клавиш со стрелками влево и вправо на клавиатуре при просмотре первого или последнего изображения. 
This will hide the left arrow on first image and right arrow on last image.
It will also work when the keyboard left and right keys are used to change the images.

// Initialize PhotoSwipe
    var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
    gallery.init();


// disable html-arrows control (Hide left arrow on first image and right arrow on last image)
// Code below works only when PhotoSwipe Gallery loads     
    gallery.getCurrentIndex() === 0 ? $('.pswp__button--arrow--left').hide() : $('.pswp__button--arrow--left').show();
    gallery.getCurrentIndex()+1 === gallery.items.length ? $('.pswp__button--arrow--right').hide() : $('.pswp__button--arrow--right').show();

// disable html-arrows control (Hide left arrow on first image and right arrow on last image)
// Code below works when PhotoSwipe Gallery is already opened
    gallery.listen('beforeChange', function() {
        gallery.getCurrentIndex() === 0 ? $('.pswp__button--arrow--left').hide() : $('.pswp__button--arrow--left').show();
        gallery.getCurrentIndex()+1 === gallery.items.length ? $('.pswp__button--arrow--right').hide() : $('.pswp__button--arrow--right').show();
      }
    );

// disable keys left+right control
    $('body').keydown(function(e) {
        // key left
        if ((e.keyCode || e.which) == 37) {
            if (gallery.getCurrentIndex() === 0) {
                gallery.options.arrowKeys = false;
            } else {
                gallery.options.arrowKeys = true;
            }
        }
        // key right
        if ((e.keyCode || e.which) == 39) {
            if (gallery.getCurrentIndex()+1 === gallery.items.length) {
                gallery.options.arrowKeys = false;
            } else {
                gallery.options.arrowKeys = true;
            }
        }
    });
...