PHPackages blackbird/hyva-photo-swipe - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. blackbird/hyva-photo-swipe ActiveMagento2-module[Image & Media](/categories/media) blackbird/hyva-photo-swipe ========================== An implementation of PhotoSwipe library in Hyvä Theme for Magento 2 1.0.0(2y ago)96.0k↓27.1%1MITHTML Since Sep 26Pushed 2y ago2 watchersCompare [ Source](https://github.com/blackbird-agency/hyva-photo-swipe)[ Packagist](https://packagist.org/packages/blackbird/hyva-photo-swipe)[ RSS](/packages/blackbird-hyva-photo-swipe/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (1)Dependencies (2)Versions (2)Used By (0) hyva-photo-swipe ================ [](#hyva-photo-swipe) [![Latest Stable Version](https://camo.githubusercontent.com/4f7e0d0b2eb3de8c977c19f21c7250bee9dcbaef07d742736035565ed3a1f2e6/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d312e302e302d626c7565)](https://packagist.org/packages/blackbird/hyva-photo-swipe)[![SplideJS Version](https://camo.githubusercontent.com/74142ef36e15adc960c11d1d8b123442d108d1ee20702941146bef4f461b08f2/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f70686f746f73776970652d352e342e312d707572706c65)](https://github.com/dimsemenov/PhotoSwipe/releases/tag/v5.4.1)[![License: MIT](https://camo.githubusercontent.com/2936efa616900e18cefb7637446cb73e862431548a8fb41dabc7850d6088f9b1/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f626c61636b626972642d6167656e63792f687976612d70686f746f2d73776970652e737667)](./LICENSE) An implementation of [PhotoSwipe library](https://photoswipe.com/) in [Hyvä Theme for Magento 2](https://www.hyva.io/hyva-themes-license.html) You no longer need to worry about how to implement PhotoSwipe in your Magento 2 Hyvä Theme projects. No manipulations required, instant use after installation. PhotoSwipe allows you to create full-screen sliders, zoomable, and fully customizable. The librairy is lazily loaded and does not affect performances accoding to [Hyvä documentation](https://docs.hyva.io/hyva-themes/writing-code/patterns/loading-external-javascript.html). [How It Works](#how-it-works) • [Installation](#installation) • [Usage](#usage) • [More modules](#more-modules) How It Works ------------ [](#how-it-works) The module simply loads PhotoSwipe on all pages that use the `PhotoSwipeLightbox` class in the DOM (the class provied by PhotoSwipe). When the library has been loaded on the page, a state stored in the [Alpine.store](https://alpinejs.dev/globals/alpine-store) is updated, indicating that PhotoSwipe is ready for use. The state can also be used to force the library to be loaded at any time, here is an example using [forceLoad()](#example--usage-of-forceload) Installation ------------ [](#installation) > ### Requirements > > [](#requirements) > > - [Hyvä Magento 2 Theme](https://www.hyva.io/hyva-themes-license.html) ``` composer require blackbird/hyva-photo-swipe ``` ``` php bin/magento setup:upgrade ``` *In production mode, do not forget to recompile and redeploy the static resources.* Usage ----- [](#usage) Once the module has been installed, simply add the HTML code required to create a slider, don't forget to specify for each child the `data-pswp-width` and `data-pswp-height`. ``` ``` Next, create a function to listen the [Alpine.store](https://alpinejs.dev/globals/alpine-store) state `is_loading` indicating that PhotoSwipe has been loaded, and apply PhotoSwipe to the HTML elements, as described in the [PhotoSwipe documentation](https://photoswipe.com/getting-started/#initialization). Don't forget to fill in the important options : - **gallery**: query selection of your parent gallery node - **children**: query selection of your children repetiting nodes - **pswpModule**: just give it PhotoSwipe ``` function myXData () { return { initPhotoSwipe() { if (Alpine.store('').is_loaded) { new PhotoSwipeLightbox({ gallery: '#my-gallery', children: 'a', pswpModule: PhotoSwipe, ...options }).init(); } } } } ``` *You can specify any of the PhotoSwipe options as shown [here](https://photoswipe.com/options/)* Finally, set up the [x-data](https://alpinejs.dev/directives/data) directive and do not forget to call the previous function in an [x-effect](https://alpinejs.dev/directives/effect), to prevent PhotoSwipe being applied until the library is loaded, and to allow it to be automatically applied when the library is loaded. ``` ... ``` ### Full example [](#full-example) ``` function myXData () { return { initPhotoSwipe() { if (Alpine.store('').is_loaded) { new PhotoSwipeLightbox({ gallery: '#my-gallery', children: 'a', pswpModule: PhotoSwipe, ...options }).init(); } } } } ``` *You can specify any of the PhotoSwipe options as shown [here](https://photoswipe.com/options/)* ### Example : usage of `forceLoad()` [](#example--usage-of-forceload) Imagine the following case: you do not have the script calling the `PhotoSwipeLightbox` class provided by the librairy in your DOM, and you want to add it when a user's action is triggered. In this case, PhotoSwipe won't be loaded by default on the page, you will have to explicitly request that PhotoSwipe be loaded. ``` Alpine.store('').forceLoad() ``` or ``` $store..forceLoad() ``` *To find out exactly which one to use, please see the official Alpine documentation for [$store](https://alpinejs.dev/magics/store) or for [Alpine.store](https://alpinejs.dev/globals/alpine-store).* This will force the library to load on the page, even if no script call the `PhotoSwipeLightbox` class. You can then follow the classic [Usage](#usage) procedure to apply PhotoSwipe. More modules ------------ [](#more-modules) [hyva-splide-js](https://github.com/blackbird-agency/hyva-splide-js) : An implementation of SplideJS library in Hyvä Theme for Magento 2, highly optimized and customizable sliders. ### Health Score 28 — LowBetter than 54% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity30 Limited adoption so far Community9 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 965d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/12445118?v=4)[anthony-blackbird](/maintainers/anthony-blackbird)[@anthony-blackbird](https://github.com/anthony-blackbird) --- Top Contributors [![luderic-blackbird](https://avatars.githubusercontent.com/u/144663333?v=4)](https://github.com/luderic-blackbird "luderic-blackbird (4 commits)") --- Tags fullpagehyva-themesphotoswipeslider ### Embed Badge ![Health badge](/badges/blackbird-hyva-photo-swipe/health.svg) ``` [![Health](https://phpackages.com/badges/blackbird-hyva-photo-swipe/health.svg)](https://phpackages.com/packages/blackbird-hyva-photo-swipe) ``` ### Alternatives [yireo/magento2-next-gen-images Magento 2 module to add NextGen images support to the Magento frontend 471.1M2](/packages/yireo-magento2-next-gen-images)[smile/module-product-label Smile - Extension of Magento2 to be able to contribute images associated to product attribute values. 5898.7k](/packages/smile-module-product-label)[elgentos/magento2-imgix Imgix extension for Magento 2 to process images 1668.0k](/packages/elgentos-magento2-imgix)[dlambauer/magento2-module-backend-widget-imageupload Simply add Images to your Widget 2331.4k](/packages/dlambauer-magento2-module-backend-widget-imageupload) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)