https://www.tibnor.dk/_ui/tibnor/common/js/acc.imagegallery.js

1ACC.imagegallery = {
2
3    _autoload: [
4        "bindImageGallery"
5    ],
6
7    hybrisImageDataToGalleryImages: function(images) {
8        return images.filter(image => image.galleryIndex !== null)
9            .reduce((accumulator, image) => {
10                if (!accumulator[image.galleryIndex]) {
11                    // init the object if it doesn't exist
12                    accumulator[image.galleryIndex] = {
13                        galleryIndex: image.galleryIndex,
14                        altText: image.altText
15                    };
16                }
17                accumulator[image.galleryIndex][image.format] = image.url;
18                return accumulator;
19            }, []);
20    },
21
22    updateGallery: function(images) {
23        if (images) {
24            let galleryImages = this.hybrisImageDataToGalleryImages(images);
25            let template = Handlebars.compile($('#galleryTemplate').html());
26            let galleryImagesHtml = template({images: galleryImages, count: galleryImages.length});
27            $(".js-gallery").html(galleryImagesHtml);
28            ACC.imagegallery.bindImageGallery();
29        }
30    },
31
32    bindImageGallery: function () {
33
34        $(".js-gallery").each(function () {
35
36            let $image = $(this).find(".js-gallery-image");
37            let $carousel = $(this).find(".js-gallery-carousel");
38
39            $image.owlCarousel({
40                singleItem: true,
41                pagination: true,
42                navigation: true,
43                lazyLoad: true,
44                navigationText: [$("<span>").addClass("glyphicon glyphicon-chevron-left"), $("<span>").addClass("glyphicon glyphicon-chevron-right")],
45                afterAction: function () {
46                    ACC.imagegallery.syncPosition($image, $carousel, this.currentItem);
47                },
48                startDragging: function () {
49                },
50                afterLazyLoad: function (e) {
51
52                    let b = $image.data("owlCarousel") || {};
53                    if (!b.currentItem) {
54                        b.currentItem = 0;
55                    }
56
57                    $('.js-m-popup').magnificPopup({
58                        type: 'image',
59                        gallery: {
60                            enabled: true
61                        }
62                    });
63                }
64            });
65
66
67            $carousel.owlCarousel({
68                navigation: true,
69                navigationText: [$("<span>").addClass("glyphicon glyphicon-chevron-left"), $("<span>").addClass("glyphicon glyphicon-chevron-right")],
70                pagination: false,
71                items: 2,
72                itemsDesktop: [5000, 3],
73                itemsDesktopSmall: [1200, 3],
74                itemsTablet: [768, 3],
75                itemsMobile: [480, 3],
76                lazyLoad: true,
77                afterAction: function () {
78
79                }
80            });
81
82
83            $carousel.on("click", "a.item", function (e) {
84                e.preventDefault();
85                $image.trigger("owl.goTo", $(this).parent(".owl-item").data("owlItem"));
86            });
87        });
88    },
89
90
91    syncPosition: function ($image, $carousel, currentItem) {
92        $carousel.trigger("owl.goTo", currentItem);
93    }
94};