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