Download the PHP package blackbird/hyva-photo-swipe without Composer
On this page you can find all versions of the php package blackbird/hyva-photo-swipe. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download blackbird/hyva-photo-swipe
More information about blackbird/hyva-photo-swipe
Files in blackbird/hyva-photo-swipe
Package hyva-photo-swipe
Short Description An implementation of PhotoSwipe library in Hyvä Theme for Magento 2
License MIT
Informations about the package hyva-photo-swipe
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 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()
Installation
Requirements
In production mode, do not forget to recompile and redeploy the static resources.
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 state is_loading
indicating that PhotoSwipe has been loaded, and apply PhotoSwipe to the HTML elements, as described in the PhotoSwipe documentation.
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
You can specify any of the PhotoSwipe options as shown here
Finally, set up the x-data directive and do not forget to call the previous function in an x-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
You can specify any of the PhotoSwipe options as shown here
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.
or
To find out exactly which one to use, please see the official Alpine documentation for $store or for 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 procedure to apply PhotoSwipe.