magnificPopup

    $('.gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
                //return //item.el.attr('title');
                var $gallery = $('.gallery');
                var $result = '';
                if ($gallery.find('li').length>0) {
                    $result = '<div class="mfp-pager">' +
                        '<div class="arrow_prev">' +
                            '<button type="button" class="prev arrow" onclick="javascript:$(\'.gallery\').magnificPopup(\'prev\');return false;">Previous</button>' +
                        '</div>' +
                        '<div class="dots">' +
                            '<ul class="dots" style="display: inline-block;">';
                    for (var i=0; i<$gallery.find('li').length; i++) {
                        var $cl_active = '';
                        if (item.index == i) $cl_active = ' class="active"'; else $cl_active = '';
                        var $thumb = $gallery.find('li:eq('+i+')').find('img').attr('src');
                        $result += '<li'+$cl_active+'>' +
              '<img class=\'pagination\' src=\''+$thumb+'\' onclick="javascript:$(\'.gallery\').magnificPopup(\'goTo\', '+i+');return false;">'
                                // '<button type="button" onclick="javascript:$(\'.gallery\').magnificPopup(\'goTo\', '+i+');return false;">' + i + '</button>'
              +
                            '</li>';
                    }
                    $result += '</ul>' +
                        '</div>' +
                        '<div class="arrow_next">' +
                            '<button type="button" class="next arrow" onclick="javascript:$(\'.gallery\').magnificPopup(\'next\');return false;">Next</button>' +
                        '</div>' +
                    '</div>';
                }
                return $result;
            }
        }
    });