Gallery Order on Mobile

Description

• change gallery images order on mobile
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, hover on top right of Gallery > Click EDIT SECTION

#1.2. at Gallery > Anchor Link > enter word: mobile-gallery

#1.3. Hover on top right of Gallery > Click EDIT GALLERY

#1.4. Enter your desired order in Captions, wrap it with # # symbol

something like this

or like this

or this

#1.5. Hover on Page where you use Gallery > Click Gear icon

#1.6. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c06v3 Gallery Order on Mobile -->
<script>
window.GalleryOrderConfig = {
  sectionSelector: 'section[id*="mobile-gallery"]',
  itemSelector: '.gallery-grid-item',
  imageSelector: 'img',
  numberPattern: '#(\\d+)#',
  mobileQuery: '(max-width: 767px)',
  unmatchedOrder: 9999
};
</script>

<script>
(function () {
  var cfg = window.GalleryOrderConfig;
  if (!cfg) return;

  var mql = window.matchMedia(cfg.mobileQuery);
  var re = new RegExp(cfg.numberPattern);

  function getOrder(item) {
    var img = item.querySelector(cfg.imageSelector);
    var alt = img ? (img.getAttribute('alt') || '') : '';
    var m = alt.match(re);
    return m ? parseInt(m[1], 10) : cfg.unmatchedOrder;
  }

  function apply() {
    var isMobile = mql.matches;
    var items = document.querySelectorAll(cfg.sectionSelector + ' ' + cfg.itemSelector);
    for (var i = 0; i < items.length; i++) {
      items[i].style.order = isMobile ? String(getOrder(items[i])) : '';
    }
  }

  if (mql.addEventListener) mql.addEventListener('change', apply);
  else if (mql.addListener) mql.addListener(apply);

  window.addEventListener('load', apply);
  window.addEventListener('mercury:load', apply);
})();
</script>

#2. Customize

nothing now

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block in current page

Add this code into Markdown

<script>
window.GalleryOrderConfig = {
  sectionSelector: 'section[id*="mobile-gallery"]',
  itemSelector: '.gallery-grid-item',
  imageSelector: 'img',
  numberPattern: '#(\\d+)#',
  mobileQuery: '(max-width: 767px)',
  unmatchedOrder: 9999
};
</script>

<script>
(function () {
  var cfg = window.GalleryOrderConfig;
  if (!cfg) return;

  var mql = window.matchMedia(cfg.mobileQuery);
  var re = new RegExp(cfg.numberPattern);

  function getOrder(item) {
    var img = item.querySelector(cfg.imageSelector);
    var alt = img ? (img.getAttribute('alt') || '') : '';
    var m = alt.match(re);
    return m ? parseInt(m[1], 10) : cfg.unmatchedOrder;
  }

  function apply() {
    var isMobile = mql.matches;
    var items = document.querySelectorAll(cfg.sectionSelector + ' ' + cfg.itemSelector);
    for (var i = 0; i < items.length; i++) {
      items[i].style.order = isMobile ? String(getOrder(items[i])) : '';
    }
  }

  if (mql.addEventListener) mql.addEventListener('change', apply);
  else if (mql.addListener) mql.addListener(apply);

  window.addEventListener('load', apply);
  window.addEventListener('mercury:load', apply);
})();
</script>