重新定位或隐藏图库导航箭头

由 发布于

我正在重新学习HTML5和CSS技能，这是我第一次使用StackOverFlow。我有一个“灯箱型”照片库，可以在笔记本电脑上查看时在正确的位置显示左侧和右侧导航箭头，即，向左和向右偏左的箭头，以及向右和向右向右下方的箭头。但是，在Ipad或手机上（至少是我所见过的）查看时，箭头会出现在左上角和右上角，而不是下半部。这样做的问题是，右手现在与右上角的“ X”关闭按钮重叠，并且用户很难选择向右箭头或“关闭”按钮。我已经给作者发了电子邮件，但没有回音。我在下面粘贴了CSS和JS的全部内容（很抱歉！）。谢谢。

CSS开始     / *！

    HesGallery v1.4.11

    Copyright (c) 2018-2019 Artur Medrygal <medrygal.artur@gmail.com>

    Product under MIT licence

*/

#hgallery {
  display: block;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  visibility: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  opacity: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  z-index: 99999;
}

.hg-disable-scrolling {
  overflow: hidden !important;
}

#hg-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

#hg-bg::after {
  content: '';
  position: absolute;
  display: block;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOSA2LjQxTDE3LjU5IDUgMTIgMTAuNTkgNi40MSA1IDUgNi40MSAxMC41OSAxMiA1IDE3LjU5IDYuNDEgMTkgMTIgMTMuNDEgMTcuNTkgMTkgMTkgMTcuNTkgMTMuNDEgMTJ6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPg==);
  background-position: center;
  background-size: contain;
  cursor: pointer;
  opacity: 0.8;
}

#hg-bg::after:hover {
  background-color: white;
}

#hgallery.open {
  visibility: visible !important;
  opacity: 1;
}

#hg-pic-cont {
  max-width: calc(70% - 40px);
  max-height: 90vh;
  cursor: default;
  z-index: 12;
  position: relative;
  background-color: white;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform: scale(1);
          transform: scale(1);
}

#hg-pic-cont.hg-transition {
  -webkit-transform: scale(0.1);
          transform: scale(0.1);
}

#hg-subtext {
  color: #ddd;
  font-size: 14px;
  position: absolute;
  display: block;
  left: 5px;
  top: calc(100% + 6px);
}

#hg-howmany {
  color: #aaa;
  font-size: 14px;
  position: absolute;
  display: block;
  right: 5px;
  bottom: -20px;
}

#hg-pic {
  width: auto;
  height: auto;
  min-height: 100px;
  min-width: 100px;
  max-width: 100%;
  max-height: 90vh;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  display: block;
  cursor: default;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0;

  /*    border-radius: 5px;*/
}

#hg-pic:hover {
  -webkit-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}

#hgallery button {
  position: absolute;
  display: block;
  margin: auto 0;
  width: 60px;
  height: 60px;
  z-index: 11;
  cursor: pointer;
  background-color: transparent;
  background-image: url('data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNOC41OSAxNi4zNGw0LjU4LTQuNTktNC41OC00LjU5TDEwIDUuNzVsNiA2LTYgNnoiLz4NCiAgICA8cGF0aCBkPSJNMC0uMjVoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4NCjwvc3ZnPg==');
  background-size: contain;
  border: 0;
  outline: 0;
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0.3s;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden;
}

#hgallery.open button {
  visibility: visible;
  opacity: 0.7;
}

#hgallery button:hover {
  opacity: 1;
}

#hgallery button#hg-prev {
  left: 10px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#hgallery button#hg-prev:active {
  left: 7px;
}

#hgallery button#hg-next {
  right: 10px;
}

#hgallery button#hg-next:active {
  right: 7px;
}

#hgallery #hg-prev-onpic,
#hgallery #hg-next-onpic {
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 100%;
  cursor: pointer;
}

#hgallery #hg-next-onpic {
  right: 0;
  left: auto;
  width: 66%;
}

.hg-unvisible {
  opacity: 0 !important;
  visibility: hidden;
}

@media (max-width: 1100px) {
  #hg-pic-cont {
    max-width: calc(100% - 40px);
  }
}


------------------------------------------------------------------------
JAVASCRIPT BEGIN
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

