{"version":3,"sources":["webpack:///resources/js/src/app/components/item/ItemImageCarousel.vue","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?55b3","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?df97","webpack:///./resources/js/src/app/components/item/ItemImageCarousel.vue?00e4"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGA;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA,6BADA;AAGA;AACA,iBACA;AACA,kBADA;AAEA;AAFA,KAFA;AAMA,sBACA;AACA,kBADA;AAEA;AAFA,KAPA;AAWA,gBACA;AACA,mBADA;AAEA;AAFA,KAZA;AAgBA,cACA;AACA,mBADA;AAEA;AAFA,KAjBA;AAqBA,oBACA;AACA,kBADA;AAEA;AAFA,KAtBA;AA0BA,gBACA;AACA,kBADA;AAEA;AAFA,KA3BA;AA+BA,cACA;AACA,kBADA;AAEA;AAFA;AAhCA,GAHA;AAyCA;AACA;AACA;AADA;AADA,GAzCA;AA+CA,MA/CA,kBA+CA;AACA;AACA,oBADA;AAEA,wBAFA;AAGA,wBAHA;AAIA,mBAJA;AAKA,wBALA;AAMA,wBANA;AAOA;AAPA;AASA,GAzDA;AA2DA,YACA;AACA,WADA,qBACA;AACA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA,OAFA,MAEA;AACA;AACA,OAFA,MAEA;AACA;AACA;AACA,KAjBA;AAkBA,eAlBA,yBAkBA;AACA;AACA,KApBA;AAsBA,oBAtBA,8BAsBA;AACA;AACA,KAxBA;AA0BA,cA1BA,wBA0BA;AACA;AACA,KA5BA;AA8BA,kBA9BA,4BA8BA;AACA;AACA;;AACA,iDAHA,CAGA;AAKA;AACA;AACA;;;AAGA;AACA,KA5CA;AA8CA,gBA9CA,0BA8CA;AACA;AACA;;AAEA,iDAJA,CAIA;AAEA;AACA;AACA;;;AAEA;AACA,KAzDA;AA2DA,oBA3DA,8BA2DA;AAEA;AAEA;AACA;;AACA,iDANA,CAMA;;;AAEA;AACA;AACA,uBADA;AAEA,8BAFA;AAGA;AAHA;AAKA;;AAEA,0DACA,OADA,EAEA,qBAFA;AAIA;AACA,KAhFA;AAkFA,iBAlFA,2BAkFA;AACA;AACA,KApFA;AAsFA,kBAtFA,4BAsFA;AACA;AACA;AAxFA,GA5DA;AAuJA;AACA,sBACA;AACA,aADA,mBACA,GADA,EACA,MADA,EACA;AAAA;;AACA;AACA;AACA;;AACA;AACA,WAHA,EAGA,CAHA;AAIA;AACA,OARA;AASA;AATA;AAFA,GAvJA;AAsKA,SAtKA,qBAsKA;AAAA;;AACA;AACA;;AACA;AACA,KAHA;AAIA,GA3KA;AA6KA,WACA;AACA,eADA,yBACA;AACA;AACA,KAHA;AAKA,aALA,uBAKA;AAAA;AAAA;;AACA;AAAA;AACA;AACA;;AACA;AACA;AACA,mDADA;AAEA,yBAFA;AAGA,2DAHA;AAIA,gCAJA;AAKA;AALA;AAOA,OARA;AASA;AACA,KAnBA;AAqBA,gBArBA,0BAqBA;AAAA;;AACA;AACA;AAEA;AACA;;AACA;;AACA;AACA,OAJA;AAKA,KA9BA;AAgCA,gBAhCA,0BAgCA;AAAA;;AACA;AAEA;AACA;AACA;AACA;;AACA;;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,wBADA;AAEA,gCAFA;AAIA,6BAJA;AAIA;AACA;AACA,kBANA;AAOA;AACA,yCADA;AAEA,yBAFA;AAGA;AACA;AACA,wBALA;AAMA;AACA;;AACA;AACA;AACA;AACA,eAFA,MAGA;AACA;AACA;AACA;;AACA;AACA;AAjBA,SAPA;AA0BA;AACA,iDADA;AAEA;AAFA,SA1BA;AA+BA;AACA;AACA;AACA;AAEA;AACA;AACA,WAPA;AASA;AACA;AACA;AACA;AACA;AAbA,SA/BA;AA8CA;AACA,2DADA;AAEA;AAFA;AA9CA;AAoDA;AAEA;AACA;AAEA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AAZA;;AAcA;AACA,WAjBA,EAiBA,GAjBA;AAkBA;AACA,OAxBA;;AA0BA;AACA;AACA;AADA;;AAGA;AACA;AACA;AACA;;AACA;;AACA;AACA;AACA;;AACA;AACA;AACA;;AACA;AAAA;AAAA;AAAA;AACA,SAZA;;AAcA;;AAEA;AACA;AACA;AACA,WAFA,MAGA;AACA;AACA;;AACA;AACA,SARA;AASA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,iCADA;AAEA,+BAFA;AAGA,oCAHA;AAIA;AACA;AACA;AACA;AACA;AACA,iBAJA,EAIA,GAJA;AAKA;AAVA;AAYA,WAbA,MAaA;AACA;AACA,iCADA;AAEA,+BAFA;AAGA,oCAHA;AAIA;AACA;AACA;AACA;AACA;AACA,iBAJA,EAIA,GAJA;AAKA;AAVA;AAYA;AACA,SA5BA;AA8BA;AACA;AACA,SAFA,EAEA,GAFA;AAIA,OAnKA,CAqKA;;;AACA;AACA;AACA;AACA;AACA,KA1MA;AA4MA,qBA5MA,+BA4MA;AAAA;;AAEA;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA,uBADA;AAEA,gCAFA;AAGA,uCAHA;AAGA;AACA,gDAJA;AAKA,iCALA;AAMA,mCANA;AAOA,iCAPA;AAQA,sBARA;AASA,mCATA;AAUA,6BAVA;AAUA;AACA,6BAXA;AAYA,6BAZA;AAaA,0FAbA;AAcA,oGAdA;AAeA;AACA;AADA,SAfA;AAkBA;AACA;AADA,SAlBA;AAqBA;AACA,gDADA;AAEA;AAFA,SArBA;AAyBA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,eALA;AAMA,aAPA,EAOA,CAPA;AAQA,WAdA;AAeA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eALA;AAMA,aAPA,EAOA,CAPA;AAQA,WAxBA;AAyBA;AACA;AACA,WA3BA;AA4BA;AACA;AACA,WA9BA;AA+BA;AACA;AACA;AACA;AACA,eAFA,EAEA,GAFA;AAGA;AACA;AACA;AACA;AACA;AACA;AAEA,eAPA,EAOA,GAPA;AASA;AACA;;AACA;AACA;AACA;AACA;AACA;AACA,eAPA,EAOA,IAPA;AAQA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eALA;AAMA,aAPA,EAOA,CAPA;AAQA;AA9DA;AAzBA;AA0FA,KA5TA;AA8TA,oBA9TA,4BA8TA,UA9TA,EA8TA;AAEA;AACA;AACA;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,qHACA,4BADA,GACA,sBADA;;AAEA;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;;AACA;AACA;AACA;AACA;AAZA;;AAcA;AACA,SAlBA,EAkBA,GAlBA;AAmBA;AACA,KA/VA;AAiWA,mBAjWA,2BAiWA,IAjWA,EAiWA;AACA,uBACA;AACA;AACA;AACA;;AACA;AACA;AACA;;AAEA;AACA,OAVA;AAWA,KA7WA;AA+WA,cA/WA,sBA+WA,KA/WA,EA+WA;AACA;AACA,KAjXA;AAmXA,gBAnXA,wBAmXA,KAnXA,EAmXA;AACA;AACA,KArXA;AAuXA,mBAvXA,2BAuXA,MAvXA,EAuXA;AAEA;AACA;AACA,sBACA;AACA,wBADA;AAEA,yCAFA;AAGA,yBAHA;AAIA;AAJA,WADA;AAQA;;AACA;AACA,sBACA;AACA,wBADA;AAEA,0CAFA;AAGA,yBAHA;AAIA;AAJA,WADA;AAQA;;AAEA;AACA,sBACA;AACA,wBADA;AAEA,yCAFA;AAGA;AAHA,WADA;AAOA;AACA,OA/BA,MA+BA;AACA;AACA,sBACA;AACA,wBADA;AAEA,kDAFA;AAGA,yBAHA;AAIA;AAJA,WADA;AAQA;;AACA;AACA,sBACA;AACA,wBADA;AAEA,iDAFA;AAGA,yBAHA;AAIA;AAJA,WADA;AAQA;;AAEA;AACA,sBACA;AACA,wBADA;AAEA,iDAFA;AAGA;AAHA,WADA;AAOA;AACA;;AAEA;AACA,KA1bA;AA4bA,uBA5bA,+BA4bA,KA5bA,EA4bA;AACA;;AAEA;AACA;AACA;;AAEA;AAEA;AACA;AACA,SAFA;AAIA,mEANA,CAQA;;AACA;AAEA,2EAXA,CAaA;;AACA;AAEA;AAEA;AACA,sGAnBA,CAqBA;;AACA,wHACA,2FADA,GAEA,qFAFA;AAGA;AACA;AACA;AACA,KA/dA;AAieA,cAjeA,wBAieA;AACA;;AAEA;AACA;AACA;;AACA,oEANA,CAQA;;AACA;AACA;AAEA;AACA;AACA;AACA,KAhfA;AAkfA,mBAlfA,6BAkfA;AACA;AACA;AACA,oDACA,OADA,EACA,CADA,EAFA,CAGA;AAEA;;AACA;AACA;AACA;AACA,sBAHA;AAGA;AACA,kCAJA;AAKA,kCALA;AAMA,wBANA;AAOA,0BAPA;AAQA;AACA;AATA,UANA,CAmBA;;AACA,0FACA,6EADA,EACA,qBADA,EAEA,OAFA;AAIA;AACA;AAAA;AAEA;;AAEA;AAAA;AAEA,kCAFA,CAEA;;AACA,mCAHA,CAGA;;AAEA,4CALA,CAKA;AACA;;AACA,uCAPA,CAOA;AACA,aARA;;AASA,gCAbA,CAaA;AACA;AACA,SAhBA;AAiBA;AACA,yGACA;AACA;AACA,SAJA;;AAMA;AACA;AACA;AACA;;AAEA;AACA;AACA,KAziBA;AA2iBA,yBA3iBA,mCA2iBA;AACA;AACA;AACA,OAFA,EAEA,GAFA;AAGA,KA/iBA;AAijBA,gBAjjBA,wBAijBA,MAjjBA,EAijBA;AACA;AACA;AAnjBA;AA9KA,G;;;;;;;;;;;;AC5GA;AAAA;AAAA;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,mCAAmC;AACvD,cAAc;AACd,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,iBAAiB,gCAAgC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iCAAiC;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B;AAC3B;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA,qBAAqB,mCAAmC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA,qBAAqB,mCAAmC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,8DAA8D;AACvE;AACA;AACA;AACA,aAAa,gEAAgE;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAa;AACb;AACA;AACA;AACA,iBAAiB,gCAAgC;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA,6BAA6B,0CAA0C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmD,UAAU,iBAAiB,WAAW;AACzF;AACA;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA,6BAA6B,0CAA0C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B;AAC/B;AACA;AACA;AACA;AACA;AACA,sCAAsC,2BAA2B;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B;AAC7B;AACA;AACA;AACA,iCAAiC,uCAAuC;AACxE;AACA;AACA;AACA;AACA,4CAA4C,2BAA2B;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mCAAmC;AACnC;AACA;AACA;AACA;AACA,uCAAuC;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA,yBAAyB,0CAA0C;AACnE;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAAwD;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB,wDAAwD;AACzE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB,kDAAkD;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,qBAAqB;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,8DAA8D;AAC7E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,qCAAqC,UAAU,iBAAiB,WAAW;AAC3E;AACA;AACA;AACA,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;AClZA;AAAA;AAAA;AAAA;AAAgG;AAC3B;AACL;;;AAGhE;AACsG;AACtG,gBAAgB,2GAAU;AAC1B,EAAE,uFAAM;AACR,EAAE,4FAAM;AACR,EAAE,qGAAe;AACjB;AACA;AACA;AACA;;AAEA;;AAEA;AACA,IAAI,KAAU,EAAE,YAiBf;AACD;AACe,gF;;;;;;;;;;;;ACtCf;AAAA;AAAA,wCAAyM,CAAgB,qPAAG,EAAC,C;;;;;;;;;;;;ACA7N;AAAA;AAAA;AAAA;AAAA;AAAA","file":"chunks/ceres-client-43.js","sourcesContent":["<template>\n    <div class=\"row transform-unset\" style=\"transform: translate(0px, 0px);\" itemscope\n        itemtype=\"https://schema.org/Thing\">\n        <div class=\"d-none d-lg-flex col-lg-2 single__thumb-swiper-container\">\n            <div class=\"single__thumb-swiper swiper-container swiper-container-vertical\" ref=\"thumbs\">\n                <div class=\"swiper-wrapper\">\n                    <div class=\"swiper-slide\" v-for=\"imagePreview in carouselImages\"\n                        @mousedown=\"triggerClick($event.target)\">\n                        <div v-if=\"imagePreview.isVideo\" class=\"single__video-thumb\" :data-url=\"imagePreview.url\"\n                            data-type=\"video\" :title=\"getItemName() + ' video'\">\n                            <svg>\n                                <use xlink:href=\"#svg_play\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"></use>\n                            </svg>\n                        </div>\n                        <div v-else-if=\"imagePreview.is3d\" class=\"single__3d-thumb\" :data-url=\"imagePreview.url\"\n                            data-type=\"3d\" :title=\"getItemName() + ' 3D'\">\n                            <svg>\n                                <use xlink:href=\"#svg_3d\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"></use>\n                            </svg>\n                        </div>\n                        <img v-else class=\"single__thumb-swiper-image swiper-lazy\" :data-src=\"imagePreview.url\"\n                            :data-bigimg=\"imagePreview.urlBig\" data-type=\"img\" :alt=\"getAltText(imagePreview)\"\n                            :title=\"getItemName()\" draggable=\"false\" :key=\"imagePreview.url\">\n                    </div>\n                </div>\n            </div>\n            <div class=\"thumb-swiper-next\"><svg>\n                    <use xlink:href=\"#svg_arrow\" xmlns:xlink=\"https://www.w3.org/1999/xlink\"></use>\n                </svg></div>\n            <div class=\"thumb-swiper-prev\"><svg>\n                    <use xlink:href=\"#svg_arrow\" xmlns:xlink=\"https://www.w3.org/1999/xlink\"></use>\n                </svg></div>\n        </div>\n        <div class=\"col-12 col-lg-10 single-swiper-container-col\">\n            <div class=\"single__wishlist-btn single__wishlist-btn--top\">\n                <add-to-wish-list></add-to-wish-list>\n            </div>\n            <div class=\"swiper-container single-swiper\" ref=\"single\" @mouseover.once=\"triggerScrollForDrift()\">\n                <div class=\"swiper-wrapper\">\n                    <div class=\"swiper-slide\" v-for=\"(image, index) in singleImages\"\n                        :class=\"{ 'pointer-events-all': image.isVideo || image.is3d }\">\n                        <div v-if=\"image.isVideo && image.isYoutube\" class=\"responsive-iframe--video\">\n                            <iframe :src=\"'https://www.youtube-nocookie.com/embed/' + image.url\" frameborder=\"0\"\n                                allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                                allowfullscreen itemprop=\"image\">\n                            </iframe>\n                        </div>\n                        <div v-else-if=\"image.isVideo && !image.isYoutube\" class=\"responsive-iframe--video\">\n                            <iframe\n                                :src=\"'https://player.vimeo.com/video/' + image.url + '?h=333e7b7c78&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479'\"\n                                width=\"100%\" height=\"100%\" frameborder=\"0\" allow=\"fullscreen\" allowfullscreen>\n                            </iframe>\n                        </div>\n                        <div v-else-if=\"image.is3d\" class=\"responsive-iframe--3d\" ref=\"threedcontainer\">\n                            <iframe :data-src=\"image.url\" frameborder=\"0\" allowfullscreen itemprop=\"image\">\n                            </iframe>\n                        </div>\n                        <a v-else @click.prevent=\"openFullScreenModal($event)\" :title=\"getItemName()\">\n                            <div class=\"swiper-zoom-container\">\n                                <img class=\"single__swiper-image\" :class=\"{ 'swiper-lazy': index > 0 }\"\n                                    :data-zoom=\"image.urlBig\" :src=\"index === 0 ? image.urlMiddle : ''\"\n                                    :data-src=\"image.urlMiddle\" :alt=\"getAltText(image)\" :title=\"getItemName()\"\n                                    itemprop=\"image\" :key=\"image.urlMiddle\">\n                                <div v-if=\"index > 0\" class=\"swiper-lazy-preloader\"></div>\n                            </div>\n                        </a>\n                    </div>\n                </div>\n                <div class=\"single-swiper-pagination\"></div>\n                <div class=\"drift-pane\" :class=\"'drift-pane-' + currentVariation.item.id\"></div>\n                <div class=\"single-swiper__fullscreen\" @click.stop.prevent=\"openPhotoSwiper()\">\n                    {{ $translate(\"Weberbuero::Template.fullscreen\") }}\n                </div>\n                <div class=\"swiper-button-next swiper-button-white\"><svg>\n                        <use xlink:href=\"#svg_arrow\" xmlns:xlink=\"https://www.w3.org/1999/xlink\"></use>\n                    </svg></div>\n                <div class=\"swiper-button-prev swiper-button-white\"><svg>\n                        <use xlink:href=\"#svg_arrow\" xmlns:xlink=\"https://www.w3.org/1999/xlink\"></use>\n                    </svg></div>\n            </div>\n        </div>\n        <div v-if=\"(isItemView && itemData === null) || (!isItemView && itemData !== null)\"\n            class=\"single__swiper-full-screen-modal\">\n            <div class=\"single__swiper-full-screen-modal-close\" @click=\"closeModal()\"><svg data-dismiss=\"modal\"\n                    height=\"26\" width=\"27\">\n                    <use xlink:href=\"#svg_close\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"></use>\n                </svg></div>\n            <div class=\"single__swiper-full-screen-modal-img-wrapper\">\n                <img :alt=\"$store.getters.currentItemVariation.texts.name1\" src=\"\"\n                    class=\"single__swiper-full-screen-modal-img\">\n                <iframe class=\"single__swiper-full-screen-modal-iframe\" src=\"\" frameborder=\"0\"\n                    allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen\n                    itemprop=\"image\">\n                </iframe>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { isNullOrUndefined } from \"ceres/app/helper/utils\";\n\nimport { Swiper, Thumbs } from 'swiper';\nimport Drift from 'drift-zoom';\nimport PhotoSwipe from \"photoswipe\";\nimport PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'\nimport TranslationService from \"ceres/app/services/TranslationService\";\n\nexport default {\n    name: \"item-image-carousel\",\n\n    props: {\n        maxQuantity:\n        {\n            type: Number,\n            default: 25\n        },\n        imageUrlAccessor:\n        {\n            type: String,\n            default: \"url\"\n        },\n        showThumbs:\n        {\n            type: Boolean,\n            default: true\n        },\n        showDots:\n        {\n            type: Boolean,\n            default: true\n        },\n        animationStyle:\n        {\n            type: String,\n            default: \"standard\"\n        },\n        pluginPath:\n        {\n            type: String,\n            default: \"\"\n        },\n        itemData:\n        {\n            type: Object,\n            default: null\n        },\n    },\n\n    inject: {\n        itemId: {\n            default: null\n        }\n    },\n\n    data() {\n        return {\n            currentItem: 0,\n            thumbsSwiper: null,\n            singleSwiper: null,\n            transform: \"\",\n            varSwitched: false,\n            initialized: false,\n            usedItemId: this.itemData !== null ? this.itemData.item.id : this.itemId,\n        };\n    },\n\n    computed:\n    {\n        pconUrl() {\n            let part1 = \"\"\n            for (let key in this.currentVariation.variationProperties) {\n                for (let key2 in this.currentVariation.variationProperties[key].properties) {\n                    if (this.currentVariation.variationProperties[key].properties[key2].id === 255) {\n                        part1 = this.currentVariation.variationProperties[key].properties[key2].values.value;\n                    }\n                }\n            }\n            if (part1 === \"\") {\n                return \"\";\n            } else if (this.isPreview) {\n                return \"https://ui.pcon-solutions.com/#GATEKEEPER_ID=65e6c3945d3b2&moc=NARFC&ban=DJT101&sid=QACTIVE&ovc=MG2012.FrameAndLegColour%3DA%3BMG2012.Columns%3D333%3BMG2012.MetalFeet%3DF%3BMG2012.PowerPlug%3DEU%3BMG2012.Button%3DUA&lang=de&sp=true&HOOK_URL=https://wbconnect.de/plenty/set-variation/10359\";\n            } else {\n                return part1 + this.itemId;\n            }\n        },\n        isQuickView() {\n            return this.itemData !== null;\n        },\n\n        currentVariation() {\n            return this.$store.getters[`${this.usedItemId}/currentItemVariation`]\n        },\n\n        isItemView() {\n            return App.isItemView;\n        },\n\n        carouselImages() {\n            const varImages = this.getImages(\"variation\", true);\n            const ItemImages = this.getImages(\"item\", true).slice(0, 25);\n            let images = [...varImages];  // ...ItemImages\n\n\n\n\n            // if(this.currentVariation.variation.isMain){\n            //   images = [...varImages, ...ItemImages];  // ...ItemImages\n            // }\n\n\n            return this.appendFreeField(images);\n        },\n\n        singleImages() {\n            const varImages = this.getImages(\"variation\", false);\n            const ItemImages = this.getImages(\"item\", false).slice(0, 25);\n\n            let images = [...varImages];  // ...ItemImages\n\n            // if(this.currentVariation.variation.isMain){\n            //   images = [...varImages, ...ItemImages];  // ...ItemImages\n            // }\n\n            return this.appendFreeField(images);\n        },\n\n        photoSwipeImages() {\n\n            let newPics = [];\n\n            const varImages = this.getImages(\"variation\", false);\n            const ItemImages = this.getImages(\"item\", false).slice(0, 25);\n            let images = [...varImages]; // ...ItemImages\n\n            for (let key in images) {\n                newPics.push({\n                    alternate: \"\",\n                    url: images[key].url,\n                    position: images[key].position\n                });\n            }\n\n            images = this.$options.filters.photoSwipeItemImages(\n                newPics,\n                this.imageUrlAccessor);\n\n            return images;\n        },\n\n        getImageCount() {\n            return this.carouselImages.length > 25 ? 25 : this.carouselImages.length;\n        },\n\n        freeFieldsComp() {\n            return this.currentVariation.free;\n        }\n    },\n\n    watch: {\n        currentVariation:\n        {\n            handler(val, oldVal) {\n                if (val !== oldVal) {\n                    setTimeout(() => {\n                        this.varSwitched = true;\n                        this.reInitialize();\n                    }, 1);\n                }\n            },\n            deep: true\n        }\n    },\n\n    mounted() {\n        this.$nextTick(() => {\n            this.initThumbCarousel();\n            this.initCarousel();\n        })\n    },\n\n    methods:\n    {\n        getItemName() {\n            return this.$options.filters.itemName(this.currentVariation);\n        },\n\n        getImages(target = \"item\", isPreview) {\n            if (!this.currentVariation.images[target]) { // TODO: fix für quickview\n                return [];\n            }\n            const images = this.currentVariation.images[target].map(img => {\n                return {\n                    url: isPreview ? img.urlPreview : img.url,\n                    urlBig: img.url,\n                    alternate: img.names ? img.names.alternate : null,\n                    position: img.position,\n                    urlMiddle: img.urlMiddle\n                };\n            });\n            return this.orderByPosition(images);\n        },\n\n        reInitialize() {\n            this.thumbsSwiper.destroy();\n            this.singleSwiper.destroy();\n\n            this.$nextTick(() => {\n                this.initThumbCarousel();\n                console.log(\"test2\")\n                this.initCarousel();\n            });\n        },\n\n        initCarousel() {\n            const imageCount = this.getImageCount;\n\n            const $singleRef = $(this.$refs.single);\n            let thumbsSwiper = this.thumbsSwiper;\n            let el = \".single .single-swiper\";\n            let elStart = \".single \";\n            let _this = this;\n            let that = this;\n\n            if (this.itemData !== null) {\n                el = \".quick-view__wrapper .single-swiper\";\n                elStart = \".quick-view__wrapper \";\n            }\n\n            this.singleSwiper = new Swiper(el, {\n                spaceBetween: 10,\n                loopedSlides: imageCount,\n\n                loop: imageCount >= 6,//true,//false,//true,//imageCount > 4,\n                //allowTouchMove: false,\n                lazy: true,\n                pagination: {\n                    el: '.single-swiper-pagination',\n                    clickable: true,\n                    // fix for: bullet pagination does not update in swipe or thumb click\n                    // https://github.com/nolimits4web/swiper/issues/2915#issuecomment-807980596\n                    type: 'custom',\n                    renderCustom: function (swiper, current, total) {\n                        let out = ''\n                        for (let i = 1; i < total + 1; i++) {\n                            if (i == current) {\n                                out = out + '<span class=\"swiper-pagination-bullet swiper-pagination-bullet-active\" tabindex=' + i + ' role=\"button\" aria-label=\"Go to slide ' + parseInt(i) + 1 + '\"></span>';\n                            }\n                            else {\n                                out = out + '<span class=\"swiper-pagination-bullet\" tabindex=' + i + ' role=\"button\" aria-label=\"Go to slide ' + parseInt(i) + 1 + '\"></span>';\n                            }\n                        }\n                        return out;\n                    },\n                },\n                navigation: {\n                    nextEl: elStart + '.swiper-button-next',\n                    prevEl: elStart + '.swiper-button-prev',\n                },\n\n                on: {\n                    // slideChange: (thisSwiper) => {\n                    //     this.currentItem = thisSwiper.realIndex + 1;\n                    // },\n\n                    afterInit: () => {\n                        this.initialized = true;\n                    },\n\n                    slideChangeTransitionEnd: (thisSwiper) => {\n                        if (!!document.querySelector(\".swiper-slide-active .responsive-iframe--3d iframe\")) {\n                            document.querySelector(\".responsive-iframe--3d iframe\").setAttribute(\"src\", document.querySelector(\".responsive-iframe--3d iframe\").dataset.src);\n                        }\n                    },\n                },\n                thumbs: {\n                    swiper: imageCount < 6 ? this.thumbsSwiper : null,\n                    slideThumbActiveClass: imageCount >= 6 ? 'swiper-slide-thumb-active' : 'swiper-slide-active',\n                }\n            });\n\n            let singleSwiper = this.singleSwiper;\n\n            thumbsSwiper.on(\"slideChange\", function () {\n                //singleSwiper.slideTo(thumbsSwiper.realIndex);\n\n                // wenn modal offen ist, img src setzen\n                if ($('.single__swiper-full-screen-modal').hasClass('is-open')) {\n                    setTimeout(function () {\n                        let sel = $('.single__swiper-full-screen-modal .single__thumb-swiper .swiper-slide-thumb-active').length ? \".swiper-slide-thumb-active\" : '.swiper-slide-active';\n                        switch ($('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' > *')[0].dataset.type) {\n                            case \"img\":\n                                $('.single__swiper-full-screen-modal-iframe').hide();\n                                $('.single__swiper-full-screen-modal-img').show().attr(\"src\", $('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' img')[0].dataset.bigimg);\n                                break;\n                            case \"video\":\n                                $('.single__swiper-full-screen-modal-img').hide();\n                                $('.single__swiper-full-screen-modal-iframe').show().attr(\"src\", \"https://www.youtube-nocookie.com/embed/\" + $('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' div')[0].dataset.url);\n                                break;\n                            case \"3d\":\n                                $('.single__swiper-full-screen-modal-img').hide();\n                                $('.single__swiper-full-screen-modal-iframe').show().attr(\"src\", $('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' div')[0].dataset.url);\n                                break;\n                        }\n                        $('.single__swiper-full-screen-modal-img-wrapper').scrollTop(0);\n                    }, 100);\n                }\n            });\n\n            if (!isNullOrUndefined(window.lightbox)) {\n                window.lightbox.option({\n                    wrapAround: true\n                });\n                window.lightbox.imageCountLabel = (current, total) => {\n                    if (isNullOrUndefined(imageCount) || imageCount <= 1) {\n                        return \"\";\n                    }\n                    current -= ((total - imageCount) / 2);\n                    while (current <= 0) {\n                        current += imageCount;\n                    }\n                    while (current > imageCount) {\n                        current -= imageCount;\n                    }\n                    return TranslationService.translate(\"Ceres::Template.singleItemImagePreviewCaption\", { current: current, total: imageCount });\n                };\n\n                const originalFn = window.lightbox.changeImage;\n\n                window.lightbox.changeImage = imageNumber => {\n                    if (window.lightbox.currentImageIndex === 0 && imageNumber === window.lightbox.album.length - 1) {\n                        imageNumber--;\n                    }\n                    else if (window.lightbox.currentImageIndex === window.lightbox.album.length - 1 && imageNumber === 0) {\n                        imageNumber++;\n                    }\n                    return originalFn.call(window.lightbox, imageNumber);\n                };\n            }\n\n            if (window.innerWidth > 1200 && !(('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0))) {\n                const driftImgs = document.querySelectorAll('.single__swiper-image');\n                const pane = document.querySelector('.drift-pane-' + this.currentVariation.item.id);\n                Object.values(driftImgs).map(img => {\n                    if (this.isQuickView) {\n                        window.driftzoom = new Drift(img, {\n                            paneContainer: pane,\n                            inlinePane: false,\n                            hoverBoundingBox: true,\n                            onShow: function () {\n                                setTimeout(function () {\n                                    if (!!document.querySelector(\".drift-bounding-box.drift-open\")) {\n                                        document.querySelector(\".drift-bounding-box.drift-open\").classList.add(\"visible-bounding-box\")\n                                    }\n                                }, 250)\n                            }\n                        });\n                    } else {\n                        window.singleDriftZoom = new Drift(img, {\n                            paneContainer: pane,\n                            inlinePane: false,\n                            hoverBoundingBox: true,\n                            onShow: function () {\n                                setTimeout(function () {\n                                    if (!!document.querySelector(\".drift-bounding-box.drift-open\")) {\n                                        document.querySelector(\".drift-bounding-box.drift-open\").classList.add(\"visible-bounding-box\")\n                                    }\n                                }, 250)\n                            }\n                        });\n                    }\n                });\n\n                setTimeout(function () {\n                    window.scrollTo(0, window.scrollY + 1)\n                }, 100);\n\n            }\n\n            // console.log(this.singleSwiper)\n            if (imageCount >= 6) {\n                this.thumbsSwiper.controller.control = this.singleSwiper;\n                this.singleSwiper.controller.control = this.thumbsSwiper;\n            }\n        },\n\n        initThumbCarousel() {\n\n            const imageCount = this.getImageCount;\n\n            const $thumbsRef = $(this.$refs.thumbs);\n\n            if (imageCount <= 6) {\n                $thumbsRef.addClass(\"no-loop\");\n            }\n\n            let el = \".single .single__thumb-swiper\";\n            let elStart = \".single \";\n\n            if (this.itemData !== null) {\n                el = \".quick-view__wrapper .single__thumb-swiper\";\n                elStart = \".quick-view__wrapper \";\n            }\n\n            console.log(imageCount)\n\n            let _this = this;\n\n            this.thumbsSwiper = new Swiper(el, {\n                spaceBetween: 5,\n                loopedSlides: imageCount,\n                centeredSlides: imageCount >= 6,//false,//imageCount > 4,\n                slidesPerView: _this.isQuickView ? 5 : 7,\n                slideToClickedSlide: true,\n                watchSlidesVisibility: true,\n                watchSlidesProgress: true,\n                observer: true,\n                multipleActiveThumbs: false,\n                loop: imageCount >= 6,// true,//false,//imageCount > 4,\n                direction: 'vertical',\n                allowTouchMove: false,\n                slideActiveClass: imageCount >= 6 ? 'swiper-slide-active' : 'swiper-slide-active2',\n                slideThumbActiveClass: imageCount >= 6 ? 'swiper-slide-thumb-active' : 'swiper-slide-active',\n                mousewheel: {\n                    sensitivity: 1\n                },\n                lazy: {\n                    checkInView: true\n                },\n                navigation: {\n                    nextEl: elStart + '.thumb-swiper-next',\n                    prevEl: elStart + '.thumb-swiper-prev',\n                },\n                on: {\n                    slideChange: () => {\n                        // if(imageCount <= 4){\n                        //     this.singleSwiper.slideTo(this.thumbsSwiper.realIndex);\n                        // }\n\n                        setTimeout(function () {\n                            document.querySelectorAll('.single__thumb-swiper .swiper-slide-visible .swiper-lazy').forEach(item => {\n                                if (!item.classList.contains('swiper-lazy-loaded')) {\n                                    item.setAttribute('src', item.getAttribute('data-src'));\n                                    item.classList.add('swiper-lazy-loaded');\n                                }\n                            });\n                        }, 0);\n                    },\n                    observerUpdate: () => {\n                        setTimeout(function () {\n                            document.querySelectorAll('.single__thumb-swiper .swiper-slide-visible .swiper-lazy').forEach(item => {\n                                if (!item.classList.contains('swiper-lazy-loaded')) {\n                                    item.setAttribute('src', item.getAttribute('data-src'));\n                                    item.classList.add('swiper-lazy-loaded');\n                                }\n                            });\n                        }, 0);\n                    },\n                    click: () => {\n                        this.setLightBoxImage(imageCount);\n                    },\n                    tap: (swiper, event) => {\n                        this.setLightBoxImage(imageCount);\n                    },\n                    afterInit: () => {\n                        if (_this.itemData !== null && !_this.varSwitched) {\n                            setTimeout(function () {\n                                window.dispatchEvent(new Event('resize'));\n                            }, 250);\n                            let tsInterval = setInterval(function () {\n                                if (!!document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-next.swiper-slide-thumb-active\") && !!document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-active\")) {\n                                    clearInterval(tsInterval);\n                                    document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-next.swiper-slide-thumb-active\").classList.remove(\"swiper-slide-thumb-active\");\n                                    document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-active\").classList.add(\"swiper-slide-thumb-active\");\n                                }\n\n                            }, 250);\n\n                            setTimeout(function () {\n                                clearInterval(tsInterval);\n                                if (!!document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-next.swiper-slide-thumb-active\") && !!document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-active\")) {\n                                    clearInterval(tsInterval);\n                                    document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-next.swiper-slide-thumb-active\").classList.remove(\"swiper-slide-thumb-active\");\n                                    document.querySelector(elStart + \".single__thumb-swiper .swiper-slide-active\").classList.add(\"swiper-slide-thumb-active\");\n                                }\n                            }, 2500);\n                        }\n                        setTimeout(function () {\n                            document.querySelectorAll('.single__thumb-swiper .swiper-slide-visible .swiper-lazy').forEach(item => {\n                                if (!item.classList.contains('swiper-lazy-loaded')) {\n                                    item.setAttribute('src', item.getAttribute('data-src'));\n                                    item.classList.add('swiper-lazy-loaded');\n                                }\n                            });\n                        }, 0);\n                    }\n                },\n            });\n        },\n\n        setLightBoxImage(imageCount) {\n\n            // if(imageCount <= 4){\n            //     this.thumbsSwiper.slideTo(this.singleSwiper.realIndex);\n            // }\n\n            let elStart = \".single \";\n\n            if (this.itemData !== null) {\n                elStart = \".quick-view__wrapper \";\n            }\n\n            if ($('.single__swiper-full-screen-modal').hasClass('is-open')) {\n                setTimeout(function () {\n                    let sel = $('.single__swiper-full-screen-modal .single__thumb-swiper .swiper-slide-thumb-active').length ?\n                        \".swiper-slide-thumb-active\" : '.swiper-slide-active';\n                    switch ($('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' > *')[0].dataset.type) {\n                        case \"img\":\n                            $('.single__swiper-full-screen-modal-iframe').hide();\n                            $('.single__swiper-full-screen-modal-img').show().attr(\"src\", $('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' img')[0].dataset.bigimg);\n                            break;\n                        case \"video\":\n                            $('.single__swiper-full-screen-modal-img').hide();\n                            $('.single__swiper-full-screen-modal-iframe').show().attr(\"src\", \"https://www.youtube-nocookie.com/embed/\" + $('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' div')[0].dataset.url);\n                            break;\n                        case \"3d\":\n                            $('.single__swiper-full-screen-modal-img').hide();\n                            $('.single__swiper-full-screen-modal-iframe').show().attr(\"src\", $('.single__swiper-full-screen-modal .single__thumb-swiper ' + sel + ' div')[0].dataset.url);\n                            break;\n                    }\n                    $('.single__swiper-full-screen-modal-img-wrapper').scrollTop(0);\n                }, 100);\n            }\n        },\n\n        orderByPosition(list) {\n            return list.sort(\n                (entryA, entryB) => {\n                    if (entryA.position > entryB.position) {\n                        return 1;\n                    }\n                    if (entryA.position < entryB.position) {\n                        return -1;\n                    }\n\n                    return 0;\n                });\n        },\n\n        getAltText(image) {\n            return image && image.alternate ? image.alternate : this.$options.filters.itemName(this.currentVariation);\n        },\n\n        getImageName(image) {\n            return image && image.name ? image.name : this.$options.filters.itemName(this.currentVariation);\n        },\n\n        appendFreeField(images) {\n\n            if (this.itemData !== null) {\n                if (this.itemData.item.free5) {\n                    images.push(\n                        {\n                            position: 98,\n                            url: this.itemData.item.free5,\n                            isVideo: true,\n                            isYoutube: true\n                        }\n                    );\n                }\n                if (this.itemData.item.free10) {\n                    images.push(\n                        {\n                            position: 97,\n                            url: this.itemData.item.free10,\n                            isVideo: true,\n                            isYoutube: false\n                        }\n                    );\n                }\n\n                if (this.itemData.item.free6) {\n                    images.push(\n                        {\n                            position: 99,\n                            url: this.itemData.item.free6,\n                            is3d: true\n                        }\n                    );\n                }\n            } else {\n                if (this.currentVariation.item && this.currentVariation.item.free10) {\n                    images.push(\n                        {\n                            position: 97,\n                            url: this.currentVariation.item.free10,\n                            isVideo: true,\n                            isYoutube: false\n                        }\n                    );\n                }\n                if (this.currentVariation.item && this.currentVariation.item.free5) {\n                    images.push(\n                        {\n                            position: 98,\n                            url: this.currentVariation.item.free5,\n                            isVideo: true,\n                            isYoutube: true\n                        }\n                    );\n                }\n\n                if (this.currentVariation.item && this.currentVariation.item.free6) {\n                    images.push(\n                        {\n                            position: 99,\n                            url: this.currentVariation.item.free6,\n                            is3d: true\n                        }\n                    );\n                }\n            }\n\n            return images;\n        },\n\n        openFullScreenModal(event) {\n            let elStart = \".single \";\n\n            if (this.itemData !== null) {\n                elStart = \".quick-view__wrapper \";\n            }\n\n            if (window.innerWidth > 991) {\n\n                $.each($(elStart + '.single-swiper a'), function (index, item) {\n                    delete $(item)[0].dataset.lightbox;\n                });\n\n                $('.single__swiper-full-screen-modal').addClass('is-open');\n\n                // move in body wegen ipad pinch zoom\n                $(\".single__swiper-full-screen-modal\").detach().appendTo('body');\n\n                $(elStart + '.single__thumb-swiper-container').addClass('is-open');\n\n                // move in body wegen ipad pinch zoom\n                $(elStart + \".single__thumb-swiper-container\").detach().appendTo('.single__swiper-full-screen-modal');\n\n                $('body').addClass('full-screen-modal-open');\n\n                this.transform = $(elStart + 'div[itemscope=\"itemscope\"]').css('transform');\n                $(elStart + 'div[itemscope=\"itemscope\"]').css('transform', 'unset').addClass(\"no-transition\");\n\n                // set inital img\n                let $sel = $('.single__swiper-full-screen-modal .single__thumb-swiper .swiper-slide-thumb-active img').length ?\n                    $('.single__swiper-full-screen-modal .single__thumb-swiper .swiper-slide-thumb-active img') :\n                    $('.single__swiper-full-screen-modal .single__thumb-swiper .swiper-slide-active img');\n                $('.single__swiper-full-screen-modal-img').show().attr(\"src\", $sel[0].dataset.bigimg);\n                $('.single__swiper-full-screen-modal-iframe').hide();\n            }\n        },\n\n        closeModal() {\n            let elStart = \".single \";\n\n            if (!!document.querySelector(\".quick-view__wrapper\")) {\n                elStart = \".quick-view__wrapper \";\n            }\n            $('.single__swiper-full-screen-modal').removeClass('is-open');\n\n            // wieder zurück moven\n            $(\".single__swiper-full-screen-modal\").detach().appendTo(elStart + 'div[itemscope=\"itemscope\"]');\n            $(\".single__swiper-full-screen-modal .single__thumb-swiper-container\").detach().prependTo(elStart + 'div[itemscope=\"itemscope\"]');\n\n            $(elStart + '.single__thumb-swiper-container').removeClass('is-open');\n            $('body').removeClass('full-screen-modal-open');\n            $(elStart + 'div[itemscope=\"itemscope\"]').css('transform', this.transform).removeClass(\"no-transition\");\n        },\n\n        openPhotoSwiper() {\n            if (window.innerWidth <= 991) {\n                const index = this.singleSwiper.realIndex;\n                const pswpElement = document.querySelectorAll(\n                    '.pswp')[0]; // swiper-slide\n\n                // define options (if needed)\n                const options = {\n                    // optionName: 'option value'\n                    // for example:\n                    index: index, // start at first slide\n                    hideAnimationDuration: 0,\n                    showAnimationDuration: 0,\n                    history: false,\n                    maxSpreadZoom: 3,\n                    //showHideOpacity: true,\n                    preload: [3, 3]\n\n                };\n\n                // Initializes and opens PhotoSwipe\n                const gallery = new PhotoSwipe(pswpElement,\n                    PhotoSwipeUI_Default, this.photoSwipeImages,\n                    options);\n\n                gallery.listen('gettingData', function (index, item) {\n                    if (item.w < 1 || item.h < 1) { // unknown size\n\n                        const img = new Image();\n\n                        img.onload = function () { // will get size after load\n\n                            item.w = this.width; // set image width\n                            item.h = this.height; // set image height\n\n                            gallery.invalidateCurrItems(); // reinit\n                            // Items\n                            gallery.updateSize(true); // reinit Items\n                        };\n                        img.src = item.src; // let's download image\n                    }\n                });\n                gallery.listen('beforeChange', function (index, item) {\n                    if (typeof gallery.currItem.container !== \"undefined\" && gallery.currItem.container !== null) {\n                        //gallery.currItem.container.classList.add(\"visible\")\n                    }\n                });\n\n                for (let key in this.photoSwipeImages) {\n                    var img = new Image();\n                    img.src = this.photoSwipeImages[key].src;\n                }\n\n                gallery.init();\n            }\n        },\n\n        triggerScrollForDrift() {\n            setTimeout(function () {\n                window.scrollTo(0, window.scrollY + 1)\n            }, 100);\n        },\n\n        triggerClick(target) {\n            target.closest(\".swiper-slide\").click();\n        }\n    }\n}\n</script>\n","var render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\n    \"div\",\n    {\n      staticClass: \"row transform-unset\",\n      staticStyle: { transform: \"translate(0px, 0px)\" },\n      attrs: { itemscope: \"\", itemtype: \"https://schema.org/Thing\" }\n    },\n    [\n      _c(\n        \"div\",\n        {\n          staticClass:\n            \"d-none d-lg-flex col-lg-2 single__thumb-swiper-container\"\n        },\n        [\n          _c(\n            \"div\",\n            {\n              ref: \"thumbs\",\n              staticClass:\n                \"single__thumb-swiper swiper-container swiper-container-vertical\"\n            },\n            [\n              _c(\n                \"div\",\n                { staticClass: \"swiper-wrapper\" },\n                _vm._l(_vm.carouselImages, function(imagePreview) {\n                  return _c(\n                    \"div\",\n                    {\n                      staticClass: \"swiper-slide\",\n                      on: {\n                        mousedown: function($event) {\n                          return _vm.triggerClick($event.target)\n                        }\n                      }\n                    },\n                    [\n                      imagePreview.isVideo\n                        ? _c(\n                            \"div\",\n                            {\n                              staticClass: \"single__video-thumb\",\n                              attrs: {\n                                \"data-url\": imagePreview.url,\n                                \"data-type\": \"video\",\n                                title: _vm.getItemName() + \" video\"\n                              }\n                            },\n                            [\n                              _c(\"svg\", [\n                                _c(\"use\", {\n                                  attrs: {\n                                    \"xlink:href\": \"#svg_play\",\n                                    \"xmlns:xlink\":\n                                      \"http://www.w3.org/1999/xlink\"\n                                  }\n                                })\n                              ])\n                            ]\n                          )\n                        : imagePreview.is3d\n                        ? _c(\n                            \"div\",\n                            {\n                              staticClass: \"single__3d-thumb\",\n                              attrs: {\n                                \"data-url\": imagePreview.url,\n                                \"data-type\": \"3d\",\n                                title: _vm.getItemName() + \" 3D\"\n                              }\n                            },\n                            [\n                              _c(\"svg\", [\n                                _c(\"use\", {\n                                  attrs: {\n                                    \"xlink:href\": \"#svg_3d\",\n                                    \"xmlns:xlink\":\n                                      \"http://www.w3.org/1999/xlink\"\n                                  }\n                                })\n                              ])\n                            ]\n                          )\n                        : _c(\"img\", {\n                            key: imagePreview.url,\n                            staticClass:\n                              \"single__thumb-swiper-image swiper-lazy\",\n                            attrs: {\n                              \"data-src\": imagePreview.url,\n                              \"data-bigimg\": imagePreview.urlBig,\n                              \"data-type\": \"img\",\n                              alt: _vm.getAltText(imagePreview),\n                              title: _vm.getItemName(),\n                              draggable: \"false\"\n                            }\n                          })\n                    ]\n                  )\n                }),\n                0\n              )\n            ]\n          ),\n          _vm._v(\" \"),\n          _c(\"div\", { staticClass: \"thumb-swiper-next\" }, [\n            _c(\"svg\", [\n              _c(\"use\", {\n                attrs: {\n                  \"xlink:href\": \"#svg_arrow\",\n                  \"xmlns:xlink\": \"https://www.w3.org/1999/xlink\"\n                }\n              })\n            ])\n          ]),\n          _vm._v(\" \"),\n          _c(\"div\", { staticClass: \"thumb-swiper-prev\" }, [\n            _c(\"svg\", [\n              _c(\"use\", {\n                attrs: {\n                  \"xlink:href\": \"#svg_arrow\",\n                  \"xmlns:xlink\": \"https://www.w3.org/1999/xlink\"\n                }\n              })\n            ])\n          ])\n        ]\n      ),\n      _vm._v(\" \"),\n      _c(\n        \"div\",\n        { staticClass: \"col-12 col-lg-10 single-swiper-container-col\" },\n        [\n          _c(\n            \"div\",\n            { staticClass: \"single__wishlist-btn single__wishlist-btn--top\" },\n            [_c(\"add-to-wish-list\")],\n            1\n          ),\n          _vm._v(\" \"),\n          _c(\n            \"div\",\n            {\n              ref: \"single\",\n              staticClass: \"swiper-container single-swiper\",\n              on: {\n                \"~mouseover\": function($event) {\n                  return _vm.triggerScrollForDrift()\n                }\n              }\n            },\n            [\n              _c(\n                \"div\",\n                { staticClass: \"swiper-wrapper\" },\n                _vm._l(_vm.singleImages, function(image, index) {\n                  return _c(\n                    \"div\",\n                    {\n                      staticClass: \"swiper-slide\",\n                      class: {\n                        \"pointer-events-all\": image.isVideo || image.is3d\n                      }\n                    },\n                    [\n                      image.isVideo && image.isYoutube\n                        ? _c(\n                            \"div\",\n                            { staticClass: \"responsive-iframe--video\" },\n                            [\n                              _c(\"iframe\", {\n                                attrs: {\n                                  src:\n                                    \"https://www.youtube-nocookie.com/embed/\" +\n                                    image.url,\n                                  frameborder: \"0\",\n                                  allow:\n                                    \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n                                  allowfullscreen: \"\",\n                                  itemprop: \"image\"\n                                }\n                              })\n                            ]\n                          )\n                        : image.isVideo && !image.isYoutube\n                        ? _c(\n                            \"div\",\n                            { staticClass: \"responsive-iframe--video\" },\n                            [\n                              _c(\"iframe\", {\n                                attrs: {\n                                  src:\n                                    \"https://player.vimeo.com/video/\" +\n                                    image.url +\n                                    \"?h=333e7b7c78&badge=0&autopause=0&player_id=0&app_id=58479\",\n                                  width: \"100%\",\n                                  height: \"100%\",\n                                  frameborder: \"0\",\n                                  allow: \"fullscreen\",\n                                  allowfullscreen: \"\"\n                                }\n                              })\n                            ]\n                          )\n                        : image.is3d\n                        ? _c(\n                            \"div\",\n                            {\n                              ref: \"threedcontainer\",\n                              refInFor: true,\n                              staticClass: \"responsive-iframe--3d\"\n                            },\n                            [\n                              _c(\"iframe\", {\n                                attrs: {\n                                  \"data-src\": image.url,\n                                  frameborder: \"0\",\n                                  allowfullscreen: \"\",\n                                  itemprop: \"image\"\n                                }\n                              })\n                            ]\n                          )\n                        : _c(\n                            \"a\",\n                            {\n                              attrs: { title: _vm.getItemName() },\n                              on: {\n                                click: function($event) {\n                                  $event.preventDefault()\n                                  return _vm.openFullScreenModal($event)\n                                }\n                              }\n                            },\n                            [\n                              _c(\n                                \"div\",\n                                { staticClass: \"swiper-zoom-container\" },\n                                [\n                                  _c(\"img\", {\n                                    key: image.urlMiddle,\n                                    staticClass: \"single__swiper-image\",\n                                    class: { \"swiper-lazy\": index > 0 },\n                                    attrs: {\n                                      \"data-zoom\": image.urlBig,\n                                      src: index === 0 ? image.urlMiddle : \"\",\n                                      \"data-src\": image.urlMiddle,\n                                      alt: _vm.getAltText(image),\n                                      title: _vm.getItemName(),\n                                      itemprop: \"image\"\n                                    }\n                                  }),\n                                  _vm._v(\" \"),\n                                  index > 0\n                                    ? _c(\"div\", {\n                                        staticClass: \"swiper-lazy-preloader\"\n                                      })\n                                    : _vm._e()\n                                ]\n                              )\n                            ]\n                          )\n                    ]\n                  )\n                }),\n                0\n              ),\n              _vm._v(\" \"),\n              _c(\"div\", { staticClass: \"single-swiper-pagination\" }),\n              _vm._v(\" \"),\n              _c(\"div\", {\n                staticClass: \"drift-pane\",\n                class: \"drift-pane-\" + _vm.currentVariation.item.id\n              }),\n              _vm._v(\" \"),\n              _c(\n                \"div\",\n                {\n                  staticClass: \"single-swiper__fullscreen\",\n                  on: {\n                    click: function($event) {\n                      $event.stopPropagation()\n                      $event.preventDefault()\n                      return _vm.openPhotoSwiper()\n                    }\n                  }\n                },\n                [\n                  _vm._v(\n                    \"\\n                \" +\n                      _vm._s(\n                        _vm.$translate(\"Weberbuero::Template.fullscreen\")\n                      ) +\n                      \"\\n            \"\n                  )\n                ]\n              ),\n              _vm._v(\" \"),\n              _c(\n                \"div\",\n                { staticClass: \"swiper-button-next swiper-button-white\" },\n                [\n                  _c(\"svg\", [\n                    _c(\"use\", {\n                      attrs: {\n                        \"xlink:href\": \"#svg_arrow\",\n                        \"xmlns:xlink\": \"https://www.w3.org/1999/xlink\"\n                      }\n                    })\n                  ])\n                ]\n              ),\n              _vm._v(\" \"),\n              _c(\n                \"div\",\n                { staticClass: \"swiper-button-prev swiper-button-white\" },\n                [\n                  _c(\"svg\", [\n                    _c(\"use\", {\n                      attrs: {\n                        \"xlink:href\": \"#svg_arrow\",\n                        \"xmlns:xlink\": \"https://www.w3.org/1999/xlink\"\n                      }\n                    })\n                  ])\n                ]\n              )\n            ]\n          )\n        ]\n      ),\n      _vm._v(\" \"),\n      (_vm.isItemView && _vm.itemData === null) ||\n      (!_vm.isItemView && _vm.itemData !== null)\n        ? _c(\"div\", { staticClass: \"single__swiper-full-screen-modal\" }, [\n            _c(\n              \"div\",\n              {\n                staticClass: \"single__swiper-full-screen-modal-close\",\n                on: {\n                  click: function($event) {\n                    return _vm.closeModal()\n                  }\n                }\n              },\n              [\n                _c(\n                  \"svg\",\n                  {\n                    attrs: {\n                      \"data-dismiss\": \"modal\",\n                      height: \"26\",\n                      width: \"27\"\n                    }\n                  },\n                  [\n                    _c(\"use\", {\n                      attrs: {\n                        \"xlink:href\": \"#svg_close\",\n                        \"xmlns:xlink\": \"http://www.w3.org/1999/xlink\"\n                      }\n                    })\n                  ]\n                )\n              ]\n            ),\n            _vm._v(\" \"),\n            _c(\n              \"div\",\n              { staticClass: \"single__swiper-full-screen-modal-img-wrapper\" },\n              [\n                _c(\"img\", {\n                  staticClass: \"single__swiper-full-screen-modal-img\",\n                  attrs: {\n                    alt: _vm.$store.getters.currentItemVariation.texts.name1,\n                    src: \"\"\n                  }\n                }),\n                _vm._v(\" \"),\n                _c(\"iframe\", {\n                  staticClass: \"single__swiper-full-screen-modal-iframe\",\n                  attrs: {\n                    src: \"\",\n                    frameborder: \"0\",\n                    allow:\n                      \"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\",\n                    allowfullscreen: \"\",\n                    itemprop: \"image\"\n                  }\n                })\n              ]\n            )\n          ])\n        : _vm._e()\n    ]\n  )\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","import { render, staticRenderFns } from \"./ItemImageCarousel.vue?vue&type=template&id=5285279e&\"\nimport script from \"./ItemImageCarousel.vue?vue&type=script&lang=js&\"\nexport * from \"./ItemImageCarousel.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\n/* hot reload */\nif (module.hot) {\n  var api = require(\"/Users/fhartwig/Sites/pp-weberbuero/node_modules/vue-hot-reload-api/dist/index.js\")\n  api.install(require('vue'))\n  if (api.compatible) {\n    module.hot.accept()\n    if (!api.isRecorded('5285279e')) {\n      api.createRecord('5285279e', component.options)\n    } else {\n      api.reload('5285279e', component.options)\n    }\n    module.hot.accept(\"./ItemImageCarousel.vue?vue&type=template&id=5285279e&\", function () {\n      api.rerender('5285279e', {\n        render: render,\n        staticRenderFns: staticRenderFns\n      })\n    })\n  }\n}\ncomponent.options.__file = \"resources/js/src/app/components/item/ItemImageCarousel.vue\"\nexport default component.exports","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ItemImageCarousel.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ItemImageCarousel.vue?vue&type=script&lang=js&\"","export * from \"-!../../../../../../node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ItemImageCarousel.vue?vue&type=template&id=5285279e&\""],"sourceRoot":""}