https://babilou-family.sg/themes/custom/bbf/assets/js/features/colorbox.js?thdgt4

1(function ($, Drupal, once) {
2
3  /**
4   * Enable slider.
5   */
6  Drupal.behaviors.mediaModal = {
7    attach: function (context, settings) {
8
9      // Photos.
10      var colorboxSettings = {
11        inline: false,
12        maxWidth: '80%',
13        maxHeight: '95%',
14        rel: 'gal',
15        opacity: 0.2,
16        overlayClose: true,
17        fadeOut: 100,
18        closeButton: true,
19        scalePhotos: true,
20        current: false,
21        returnFocus: false,
22        onOpen: function() {
23          $('body').addClass('modal-is-open');
24        },
25        onComplete: function() {
26          $.colorbox.resize();
27
28          // Launch playback for local videos.
29          if ($('#cboxLoadedContent video').length) {
30            $('#cboxLoadedContent video')[0].play();
31          }
32        },
33        onClosed: function() {
34
35          // Pause local videos playback.
36          if ($('video').length) {
37            $('video')[0].pause();
38          }
39
40          $('body').removeClass('modal-is-open');
41        }
42      };
43
44      $(once('mediaModal', '.image__thumbnail a', context))
45        .colorbox(colorboxSettings);
46
47      // Videos.
48      var colorboxSettingsVideo = colorboxSettings;
49
50      colorboxSettingsVideo.inline = true;
51      colorboxSettingsVideo.innerWidth = '700px';
52      colorboxSettingsVideo.innerHeight = '400px';
53
54      $(once('mediaModal', '.video__thumbnail a, .local-video__thumbnail a, .multimedia__video .full-link', context))
55        .colorbox(colorboxSettingsVideo);
56
57      $(once('mediaModal', '.media__media .media__play, .media__content .media__play', context)).on('click', function() {
58        $(this).parents('.media__media, .multimedia__video').find('a').trigger('click');
59      });
60
61    }
62  };
63
64})(jQuery, Drupal, once);