/*!

    HesGallery v1.4.11

    Copyright (c) 2018-2019 Artur Medrygal <medrygal.artur@gmail.com>

    Product under MIT licence

*/

var HesGallery = {
  options: {
    // Default settings

    // Global
    disableScrolling: false,
    hostedStyles: false,
    animations: true,
    keyboardControl: true,
    minResolution: 0,
    autoInit: true,

    // Local
    wrapAround: false,
    showImageCount: false
  },
  version: '1.4.11'
};

function HesSingleGallery(index, root) {
  var _this = this;

  this.root = root;
  this.index = index;
  this.imgPaths = [];
  this.subTexts = [];
  this.altTexts = [];

  this.options = {};

  var gallery = document.getElementsByClassName('hes-gallery')[this.index];

  this.options.wrapAround = gallery.hasAttribute('data-wrap') ? gallery.dataset.wrap == 'true' : this.root.options.wrapAround;
  this.options.showImageCount = gallery.hasAttribute('data-img-count') ? gallery.dataset.imgCount == 'false' : this.root.options.showImageCount;

  var disabledCount = 0;
  gallery.querySelectorAll('img').forEach(function (image, i) {
    if (image.hasAttribute('data-disabled')) disabledCount++;else {
      if (image.hasAttribute('data-fullsize')) _this.imgPaths.push(image.dataset.fullsize || '');else _this.imgPaths.push(image.src || '');
      _this.subTexts.push(image.dataset.subtext || '');
      _this.altTexts.push(image.alt || '');

      // image.setAttribute('onclick', `HesGallery.show(${this.index},${i - disabledCount})`)
      image.onclick = function () {
        _this.root.show(_this.index, i - disabledCount);
      };
    }
  });

  this.count = this.imgPaths.length;
}

HesGallery.setOptions = function () {
  var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

  for (var key in values) {
    this.options[key] = values[key];
  }
};

HesGallery.init = function (options) {
  var _this2 = this;

  this.setOptions(options);

  if (!this.executed) this.createDOM();

  if (this.options.animations) this.elements.pic_cont.classList = 'hg-transition';else this.elements.pic_cont.classList = '';

  this.count = document.querySelectorAll('.hes-gallery').length;

  this.galleries = [];

  for (var i = 0; i < this.count; i++) {
    // Creates a galleries
    this.galleries[i] = new HesSingleGallery(i, this);
  }

  // KeyDown event listener
  if (this.options.keyboardControl && !this.keydownEventListener) {
    addEventListener('keydown', function (_ref) {
      var keyCode = _ref.keyCode;

      if (keyCode == 39 && _this2.open && _this2.options.keyboardControl) _this2.next();
      if (keyCode == 37 && _this2.open && _this2.options.keyboardControl) _this2.prev();
      if (keyCode == 27 && _this2.open && _this2.options.keyboardControl) _this2.hide();
    });
    this.keydownEventListener = true;
  }

  return 'HesGallery initiated!';
};

HesGallery.createDOM = function () {
  var _this3 = this;

  // Creates DOM Elements for gallery
  this.elements = {};

  if (this.options.hostedStyles) document.head.innerHTML += "<link rel='stylesheet' href='https://unpkg.com/hes-gallery/dist/hes-gallery.min.css'>";

  var gal = document.createElement('div');
  gal.id = 'hgallery';
  gal.setAttribute('style', 'visibility:hidden;');

  this.elements.galery = gal; // Whole gallery

  this.elements.galery.innerHTML += '\n    <div id=\'hg-bg\'></div>\n    <div id=\'hg-pic-cont\'>\n      <img id=\'hg-pic\' />\n      <div id=\'hg-prev-onpic\'></div>\n      <div id=\'hg-next-onpic\'></div>\n      <div id=\'hg-subtext\'></div>\n      <div id=\'hg-howmany\'></div>\n    </div>\n    <button id=\'hg-prev\'></button>\n    <button id=\'hg-next\'></button>\n  ';

  document.body.appendChild(gal);

  this.elements.b_prev = document.getElementById('hg-prev');
  this.elements.b_next = document.getElementById('hg-next');

  this.elements.pic_cont = document.getElementById('hg-pic-cont');

  this.elements.b_next_onpic = document.getElementById('hg-next-onpic');
  this.elements.b_prev_onpic = document.getElementById('hg-prev-onpic');

  this.elements.b_prev.onclick = this.elements.b_prev_onpic.onclick = function () {
    _this3.prev();
  };

  this.elements.b_next.onclick = this.elements.b_next_onpic.onclick = function () {
    _this3.next();
  };

  document.getElementById('hg-bg').onclick = function () {
    _this3.hide();
  };

  this.executed = true;
};

