Skip to content

Instantly share code, notes, and snippets.

@utopianfool
Created September 22, 2020 05:24
Show Gist options
  • Save utopianfool/9c86b660046fba5319be4ae43f9ac124 to your computer and use it in GitHub Desktop.
Save utopianfool/9c86b660046fba5319be4ae43f9ac124 to your computer and use it in GitHub Desktop.
Ekko Lightbox for Bootstrap and WordPress Example jQuery
jQuery(function($){
// Ekko lightbox attribute data-toggle to gallery links
$('.gallery-item').find('a').attr('data-toggle', 'lightbox');
$('.gallery-item').find('a').attr('data-gallery', 'gallery');
$('.gallery-item').find('a').attr('data-type', 'image');
// enable ekko lightbox on page
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({
alwaysShowClose: true,
});
});
// Replace gallery image with background imag in a tag for apect ratio
$('.gallery-icon a').each(function(){
var src = $(this).children('img').attr('src');
$(this).css('background-image', 'url(' + src + '');
});
// Add download image button to each gallery image
$('.gallery-icon a').each(function(){
var title = '';
var savebutton = '';
var src = '';
src = $(this).children('img').attr('src');
title = $(this).children('img').attr('title');
savebutton += '<div class="save-wrapper"><a href="'+ src +'" download="'+ title +'" type="button" class="image-save-button">Download</a></div>';
$(this).prepend(savebutton);
});
// Show download button on hover of image
$('.gallery-icon a').hover(function(){
$(this).addClass('image-hovered');
$(this).children('.save-wrapper').addClass('image-hovered');
}, function(){
$(this).removeClass('image-hovered');
$(this).children('.save-wrapper').removeClass('image-hovered');
});
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment