[FIX] website: fix hover effect and Images Wall

Steps to reproduce the bug:

- In Website edit mode, drag and drop an "Images Wall" snippet onto the
page.
- Click on the first image of this snippet.
- In the "Animation" options of the image, select "On Hover".
- Save the page.
- Click on the first image of the "Images Wall" snippet.
- Bug: The image in the slideshow still has the overlay that appeared
due to the hover effect.

This commit fixes this issue by resetting images to their original
source in the slideshow.

task-3562305

closes odoo/odoo#139695

Signed-off-by: Soukéina Bojabza (sobo) <sobo@odoo.com>

addons/website/static/src/snippets/s_image_gallery/000.js

@@ -12,6 +12,14 @@ const GalleryWidget = publicWidget.Widget.extend({
         'click img': '_onClickImg',
     },
 
+    /**
+     * @override
+     */
+    start() {
+        this._super(...arguments);
+        this.originalSources = [...this.el.querySelectorAll("img")].map(img => img.getAttribute("src"));
+    },
+
     //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
@@ -24,13 +32,23 @@ const GalleryWidget = publicWidget.Widget.extend({
      * @param {Event} ev
      */
     _onClickImg: function (ev) {
-        if (this.$modal || ev.currentTarget.matches("a > img")) {
+        const clickedEl = ev.currentTarget;
+        if (this.$modal || clickedEl.matches("a > img")) {
             return;
         }
         var self = this;
-        var $cur = $(ev.currentTarget);
 
-        var $images = $cur.closest('.s_image_gallery').find('img');
+        let imageEls = this.el.querySelectorAll("img");
+        const currentImageEl = clickedEl.closest("img");
+        const currentImageIndex = [...imageEls].indexOf(currentImageEl);
+        // We need to reset the images to their original source because it might
+        // have been changed by a mouse event (e.g. "hover effect" animation).
+        imageEls = [...imageEls].map((el, i) => {
+            const cloneEl = el.cloneNode(true);
+            cloneEl.src = this.originalSources[i];
+            return cloneEl;
+        });
+
         var size = 0.8;
         var dimensions = {
             min_width: Math.round(window.innerWidth * size * 0.9),
@@ -41,12 +59,10 @@ const GalleryWidget = publicWidget.Widget.extend({
             height: Math.round(window.innerHeight * size)
         };
 
-        var $img = ($cur.is('img') === true) ? $cur : $cur.closest('img');
-
-        const milliseconds = $cur.closest('.s_image_gallery').data('interval') || false;
+        const milliseconds = this.el.dataset.interval || false;
         this.$modal = $(renderToElement('website.gallery.slideshow.lightbox', {
-            images: $images.get(),
-            index: $images.index($img),
+            images: imageEls,
+            index: currentImageIndex,
             dim: dimensions,
             interval: milliseconds || 0,
             id: uniqueId("slideshow_"),