HesGallery.show = function (g, i) {
  if (innerWidth < this.options.minResolution) return false; // If browser width is less than min resolution in settings

  this.currentImg = i;
  this.currentGal = g;

  this.open = true;

  if (this.options.animations || this.elements.pic_cont.classList == 'hg-transition') this.elements.pic_cont.classList.remove('hg-transition');

  document.getElementById('hg-pic').setAttribute('src', this.galleries[g].imgPaths[i]); // Sets the path to image

  document.getElementById('hg-pic').alt = this.galleries[g].altTexts[i]; // Sets alt attribute

  this.elements.galery.classList.add('open');

  document.getElementById('hg-subtext').innerHTML = this.galleries[g].subTexts[i];

  if (this.galleries[this.currentGal].options.showImageCount && this.galleries[this.currentGal].imgPaths.length != 1) document.getElementById('hg-howmany').innerHTML = this.currentImg + 1 + '/' + this.galleries[g].count;else document.getElementById('hg-howmany').innerHTML = '';

  // Visibility of next/before buttons in gallery
  if (this.galleries[this.currentGal].imgPaths.length == 1) {
    // One image in gallery
    this.elements.b_prev.classList = 'hg-unvisible';
    this.elements.b_prev_onpic.classList = 'hg-unvisible';
    this.elements.b_next.classList = 'hg-unvisible';
    this.elements.b_next_onpic.classList = 'hg-unvisible';
  } else if (this.currentImg + 1 == 1 && !this.galleries[this.currentGal].options.wrapAround) {
    // First photo
    this.elements.b_prev.classList = 'hg-unvisible';
    this.elements.b_prev_onpic.classList = 'hg-unvisible';

    this.elements.b_next.classList = '';
    this.elements.b_next_onpic.classList = '';
  } else if (this.currentImg + 1 == this.galleries[this.currentGal].count && !this.galleries[this.currentGal].options.wrapAround) {
    // Last photo
    this.elements.b_next.classList = 'hg-unvisible';
    this.elements.b_next_onpic.classList = 'hg-unvisible';

    this.elements.b_prev.classList = '';
    this.elements.b_prev_onpic.classList = '';
  } else {
    //Dowolne zdjęcie
    this.elements.b_next.classList = '';
    this.elements.b_next_onpic.classList = '';

    this.elements.b_prev.classList = '';
    this.elements.b_prev_onpic.classList = '';
  }

  if (this.options.disableScrolling) document.body.classList += ' hg-disable-scrolling'; // Disable scroll
};

HesGallery.hide = function () {
  if (this.options.animations) this.elements.pic_cont.classList.add('hg-transition');

  this.elements.galery.classList.remove('open');
  this.open = false;
  if (this.options.disableScrolling) document.body.classList.remove('hg-disable-scrolling'); // Enable scroll
};

HesGallery.next = function () {
  if (this.galleries[this.currentGal].options.wrapAround && this.currentImg == this.galleries[this.currentGal].count - 1) this.show(this.currentGal, 0);else if (this.currentImg + 1 < this.galleries[this.currentGal].count) this.show(this.currentGal, this.currentImg + 1);
};

HesGallery.prev = function () {
  if (this.galleries[this.currentGal].options.wrapAround && this.currentImg == 0) this.show(this.currentGal, this.galleries[this.currentGal].count - 1);else if (this.currentImg + 1 > 1) this.show(this.currentGal, this.currentImg - 1);
};

document.addEventListener('DOMContentLoaded', function () {
  if (HesGallery.options.autoInit) HesGallery.init();
});

if ('object' == (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) && 'undefined' != typeof module) module.exports = HesGallery;

// NodeList polyfill
if (typeof NodeList !== 'undefined' && NodeList.prototype && !NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}