Skip to content

Instantly share code, notes, and snippets.

@shaneriley
Created August 6, 2020 19:21
Show Gist options
  • Save shaneriley/2368cd120323bde6b098c995a0bf2e28 to your computer and use it in GitHub Desktop.
Save shaneriley/2368cd120323bde6b098c995a0bf2e28 to your computer and use it in GitHub Desktop.
HG101 modal image slideshow
var $ = jQuery;
var $galleryThumbnails = $('.left-sidebar-gallery')
$galleryThumbnails.off('.gallery');
$('#gallery_modal').off('.gallery').remove();
$(document).off('.gallery');
var slidesCount = $galleryThumbnails.find('a').length;
var $modal = $('<div />', {
id: 'gallery_modal',
style: `
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1001;
background: rgba(0, 0, 0, .7) !important;
`,
html: `
<div style="
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
padding: 16px;
min-width: 80px;
min-height: 80px;
transform: translate(-50%, -50%);
background: #fff url('https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200.gif') 50% 50% no-repeat !important;
"><span></span></div>
`
}).on('click.gallery', (e) => {
if (e.currentTarget === $modal[0]) {
$modal.css('display', 'none');
}
}).appendTo(document.body);
var $next = $('<div />', {
style: `
position: absolute;
top: 50%;
right: 0;
z-index: 1;
transform: translateY(-50%);
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #999 !important;
border-radius: 20px 0 0 20px;
background: #fff !important;
cursor: pointer;
`,
text: '➤'
}).on('click.gallery', (e) => {
changeSlide(1);
return false;
}).appendTo($modal.find('> div'));
var $prev = $next.clone();
$prev.css({
right: 'auto',
left: 0,
transform: 'translateY(-50%) rotate(180deg)'
}).off('.gallery').on('click.gallery', (e) => {
changeSlide();
return false;
}).appendTo($modal.find('> div'));
var showImage = (src) => {
$modal.css('display', 'block').find('span').html($('<img />', {
src,
style: `
display: block;
max-width: 85vw;
max-height: 85vh;
`
}));
};
var changeSlide = (forward) => {
const imgSrc = $modal.find('img').attr('src');
const $currentSlide = $galleryThumbnails.find(`a[href="${imgSrc}"]`);
if (forward) {
const $next = $currentSlide.next('a');
if ($next.length) {
showImage($next.attr('href'));
}
}
else {
const $prev = $currentSlide.prev('a');
if ($prev.length) {
showImage($prev.attr('href'));
}
}
};
$('.left-sidebar-gallery').on('click.gallery', 'a', (e) => {
e.preventDefault();
showImage(e.currentTarget.href);
});
$(document).on('keyup.gallery', (e) => {
const keyActions = {
Escape: () => $modal.css('display', 'none'),
ArrowRight: () => changeSlide(1),
ArrowLeft: () => changeSlide()
}
keyActions[e.key] && keyActions[e.key]();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment