[FIX] website: fix image carousel

We fix a number of problems:
    - grayscale filter not being applied except on desktop Firefox
    - incorrect vertical-align on iOS
    - image sliders being displayed below the margin on iOS
    - carousel indicators flickering at initial load
    - very short indicator panel, almost unusable on mobile
    - misaligned indicators because of first margin
There are two modes on which these fixes apply:
    - image gallery in slideshow
    - slideshow in modal
       (e.g. obtained by clicking on the gallery set on masonry mode)
Note that due to a refactoring, the gallerySlider was not loaded in the modal,
completely breaking the indicators.

Coauthored by @nle-odoo

opw 1874274

closes odoo/odoo#27226

1 files changed, 7 insertions, 1 deletions

diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js
index d9dc076f596..9f4a1566d35 100644
--- a/addons/website/static/src/js/content/snippets.animation.js
+++ b/addons/website/static/src/js/content/snippets.animation.js
@@ -678,6 +678,7 @@ registry.gallery = Animation.extend({
      * @param {Event} ev
      */
     _onClickImg: function (ev) {
+        var self = this;
         var $cur = $(ev.currentTarget);
 
         var urls = [];
@@ -722,7 +723,12 @@ registry.gallery = Animation.extend({
         $modal.find('.modal-content, .modal-body.o_slideshow').css('height', '100%');
         $modal.appendTo(document.body);
 
-        this.carousel = new registry.gallery_slider($modal.find('.carousel').carousel());
+        $modal.one('shown.bs.modal', function () {
+            self.trigger_up('animation_start_demand', {
+                editableMode: false,
+                $target: $modal.find('.modal-body.o_slideshow'),
+            });
+        });
     },
 });