diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 3584628ae..9f8ca60b6 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -75,8 +75,18 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: setup
+      - uses: dorny/paths-filter@v3
+        id: changes
+        with:
+          filters: |
+            docs:
+              - 'docs/**'
+              - 'package.json'
+
+      - if: steps.changes.outputs.docs == 'true'
+        name: setup
         uses: ./.github/workflows/shared/setup
 
-      - name: build-doc
+      - if: steps.changes.outputs.docs == 'true'
+        name: build-doc
         run: yarn ci:build-doc
diff --git a/cypress/e2e/navbar.cy.ts b/cypress/e2e/core/navbar.cy.ts
similarity index 99%
rename from cypress/e2e/navbar.cy.ts
rename to cypress/e2e/core/navbar.cy.ts
index b71a3dcf8..f242ec6bd 100644
--- a/cypress/e2e/navbar.cy.ts
+++ b/cypress/e2e/core/navbar.cy.ts
@@ -1,6 +1,6 @@
-import { getViewer, waitViewerReady } from '../utils';
+import { getViewer, waitViewerReady } from '../../utils';
 
-describe('navbar', () => {
+describe('core: navbar', () => {
     beforeEach(() => {
         localStorage.photoSphereViewer_touchSupport = 'false';
         cy.visit('e2e/navbar.html');
diff --git a/cypress/e2e/compass.cy.ts b/cypress/e2e/plugins/compass.cy.ts
similarity index 58%
rename from cypress/e2e/compass.cy.ts
rename to cypress/e2e/plugins/compass.cy.ts
index 2130b179d..17e260ac1 100644
--- a/cypress/e2e/compass.cy.ts
+++ b/cypress/e2e/plugins/compass.cy.ts
@@ -1,8 +1,10 @@
 import type { CompassPlugin, CompassPluginConfig } from '@photo-sphere-viewer/compass-plugin';
+import type { MarkersPlugin } from '@photo-sphere-viewer/markers-plugin';
 import type { Point } from '@photo-sphere-viewer/core';
-import { checkPosition, getPlugin, getViewer, waitViewerReady } from '../utils';
+import { checkPosition, getPlugin, getViewer, waitViewerReady } from '../../utils';
+import { BASE_URL, NO_LOG } from '../../utils/constants';
 
-describe('compass', () => {
+describe('plugin: compass', () => {
     beforeEach(() => {
         cy.visit('e2e/compass.html');
         waitViewerReady();
@@ -16,13 +18,11 @@ describe('compass', () => {
     });
 
     it('should hide the compass', () => {
-        getPlugin<CompassPlugin>('compass', 'hide compass')
-            .then(compass => compass.hide());
+        getCompass('hide compass').then(compass => compass.hide());
 
         cy.get('.psv-compass').should('not.be.visible');
 
-        getPlugin<CompassPlugin>('compass', 'show compass')
-            .then(compass => compass.show());
+        getCompass('show compass').then(compass => compass.show());
 
         cy.get('.psv-compass').should('be.visible');
     });
@@ -65,8 +65,7 @@ describe('compass', () => {
     });
 
     it('should disable navigation', () => {
-        getPlugin<CompassPlugin>('compass', 'disable navigation')
-            .then(compass => compass.setOption('navigation', false));
+        getCompass('disable navigation').then(compass => compass.setOption('navigation', false));
 
         withCompassPosition(({ element, x, y, width, height }) => {
             const point = { clientX: x + width * .5, clientY: y + height * .75 };
@@ -97,8 +96,7 @@ describe('compass', () => {
 
         checkPosition({ yaw: Math.PI / 2, pitch: -1 });
 
-        getPlugin<CompassPlugin>('compass', 'set resetPitch')
-            .then(compass => compass.setOption('resetPitch', true));
+        getCompass('set resetPitch').then(compass => compass.setOption('resetPitch', true));
 
         withCompassPosition(({ element, x, y, width, height }) => {
             const point = { clientX: x + width * .5, clientY: y + height * .75 };
@@ -118,13 +116,14 @@ describe('compass', () => {
         backgroundSvg: '<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="50" fill="rgba(0, 0, 0, .5)"/></svg>',
     } satisfies CompassPluginConfig).forEach(([key, value]) => {
         it(`should set the ${key}`, () => {
-            getPlugin<CompassPlugin>('compass', `set ${key}`)
-                .then(compass => compass.setOption(key as any, value));
+            getCompass(`set ${key}`).then(compass => compass.setOption(key as any, value));
 
             if (key === 'navigationColor') {
                 withCompassPosition(({ element, x, y, width, height }) => {
+                    const point = { clientX: x + width * .5, clientY: y + height * .75 };
+
                     element
-                        .trigger('mousemove', { clientX: x + width * .5, clientY: y + height * .75 })
+                        .trigger('mousemove', point)
                         .compareScreenshots(`set-${key}`)
                         .trigger('mouseleave');
                 });
@@ -152,15 +151,13 @@ describe('compass', () => {
             ['bottom center', { x: vw / 2 - size / 2, y: vh - nav - margin - size }],
             ['bottom right', { x: vw - size - margin, y: vh - nav - margin - size }],
         ].forEach(([position, coords]: [string, Point]) => {
-            getPlugin<CompassPlugin>('compass', `set position ${position}`)
-                .then(compass => compass.setOption('position', position));
+            getCompass(`set position ${position}`).then(compass => compass.setOption('position', position));
 
             cy.get('.psv-compass')
-                .then(element => {
-                    const { x, y } = element[0].getBoundingClientRect();
-                    return { x, y } satisfies Point;
-                })
-                .should('deep.equal', coords);
+                .should(compass => {
+                    const { x, y } = compass[0].getBoundingClientRect();
+                    expect({ x, y }).to.deep.eq(coords);
+                });
         });
 
         getViewer('hide navbar')
@@ -172,8 +169,7 @@ describe('compass', () => {
             ['bottom center', { x: vw / 2 - size / 2, y: vh - margin - size }],
             ['bottom right', { x: vw - size - margin, y: vh - margin - size }],
         ].forEach(([position, coords]: [string, Point]) => {
-            getPlugin<CompassPlugin>('compass', `set position ${position}`)
-                .then(compass => compass.setOption('position', position));
+            getCompass(`set position ${position}`).then(compass => compass.setOption('position', position));
 
             cy.get('.psv-compass')
                 .then(element => {
@@ -185,46 +181,93 @@ describe('compass', () => {
     });
 
     it('should show hotspots', () => {
-        getPlugin<CompassPlugin>('compass', 'set hotspots')
-            .then(compass => {
-                compass.setHotspots([
-                    // @ts-ignore missing pitch
-                    { yaw: 0 },
-                    { yaw: Math.PI / 2, pitch: 0 },
-                    { yaw: Math.PI, pitch: -1 },
-                    { yaw: Math.PI * 3 / 2, pitch: 1 },
-                ]);
-            });
+        getCompass('set hotspots').then(compass => {
+            compass.setHotspots([
+                // @ts-ignore missing pitch
+                { yaw: 0 },
+                { yaw: Math.PI / 2, pitch: 0 },
+                { yaw: Math.PI, pitch: -1 },
+                { yaw: Math.PI * 3 / 2, pitch: 1 },
+            ]);
+        });
 
         cy.get('.psv-compass').compareScreenshots('hotspots');
     });
 
     it('should set hotspots color', () => {
-        getPlugin<CompassPlugin>('compass', 'set hotspots')
-            .then(compass => {
-                compass.setOption('hotspotColor', 'green')
-
-                compass.setHotspots([
-                    { yaw: 0, pitch: 0 },
-                    { yaw: Math.PI / 2, pitch: 0, color: 'red' },
-                    { yaw: Math.PI, pitch: 0, color: 'rgba(255, 0, 0, 0.5)' },
-                    { yaw: Math.PI * 3 / 2, pitch: 0, color: '#ff000050' },
-                ]);
-            });
+        getCompass('set hotspots').then(compass => {
+            compass.setOption('hotspotColor', 'green')
+
+            compass.setHotspots([
+                { yaw: 0, pitch: 0 },
+                { yaw: Math.PI / 2, pitch: 0, color: 'red' },
+                { yaw: Math.PI, pitch: 0, color: 'rgba(255, 0, 0, 0.5)' },
+                { yaw: Math.PI * 3 / 2, pitch: 0, color: '#ff000050' },
+            ]);
+        });
 
         cy.get('.psv-compass').compareScreenshots('hotspots-color');
     });
 
-    function withCompassPosition(cb: (res: { element: Cypress.Chainable<JQuery<HTMLElement>>, x: number, y: number, width: number, height: number }) => void) {
-        cy.get('.psv-compass')
-            .then(element => {
-                const { x, y, width, height } = element[0].getBoundingClientRect();
+    it('should display markers', () => {
+        getPlugin<MarkersPlugin>('markers', 'set markers')
+            .then(markers => {
+                markers.setMarkers([
+                    {
+                        id: 'image',
+                        position: { yaw: Math.PI / 2, pitch: 0 },
+                        image: BASE_URL + 'pictos/pin-red.png',
+                        size: { width: 32, height: 32 },
+                        data: { compass: '#cc3333' },
+                    },
+                    {
+                        id: 'image-hidden',
+                        position: { yaw: Math.PI / 2, pitch: 1 },
+                        image: BASE_URL + 'pictos/pin-red.png',
+                        size: { width: 32, height: 32 },
+                    },
+                    {
+                        id: 'polygon',
+                        polygonPixels: [
+                            [2941 / 3, 1413 / 3], [3042 / 3, 1402 / 3], [3222 / 3, 1419 / 3], [3433 / 3, 1463 / 3],
+                            [3480 / 3, 1505 / 3], [3438 / 3, 1538 / 3], [3241 / 3, 1543 / 3], [3041 / 3, 1555 / 3],
+                            [2854 / 3, 1559 / 3], [2739 / 3, 1516 / 3], [2775 / 3, 1469 / 3], [2941 / 3, 1413 / 3],
+                        ],
+                        data: { compass: 'rgba(255, 0, 50, 0.8)' },
+                    },
+                    {
+                        id: 'polyline',
+                        polylinePixels: [
+                            [2478 / 3, 1635 / 3], [2184 / 3, 1747 / 3], [1674 / 3, 1953 / 3], [1166 / 3, 1852 / 3],
+                            [709 / 3, 1669 / 3], [301 / 3, 1519 / 3], [94 / 3, 1399 / 3], [34 / 3, 1356 / 3],
+                        ],
+                        data: { compass: 'rgba(80, 150, 50, 0.8)' },
+                    }
+                ]);
+            });
 
-                cb({
-                    element: cy.wrap(element, { log: false }),
-                    x, y, width, height,
-                });
+        cy.get('.psv-compass').compareScreenshots('markers');
+    });
+
+    function withCompassPosition(cb: (res: {
+        element: Cypress.Chainable<JQuery<HTMLElement>>,
+        x: number,
+        y: number,
+        width: number,
+        height: number,
+    }) => void) {
+        cy.get('.psv-compass').then(element => {
+            const { x, y, width, height } = element[0].getBoundingClientRect();
+
+            cb({
+                element: cy.wrap(element, NO_LOG),
+                x, y, width, height,
             });
+        });
+    }
+
+    function getCompass(log: string) {
+        return getPlugin<CompassPlugin>('compass', log);
     }
 
 });
diff --git a/cypress/e2e/plugins/gallery.cy.ts b/cypress/e2e/plugins/gallery.cy.ts
new file mode 100644
index 000000000..add694c15
--- /dev/null
+++ b/cypress/e2e/plugins/gallery.cy.ts
@@ -0,0 +1,164 @@
+import type { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
+import { getPlugin, getViewer, waitViewerReady } from '../../utils';
+import { BASE_URL } from '../../utils/constants';
+
+describe('plugin: gallery', () => {
+    let first = true;
+
+    beforeEach(() => {
+        cy.visit('e2e/gallery.html');
+        waitViewerReady();
+        if (first) { // wait for async thumbnails
+            cy.wait(1000);
+            first = false;
+        }
+        // createBaseSnapshot();
+    });
+
+    it('should have a gallery', () => {
+        cy.get('.psv-gallery')
+            .should('be.visible')
+            .compareScreenshots('base');
+    });
+
+    it('should hide gallery on panel open', () => {
+        getViewer('open panel').then(viewer => viewer.panel.show('Lorem ipsum'));
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+
+    it('should display fullscreen on mobile', {
+        viewportWidth: 400,
+        viewportHeight: 800,
+    }, () => {
+        cy.get('.psv-gallery')
+            .should(gallery => {
+                const { x, y, width, height } = gallery[0].getBoundingClientRect();
+                expect({ x, y, width, height }).to.deep.eq({ x: 0, y: 0, width: 400, height: 760 });
+            });
+
+        cy.get('.psv-gallery').compareScreenshots('mobile');
+
+        cy.get('.psv-gallery .psv-panel-close-button').click();
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+
+    it('should add a navbar button', () => {
+        cy.get('.psv-gallery-button')
+            .should('be.visible')
+            .should('have.class', 'psv-button--active')
+            .click()
+            .should('not.have.class', 'psv-button--active');
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+
+    it('should highlight the current item', () => {
+        cy.get('[data-psv-gallery-item=sphere]').should('have.class', 'psv-gallery-item--active');
+
+        getViewer('change panorama').then(viewer => viewer.setPanorama(BASE_URL + 'sphere-test.jpg', { transition: false }));
+        waitViewerReady();
+
+        cy.get('[data-psv-gallery-item=sphere]').should('not.have.class', 'psv-gallery-item--active');
+        cy.get('[data-psv-gallery-item=test-sphere]').should('have.class', 'psv-gallery-item--active');
+
+        getViewer('change panorama').then(viewer => viewer.setPanorama(BASE_URL + 'sphere-cropped.jpg', { transition: false }));
+        waitViewerReady();
+
+        cy.get('.psv-gallery-item--active').should('not.exist');
+    });
+
+    it('should change the panorama when clicked', () => {
+        cy.get('[data-psv-gallery-item=test-sphere]').click();
+        waitViewerReady();
+
+        getViewer('check panorama').then(viewer => expect(viewer.config.panorama as string).to.eq(BASE_URL + 'sphere-test.jpg'));
+        cy.get('.psv-caption-content').should('have.text', 'Test sphere'); // use name as caption
+
+        cy.get('[data-psv-gallery-item=1]').click();
+        waitViewerReady();
+
+        cy.get('.psv-caption-content').should('have.text', 'Cape Florida Light, Key Biscayne © Pixexid');
+    });
+
+    it('should hide on click', () => {
+        getGallery('set hideOnClick').then(gallery => gallery.setOption('hideOnClick', true));
+
+        cy.get('[data-psv-gallery-item=test-sphere]').click();
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+
+    it('should change thumbnails size', () => {
+        getGallery('set thumbnailSize').then(gallery => gallery.setOption('thumbnailSize', { width: 100, height: 100 }));
+        cy.wait(500); // more async thumbnails
+
+        cy.get('.psv-gallery').compareScreenshots('set-thumbnailSize');
+    });
+
+    it('should change the items', () => {
+        getGallery('set items').then(gallery => {
+            gallery.setItems([
+                {
+                    id: 1,
+                    panorama: BASE_URL + 'tour/key-biscayne-1.jpg',
+                    thumbnail: BASE_URL + 'tour/key-biscayne-1-thumb.jpg',
+                },
+                {
+                    id: 2,
+                    panorama: BASE_URL + 'tour/key-biscayne-2.jpg',
+                    thumbnail: BASE_URL + 'tour/key-biscayne-2-thumb.jpg',
+                },
+            ]);
+        });
+
+        cy.get('.psv-gallery').compareScreenshots('set-items');
+    });
+
+    it('should change the items w. custom callback', () => {
+        const callback = cy.stub();
+
+        getGallery('set items').then(gallery => {
+            gallery.setItems([
+                {
+                    id: 1,
+                    panorama: BASE_URL + 'tour/key-biscayne-1.jpg',
+                    thumbnail: BASE_URL + 'tour/key-biscayne-1-thumb.jpg',
+                },
+            ], callback);
+        });
+
+        cy.get('[data-psv-gallery-item=1]')
+            .click()
+            .should('have.class', 'psv-gallery-item--active')
+            .then(() => {
+                expect(callback.getCall(0)).to.be.calledWith('1');
+            });
+
+        // not changed
+        getViewer('check panorama').then(viewer => expect(viewer.config.panorama as string).to.eq(BASE_URL + 'sphere-small.jpg'));
+    });
+
+    it('should hide the button when no items', () => {
+        getGallery('set items').then(gallery => gallery.setItems([]));
+
+        cy.get('.psv-gallery-button').should('not.be.visible');
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+
+    function getGallery(log: string) {
+        return getPlugin<GalleryPlugin>('gallery', log);
+    }
+
+});
+
+describe('plugin: gallery', () => {
+    it('should not be visible on load', () => {
+        cy.visit('e2e/gallery.html?visibleOnLoad=false');
+        waitViewerReady();
+
+        cy.get('.psv-gallery').should('not.be.visible');
+    });
+});
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/base.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/base.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/base.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/base.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/caption-notification.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/caption-notification.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/caption-notification.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/caption-notification.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/custom-element.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/custom-element.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/custom-element.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/custom-element.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/description.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/description.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/description.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/description.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/disable-button.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/disable-button.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/disable-button.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/disable-button.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/hide-button.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/hide-button.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/hide-button.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/hide-button.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/menu-content.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/menu-content.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/menu-content.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/menu-content.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/no-caption.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/no-caption.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/no-caption.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/no-caption.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/update-buttons.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/update-buttons.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/update-buttons.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/update-buttons.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/update-caption.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/update-caption.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/update-caption.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/update-caption.png
diff --git a/cypress/snapshots/base/cypress/e2e/navbar.cy.ts/with-menu.png b/cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/with-menu.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/navbar.cy.ts/with-menu.png
rename to cypress/snapshots/base/cypress/e2e/core/navbar.cy.ts/with-menu.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/base.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/base.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/base.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/base.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/hotspots-color.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/hotspots-color.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/hotspots-color.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/hotspots-color.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/hotspots.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/hotspots.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/hotspots.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/hotspots.png
diff --git a/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/markers.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/markers.png
new file mode 100644
index 000000000..bb4bab2a6
Binary files /dev/null and b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/markers.png differ
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/navigation-1.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/navigation-1.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/navigation-1.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/navigation-1.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/navigation-2.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/navigation-2.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/navigation-2.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/navigation-2.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/navigation-3.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/navigation-3.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/navigation-3.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/navigation-3.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/rotate.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/rotate.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/rotate.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/rotate.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-backgroundSvg.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-backgroundSvg.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-backgroundSvg.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-backgroundSvg.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-coneColor.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-coneColor.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-coneColor.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-coneColor.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-navigationColor.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-navigationColor.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-navigationColor.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-navigationColor.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-size.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-size.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/set-size.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/set-size.png
diff --git a/cypress/snapshots/base/cypress/e2e/compass.cy.ts/zoom.png b/cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/zoom.png
similarity index 100%
rename from cypress/snapshots/base/cypress/e2e/compass.cy.ts/zoom.png
rename to cypress/snapshots/base/cypress/e2e/plugins/compass.cy.ts/zoom.png
diff --git a/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/base.png b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/base.png
new file mode 100644
index 000000000..30cf88549
Binary files /dev/null and b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/base.png differ
diff --git a/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/mobile.png b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/mobile.png
new file mode 100644
index 000000000..de8ff4a5f
Binary files /dev/null and b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/mobile.png differ
diff --git a/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/set-items.png b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/set-items.png
new file mode 100644
index 000000000..a1d0725e9
Binary files /dev/null and b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/set-items.png differ
diff --git a/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/set-thumbnailSize.png b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/set-thumbnailSize.png
new file mode 100644
index 000000000..bfa57a893
Binary files /dev/null and b/cypress/snapshots/base/cypress/e2e/plugins/gallery.cy.ts/set-thumbnailSize.png differ
diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts
index 0002ec42d..04d7d5085 100644
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@@ -3,7 +3,7 @@ import 'cypress-real-events';
 import { addCompareSnapshotCommand } from 'cypress-visual-regression/dist/command';
 
 addCompareSnapshotCommand({
-    errorThreshold: 0.1,
+    errorThreshold: 0.01,
     failSilently: !Cypress.config('isInteractive'),
 });
 
diff --git a/cypress/utils/constants.ts b/cypress/utils/constants.ts
new file mode 100644
index 000000000..d1dbfdd27
--- /dev/null
+++ b/cypress/utils/constants.ts
@@ -0,0 +1,2 @@
+export const BASE_URL = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+export const NO_LOG = { log: false };
diff --git a/cypress/utils/index.ts b/cypress/utils/index.ts
index 125ac8e9c..578b0a3a9 100644
--- a/cypress/utils/index.ts
+++ b/cypress/utils/index.ts
@@ -1,27 +1,34 @@
 import type { AbstractPlugin, SphericalPosition, Viewer } from '@photo-sphere-viewer/core';
+import { NO_LOG } from './constants';
 
 export function waitViewerReady() {
     getViewer('wait ready').then(viewer => {
-        return new Promise(resolve => {
-            viewer.addEventListener('ready', () => {
-                setTimeout(resolve, 200);
-            }, { once: true });
-        });
+        if (!viewer.state.ready) {
+            return new Promise(resolve => {
+                viewer.addEventListener('ready', () => {
+                    setTimeout(resolve, 200);
+                }, { once: true });
+            });
+        } else if (viewer.state.loadingPromise) {
+            return viewer.state.loadingPromise;
+        } else {
+            return Promise.resolve();
+        }
     });
 }
 
 export function getViewer(log: string): Cypress.Chainable<Viewer> {
     cy.log(`Viewer: ${log}`);
-    return cy.window({ log: false })
-        .its('viewer', { log: false });
+    return cy.window(NO_LOG)
+        .its('viewer', NO_LOG);
 }
 
 export function getPlugin<T extends AbstractPlugin<any>>(id: string, log: string | false): Cypress.Chainable<T> {
     if (log !== false) {
         cy.log(`${id}: ${log}`);
     }
-    return cy.window({ log: false })
-        .its('viewer', { log: false })
+    return cy.window(NO_LOG)
+        .its('viewer', NO_LOG)
         .then(viewer => viewer.getPlugin(id));
 }
 
diff --git a/examples/e2e/gallery.html b/examples/e2e/gallery.html
new file mode 100644
index 000000000..618561151
--- /dev/null
+++ b/examples/e2e/gallery.html
@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PhotoSphereViewer - gallery demo</title>
+
+        <link rel="stylesheet" href="/dist/core/index.css" />
+        <link rel="stylesheet" href="/dist/gallery-plugin/index.css" />
+        <link rel="stylesheet" href="../style.css" />
+    </head>
+    <body>
+        <div id="photosphere"></div>
+
+        <script type="importmap">
+            {
+                "imports": {
+                    "three": "/node_modules/three/build/three.module.js",
+                    "@photo-sphere-viewer/core": "/dist/core/index.module.js",
+                    "@photo-sphere-viewer/gallery-plugin": "/dist/gallery-plugin/index.module.js"
+                }
+            }
+        </script>
+
+        <script type="module">
+            import { Viewer } from '@photo-sphere-viewer/core';
+            import { GalleryPlugin } from '@photo-sphere-viewer/gallery-plugin';
+
+            const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
+
+            const items = [
+                {
+                    id: 'sphere',
+                    panorama: baseUrl + 'sphere-small.jpg',
+                    options: {
+                        caption: 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
+                        transition: false,
+                    },
+                },
+                {
+                    id: 'test-sphere',
+                    panorama: baseUrl + 'sphere-test.jpg',
+                    name: 'Test sphere',
+                    options: {
+                        transition: false,
+                    },
+                },
+                {
+                    id: 1,
+                    panorama: baseUrl + 'tour/key-biscayne-1.jpg',
+                    thumbnail: baseUrl + 'tour/key-biscayne-1-thumb.jpg',
+                    name: 'One',
+                    options: {
+                        caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
+                        transition: false,
+                    },
+                },
+                {
+                    id: 2,
+                    panorama: baseUrl + 'tour/key-biscayne-2.jpg',
+                    thumbnail: baseUrl + 'tour/key-biscayne-2-thumb.jpg',
+                    name: 'Two',
+                    options: {
+                        caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
+                        transition: false,
+                    },
+                },
+                {
+                    id: 3,
+                    panorama: baseUrl + 'tour/key-biscayne-3.jpg',
+                    thumbnail: baseUrl + 'tour/key-biscayne-3-thumb.jpg',
+                    name: 'Three',
+                    options: {
+                        caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
+                        transition: false,
+                    },
+                },
+                {
+                    id: 4,
+                    panorama: baseUrl + 'tour/key-biscayne-4.jpg',
+                    thumbnail: baseUrl + 'tour/key-biscayne-4-thumb.jpg',
+                    name: 'Four',
+                    options: {
+                        caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
+                        transition: false,
+                    },
+                },
+                {
+                    id: 5,
+                    panorama: baseUrl + 'tour/key-biscayne-5.jpg',
+                    thumbnail: baseUrl + 'tour/key-biscayne-5-thumb.jpg',
+                    name: 'Five',
+                    options: {
+                        caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
+                        transition: false,
+                    },
+                },
+                {
+                    id: 6,
+                    panorama: baseUrl + 'tour/key-biscayne-6.jpg',
+                    thumbnail: baseUrl + 'tour/key-biscayne-6-thumb.jpg',
+                    name: 'Six',
+                    options: {
+                        caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
+                        transition: false,
+                    },
+                },
+                {
+                    id: 7,
+                    panorama: baseUrl + 'tour/key-biscayne-7.jpg',
+                    thumbnail: baseUrl + 'tour/key-biscayne-7-thumb.jpg',
+                    name: 'Seven',
+                    options: {
+                        caption: 'Cape Florida Light, Key Biscayne <b>&copy; Pixexid</b>',
+                        transition: false,
+                    },
+                },
+            ];
+
+            const urlParams = new URLSearchParams(window.location.search);
+
+            const viewer = new Viewer({
+                container: 'photosphere',
+                panorama: items[0].panorama,
+                caption: items[0].options.caption,
+                plugins: [
+                    [GalleryPlugin, {
+                        items: items,
+                        visibleOnLoad: urlParams.get('visibleOnLoad') !== 'false',
+                        hideOnClick: false,
+                    }],
+                ],
+            });
+
+            window.viewer = viewer;
+        </script>
+    </body>
+</html>
diff --git a/examples/style.css b/examples/style.css
index 4caffc40f..055f73c0a 100644
--- a/examples/style.css
+++ b/examples/style.css
@@ -7,7 +7,7 @@ body,
 }
 
 * {
-    font-family: Arial !important;
+    font-family: "Helvetica", "Arial", sans-serif !important;
 }
 
 .psv-button.custom-button {
diff --git a/packages/gallery-plugin/src/GalleryPlugin.ts b/packages/gallery-plugin/src/GalleryPlugin.ts
index 904c021a3..582eecefb 100644
--- a/packages/gallery-plugin/src/GalleryPlugin.ts
+++ b/packages/gallery-plugin/src/GalleryPlugin.ts
@@ -62,7 +62,9 @@ export class GalleryPlugin extends AbstractConfigurablePlugin<
 
         if (this.config.visibleOnLoad) {
             this.viewer.addEventListener(events.ReadyEvent.type, () => {
-                this.show();
+                if (this.items.length) {
+                    this.show();
+                }
             }, { once: true });
         }
 
@@ -174,6 +176,10 @@ export class GalleryPlugin extends AbstractConfigurablePlugin<
             this.gallery.setActive(this.currentId);
         }
 
+        if (!this.items.length) {
+            this.gallery.hide();
+        }
+
         this.__updateButton();
     }