Prev/Next navigation on mobile devices

[chupzzz]

As for October 2018 there's still no solution for next/prev navigation on mobiles. In many cases this makes modal almost unusable so I created my own solution and want to share it.

It's based on native events of this plugin and quite easy. Just adds arrows to the header:

Add this JS to yours:

and change selector for your modal

$(document).on('opening', '.iziModal', function (e) {
      var isMobile = (/Mobi/.test(navigator.userAgent));
      if (!isMobile) return false;

      var m = $(this);
      var changed_mark = 'buttons_added';

      // Prevent multiple append
      if (m.data(changed_mark)) return false;

      var g = m.iziModal('getGroup');
      // Check for prev
      var prev_class = g.index === 0 ? ' dis' : '';
      var prev_state = g.index === 0 ? '' : 'data-izimodal-prev=""';
      // Check for next
      var has_next = (g.index + 1) < g.ids.length;
      var next_class = has_next ? '' : ' dis';
      var next_state = has_next ? 'data-izimodal-next=""' : '';

      // Append buttons
      var p = '<a href="javascript:void(0)" class="iziModal-button iziModal-button-prev'+ prev_class +'" '+ prev_state +'></a>';
      var n = '<a href="javascript:void(0)" class="iziModal-button iziModal-button-next'+ next_class +'" '+ next_state +'></a>';
      $('.iziModal-header-buttons', m).append(n + p);

      // Mark as changed
      m.data(changed_mark, true);
    });

Add up some CSS (and change it at your flavor):

@media screen and (max-device-width: 767px) {
  .iziModal .iziModal-header {
    padding: 15px 15px 17px !important;
  }
  .iziModal .iziModal-header .iziModal-button-prev,
  .iziModal .iziModal-header .iziModal-button-next {
    -webkit-background-size: auto 120% !important;
    background-size: auto 120% !important;
    margin-right: 1rem;
    opacity: 0.8 !important;
  }
  .iziModal .iziModal-header .iziModal-button-prev.dis,
  .iziModal .iziModal-header .iziModal-button-next.dis {
    opacity: 0.3 !important;
  }
  .iziModal .iziModal-header .iziModal-button-prev {
    background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDM3MC44MTQgMzcwLjgxNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzcwLjgxNCAzNzAuODE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBvbHlnb24gcG9pbnRzPSIyOTIuOTIsMjQuODQ4IDI2OC43ODEsMCA3Ny44OTUsMTg1LjQwMSAyNjguNzgxLDM3MC44MTQgMjkyLjkyLDM0NS45NjEgMTI3LjYzOCwxODUuNDAxICAgIiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==") no-repeat 50% 50%;
  }
  .iziModal .iziModal-header .iziModal-button-next {
    background: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3OC40NDggNDc4LjQ0OCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDc4LjQ0OCA0NzguNDQ4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCI+CjxnPgoJPGc+CgkJPHBvbHlnb24gcG9pbnRzPSIxMzEuNjU5LDAgMTAwLjQ5NCwzMi4wMzUgMzEzLjgwNCwyMzkuMjMyIDEwMC40OTQsNDQ2LjM3MyAxMzEuNjUsNDc4LjQ0OCAgICAgMzc3Ljk1NCwyMzkuMjMyICAgIiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==") no-repeat 50% 50%;
  }
}

Hope this feature will be in the plugin itself one day. 🙏

[krkrkim]

Thank you~ Good ~