Bugfixes

src/Carousel/Carousel.js

@@ -128,7 +128,7 @@ export class Carousel extends Base {
 
     if (!this.$viewport) {
       this.$viewport = document.createElement("div");
-      this.$viewport.classList.add(prefix + classNames.viewport);
+      this.$viewport.classList.add(...(prefix + classNames.viewport).split(" "));
 
       this.$viewport.append(...this.$container.childNodes);
 
@@ -139,7 +139,7 @@ export class Carousel extends Base {
 
     if (!this.$track) {
       this.$track = document.createElement("div");
-      this.$track.classList.add(prefix + classNames.track);
+      this.$track.classList.add(...(prefix + classNames.track).split(" "));
 
       this.$track.append(...this.$viewport.childNodes);
 
@@ -327,7 +327,7 @@ export class Carousel extends Base {
 
       node.dataset.isTestEl = 1;
       node.style.visibility = "hidden";
-      node.classList.add(this.option("prefix") + this.option("classNames.slide"));
+      node.classList.add(...(this.option("prefix") + this.option("classNames.slide")).split(" "));
 
       // Assume all slides have the same custom class, if any
       if (firstSlide.customClass) {
@@ -644,7 +644,7 @@ export class Carousel extends Base {
     const div = document.createElement("div");
 
     div.dataset.index = slide.index;
-    div.classList.add(this.option("prefix") + this.option("classNames.slide"));
+    div.classList.add(...(this.option("prefix") + this.option("classNames.slide")).split(" "));
 
     if (slide.customClass) {
       div.classList.add(...slide.customClass.split(" "));

src/Carousel/plugins/Navigation/Navigation.js

@@ -63,7 +63,7 @@ export class Navigation {
   build() {
     if (!this.$container) {
       this.$container = document.createElement("div");
-      this.$container.classList.add(this.option("classNames.main"));
+      this.$container.classList.add(...this.option("classNames.main").split(" "));
 
       this.carousel.$container.appendChild(this.$container);
     }

src/Fancybox/plugins/Hash/Hash.js

@@ -83,21 +83,16 @@ export class Hash {
       return;
     }
 
-    // Simply make browser to move back one page in the session history,
+    // Restore original url
-    // if new history entry is successfully created
+    try {
-    if (!this.hasCreatedHistory) {
+      window.history.replaceState(
-      try {
+        {},
-        window.history.replaceState(
+        document.title,
-          {},
+        window.location.pathname + window.location.search + (this.origHash || "")
-          document.title,
+      );
-          window.location.pathname + window.location.search + (this.origHash ? "#" + this.origHash : "")
-        );
-
-        return;
-      } catch (e) {}
-    }
 
-    window.history.back();
+      return;
+    } catch (e) {}
   }
 
   attach(fancybox) {
@@ -167,7 +162,7 @@ export class Hash {
     const instance = Fancybox && Fancybox.getInstance();
 
     if (instance && instance.plugins.Hash) {
-      // Look if this is inside currently active gallery
+      // Check if hash matches currently active gallery
       if (slug) {
         const carousel = instance.Carousel;
 

src/Fancybox/plugins/Html/Html.js

@@ -445,6 +445,9 @@ export class Html {
           $html = document.getElementsByTagName("html")[0],
           $body = document.body;
 
+        // Allow content to expand horizontally
+        parentStyle.width = "";
+
         // Get rid of vertical scrollbar
         $body.style.overflow = "hidden";
 

src/Fancybox/plugins/Html/Html.scss

@@ -8,6 +8,7 @@
       #{$p}.has-pdf &,
       #{$p}.has-video &,
       #{$p}.has-html5video & {
+        max-width: 100%;
         flex-shrink: 1;
         min-height: 1px;
         overflow: visible;

src/Fancybox/plugins/Image/Image.js

@@ -538,12 +538,14 @@ export class Image {
     const zoomInClass = this.fancybox.option("Image.canZoomInClass");
     const zoomOutClass = this.fancybox.option("Image.canZoomOutClass");
 
+    classList.remove(zoomOutClass);
+    classList.remove(zoomInClass);
+
     if (panzoom && clickAction === "toggleZoom") {
       const canZoomIn =
         panzoom && panzoom.content.scale === 1 && panzoom.option("maxScale") - panzoom.content.scale > 0.01;
 
       if (canZoomIn) {
-        classList.remove(zoomOutClass);
         classList.add(zoomInClass);
       } else if (panzoom.content.scale > 1 && !touchIsEnabled) {
         classList.add(zoomOutClass);

src/Fancybox/plugins/ScrollLock/ScrollLock.js

@@ -32,6 +32,9 @@ export class ScrollLock {
     //* Prevent bouncing while scrolling on mobile devices
     window.addEventListener("touchstart", this.onTouchstart, { passive: false });
     window.addEventListener("touchmove", this.onTouchmove, { passive: false });
+
+    //* Prevent window scrolling with mouse wheel
+    this.fancybox.$container.addEventListener("wheel", this.onWheel, { passive: false });
   }
 
   /**
@@ -115,6 +118,13 @@ export class ScrollLock {
     }
   }
 
+  /**
+   * Handle `wheel` event
+   */
+  onWheel(event) {
+    event.preventDefault();
+  }
+
   /**
    * Clean everything up
    */
@@ -133,6 +143,8 @@ export class ScrollLock {
 
     window.removeEventListener("touchstart", this.onTouchstart, false);
     window.removeEventListener("touchmove", this.onTouchmove, false);
+
+    this.fancybox.$container.removeEventListener("wheel", this.onWheel, { passive: false });
   }
 
   attach() {

src/Panzoom/Panzoom.js

@@ -621,6 +621,7 @@ export class Panzoom extends Base {
 
   /**
    * Trigger update events before/after resizing content and viewport
+   * @param {Boolean} silently Should trigger `afterUpdate` event at the end
    */
   updateMetrics(silently) {
     if (silently !== true) {

tests/4_fancybox_test.js

@@ -814,4 +814,54 @@ describe("Fancybox", function () {
 
     instance.close();
   });
+
+  it("correctly restores URL hash after closing", async function () {
+    const sandbox = createSandbox(imageGalleryMarkup);
+    const triggers = sandbox.querySelectorAll("a");
+
+    var url = new URL(document.URL);
+
+    url.hash = "#aaa";
+    document.location.href = url.href;
+
+    // Gallery
+    // ====
+    await delay(100);
+
+    triggers[0].click();
+
+    const instance = Fancybox.getInstance();
+
+    await delay(300);
+
+    expect(new URL(document.URL).hash).to.be.equal("#gallery-1");
+
+    instance.next();
+
+    await delay(300);
+
+    expect(new URL(document.URL).hash).to.be.equal("#gallery-2");
+
+    instance.close();
+
+    await delay(300);
+
+    expect(new URL(document.URL).hash).to.be.equal("#aaa");
+
+    // Single
+    // ====
+    Fancybox.show([{ src: "<p>Lorem ipsum dolor sit amet</p>", type: "html" }]);
+
+    await delay(300);
+
+    Fancybox.close();
+
+    await delay(300);
+
+    expect(new URL(document.URL).hash).to.be.equal("#aaa");
+
+    history.replaceState({}, document.title, window.location.href.split("#")[0]);
+
+    sandbox.parentNode.removeChild(sandbox);
+  });
 });