https://kalibr.tech/themes/kalibr/js/kalibr-fotorama.js?tmf5z3

1(function($, Drupal) {
2
3  'use strict';
4
5  /**
6   * Global behaviour.
7   */
8  Drupal.behaviors.fotorama = {
9    attach: function(context, settings) {
10      var $fotoramaDiv = $('#space-slider-fotorama')
11        // listen to the events
12        /*.on(
13            'fotorama:ready '            // Fotorama is fully ready
14            'fotorama:show ' +            // Start of transition to the new frame
15            'fotorama:showend ' +         // End of the show transition
16            'fotorama:load ' +            // Stage image of some frame is loaded
17            'fotorama:error ' +           // Stage image of some frame is broken
18            'fotorama:startautoplay ' +   // Slideshow is started
19            'fotorama:stopautoplay ' +    // Slideshow is stopped
20            'fotorama:fullscreenenter ' + // Fotorama is fullscreened
21            'fotorama:fullscreenexit ' +  // Fotorama is unfullscreened
22            'fotorama:loadvideo ' +       // Video iframe is loaded
23            'fotorama:unloadvideo',       // Video iframe is removed
24            function (e, fotorama, extra) {
25              console.log('## ' + e.type);
26              console.log('active frame', fotorama.activeFrame);
27              console.log('additional data', extra);
28            }
29        )*/
30        // initialize fotorama manually
31        .fotorama();
32        
33      // get the API object
34      var fotorama = $fotoramaDiv.data('fotorama');
35
36      let obj = $('#space-slider-fotorama-nav-container button');
37      $.each(obj, function(key, value) {
38        $(this).on('click', function() {
39          obj.removeClass('nav-active');
40          $(this).addClass('nav-active');
41          fotorama.show(key);
42          let image_src = $('#space-slider-fotorama-nav-container').find('button.nav-active').find('img').attr('src');
43          if (image_src.indexOf('video') != -1 || image_src.indexOf('youtube') != -1) {
44            $('.space__details-wrapper, .space__details-building-number').css('display', 'none');
45            fotorama.playVideo();
46          } else {
47            $('.space__details-wrapper').css('display', 'flex');
48            $('.space__details-building-number').css('display', 'inherit');
49          }
50        })
51      });
52      
53      // shifting frame by left button
54      $('#space-slider-fotorama-previous--').on('click', function() {
55        let btn_active = $('#space-slider-fotorama-nav-container').find('button.nav-active');
56        let index_active = $('#space-slider-fotorama-nav-container button').index(btn_active);
57        if (index_active > 0) {
58          $('#space-slider-fotorama-nav-container').find('button.nav-active').removeClass('nav-active').prev().addClass('nav-active').focus();
59          fotorama.show(index_active - 1);
60          let image_src = $('#space-slider-fotorama-nav-container').find('button.nav-active').find('img').attr('src');
61          if (image_src.indexOf('video') != -1 || image_src.indexOf('youtube') != -1) {
62            $('.space__details-wrapper, .space__details-building-number').css('display', 'none');
63            fotorama.playVideo();
64          } else {
65            $('.space__details-wrapper').css('display', 'flex');
66            $('.space__details-building-number').css('display', 'inherit');
67          }
68        }
69      });
70      
71      // shifting frame by right button
72      $('#space-slider-fotorama-next--').on('click', function() {
73        let btn_active = $('#space-slider-fotorama-nav-container').find('button.nav-active');
74        let index_active = $('#space-slider-fotorama-nav-container button').index(btn_active);
75        let count = $('#space-slider-fotorama-nav-container button').length;
76        if (index_active < count - 1) {
77          $('#space-slider-fotorama-nav-container').find('button.nav-active').removeClass('nav-active').next().addClass('nav-active').focus();
78          fotorama.show(index_active + 1);
79          let image_src = $('#space-slider-fotorama-nav-container').find('button.nav-active').find('img').attr('src');
80          if (image_src.indexOf('video') != -1 || image_src.indexOf('youtube') != -1) {
81            $('.space__details-wrapper, .space__details-building-number').css('display', 'none');
82            fotorama.playVideo();
83          } else {
84            $('.space__details-wrapper').css('display', 'flex');
85            $('.space__details-building-number').css('display', 'inherit');
86          }
87        }
88      });
89      
90      // shifting frame by left-right arrows
91      $(document).keydown(function(e) {
92        if (e.keyCode == 37) { // left arrow
93          $('#space-slider-fotorama-previous--').focus().trigger('click');
94        } else if (e.keyCode == 39) { // right arrow
95          $('#space-slider-fotorama-next--').focus().trigger('click');
96        }
97      });
98      

99      // shifting frame to left-right by mouse
100      $("#space-slider-fotorama").on('mouseup fotorama:show', function(e, fotorama) {
101        if(fotorama) {
102          $('#space-slider-fotorama-nav-container').find('button.nav-active').removeClass('nav-active');
103          let obj = $('#space-slider-fotorama-nav-container button');
104          $.each( obj, function( key, value ) {
105            if( key == fotorama.activeFrame.i - 1) {
106              $(this).addClass('nav-active').focus();
107              let image_src = $('#space-slider-fotorama-nav-container').find('button.nav-active').find('img').attr('src');
108              if (image_src.indexOf('video') != -1 || image_src.indexOf('youtube') != -1) {
109                $('.space__details-wrapper, .space__details-building-number').css('display', 'none');
110                fotorama.playVideo();
111              } else {
112                $('.space__details-wrapper').css('display', 'flex');
113                $('.space__details-building-number').css('display', 'inherit');
114              }
115            }
116          });
117        }
118      });
119    }
120  }
121}(jQuery, Drupal));