FancyBoxVersion3/index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xZoom</title>
<link type="text/css" rel="stylesheet" media="all" href="https://unpkg.com/xzoom/dist/xzoom.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.1/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.1/jquery.fancybox.min.js"></script>

<script type="text/javascript" src="https://unpkg.com/xzoom/dist/xzoom.min.js"></script>
<script type="text/javascript">
(function ($) {
    $(document).ready(function() {

        //Integration with FancyBox 3 plugin
        $(".xzoom, .xzoom-gallery").xzoom();

        //Integration with fancybox version 3 plugin
        $(".xzoom:first").bind('click', function(event) {
            var xzoom = $(this).data('xzoom');
            xzoom.closezoom();
            var i, images = new Array();
            var gallery = xzoom.gallery().ogallery;
            var index = xzoom.gallery().index;
            for (i in gallery) {
                images[i] = {src: gallery[i]};
            }
            $.fancybox.open(images, {loop: false}, index);
            event.preventDefault();
        });
    });
})(jQuery);
</script>
</head>
<body>
    <div style="text-align:center;">
        <div style="border:1px solid #ccc; display:inline-block; line-height:0;">
            <img class="xzoom" src="gallery/preview/01_b_car.jpg" xoriginal="gallery/original/01_b_car.jpg" />
        </div>
        
        <div style="margin-top:10px">
            <a href="gallery/original/01_b_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/thumbs/01_b_car.jpg" xpreview="gallery/preview/01_b_car.jpg" />
            </a>

            <a href="gallery/original/02_o_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/thumbs/02_o_car.jpg" xpreview="gallery/preview/02_o_car.jpg" />
            </a>

            <a href="gallery/original/03_r_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/preview/03_r_car.jpg" />
            </a>

            <a href="gallery/original/04_g_car.jpg" style="display: inline-block;">
                <img class="xzoom-gallery" width="68" src="gallery/preview/04_g_car.jpg" />
            </a>
        </div>
    </div>
</body>
</html>