Ekko Lightbox for Bootstrap and WordPress Example jQuery

ekko-lightbox-jquery-example.js

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');
    });
]);