Prev/Next navigation on mobile devices
chupzzz opened this issue · 1 comments
chupzzz commented
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 commented
Thank you~
Good ~