Untitled

$(document).ready(function(){
var pswpElement = $('.pswp')[0];

var items = [
    {
        src: 'my-file-1.jpg',
        w: 2240,
        h: 3968
    },
    {
        src: 'my-file-2.jpg',
        w: 960,
        h: 720
    },
];

var options = {
    maxSpreadZoom: 1.5,
    getDoubleTapZoom: function(isMouseClick, item){return item.initialZoomLevel < 0.7 ? 1 : 1.5;},
    index: 0,
    pinchToClose: false,
    closeOnScroll: false,
    closeOnVerticalDrag: false,
    escKey: false,
    history: false,

};

var gallery = new PhotoSwipe(pswpElement, false, items, options);

gallery.init();
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="photoswipe.css">
    <link rel="stylesheet" href="default-skin/default-skin.css">
    <script src="jquery-3.4.0.min.js"></script>
    <script src="index.js"></script>
    <script src="photoswipe.min.js"></script>
    <script src="photoswipe-ui-default.min.js"></script>
</head>

<body>

    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
        </div>
    </div>


</body>
</html>