fancybox.js

export function(parentSelector, selector, prevArrowImg, nextArrowImg) {
    $(parentSelector).on('click', selector, function(e){
        e.preventDefault();
        let link = $(this);
        let prev = $(this).parent().prev().find('a');
        let next = $(this).parent().next().find('a');
        let content = $('<div class="clearfix"></div>').css({
            'width': '900px',
            'max-width':'calc(100vw - 100px)',
            'position': 'relative'
        }).append(
            $('<div></div>').css({
                'float': 'left',
                'max-height': '100%',
                'width': '600px',
                'max-width': '66%'
            }).append(
                $('<img>').attr('src', link.attr('href')).css({
                    'display': 'block',
                    'max-height': '100%'
                })
            )
        ).append(
            $('<div></div>').css({
                'float': 'left',
                'width': '300px',
                'max-width:': '33%',
                'padding': '0 10px',
                'margin': '5px 0',
                'text-align': 'center',
                'font-size': '17px',
                'font-weight': '600'
            }).html(link.data('caption'))
        ).append(
            $('<div></div>').css({
                'float': 'left',
                'width': '300px',
                'max-width:': '33%',
                'padding': '0 10px',
                'margin': '5px 0',
                'font-size': '15px'
            }).html(link.data('description'))
        );

        if(prev.length > 0) {
            content.append(
                $('<div></div>').css({
                    'position': 'absolute',
                    'left': '0',
                    'top': '0',
                    'height': '100%',
                    'width': '40px',
                    'cursor': 'pointer'
                }).on('mouseenter', function(){
                    $(this).css({
                        'background': `rgba(0,0,0,0.3) url(${prevArrowImg}) no-repeat center`
                    });
                }).on('mouseleave', function(){
                    $(this).css({
                        'background': 'none'
                    });
                }).on('click', function(e){
                    e.preventDefault();
                    $.fancybox.close();
                    prev.click();
                })
            );
        }

        if(next.length > 0) {
            content.append(
                $('<div></div>').css({
                    'position': 'absolute',
                    'right': '0',
                    'top': '0',
                    'height': '100%',
                    'width': '40px',
                    'cursor': 'pointer'
                }).on('mouseenter', function(){
                    $(this).css({
                        'background': `rgba(0,0,0,0.3) url(${nextArrowImg}) no-repeat center`
                    });
                }).on('mouseleave', function(){
                    $(this).css({
                        'background': 'none'
                    });
                }).on('click', function(e){
                    e.preventDefault();
                    $.fancybox.close();
                    next.click();
                })
            );
        }
        $.fancybox({
            content: content,
            padding: 0
        });
    });
}