jonnitto / photoswipe
PhotoSwipe for Neos CMS
Fund package maintenance!
jonnitto
www.paypal.me/Jonnitto/20eur
Installs: 23 743
Dependents: 1
Suggesters: 1
Security: 0
Stars: 6
Watchers: 3
Forks: 6
Open Issues: 0
Language:JavaScript
Type:neos-plugin
Requires
- neos/fusion-afx: ^7.3 || ^8.0
- neos/neos: ^7.3 || ^8.0
- dev-master
- 4.5.0
- 4.4.3
- 4.4.2
- 4.4.1
- 4.4.0
- 4.3.0
- 4.2.0
- 4.1.0
- 4.0.0
- v3.x-dev
- 3.4.1
- 3.4.0
- 3.3.2
- 3.3.1
- 3.3.0
- 3.2.4
- 3.2.3
- 3.2.2
- 3.2.1
- 3.2.0
- 3.1.2
- 3.1.1
- 3.1.0
- 3.0.1
- 3.0.0
- 2.2.0
- 2.1.4
- 2.1.3
- 2.1.2
- 2.1.1
- 2.1.0
- 2.0.1
- 2.0.0
- v1.x-dev
- 1.4.1
- 1.4.0
- 1.3.2
- 1.3.1
- 1.3.0
- 1.2.2
- 1.2.1
- 1.2.0
- 1.1.0
- 1.0.4
- 1.0.3
- 1.0.2
- 1.0.1
- 1.0.0
- 0.2.1
- 0.2.0
- 0.1.8
- 0.1.7
- 0.1.6
- 0.1.5
- 0.1.4
- 0.1.3
- 0.1.2
- 0.1.1
- 0.1.0
- dev-Neos-2
This package is auto-updated.
Last update: 2024-10-25 12:08:59 UTC
README
Jonnitto.PhotoSwipe
This package includes PhotoSwipe into Neos CMS
Required HTML markup
Each element that matches the selector a.lightbox
must have such attributes:
- Image URL in
href
ordata-pswp-src
attribute (latter has higher priority). - Image width in
data-pswp-width
. - Image height in
data-pswp-height
.
And optionally:
<img>
thumbnail within the link element that will be displayed before the large image is loaded- Optional
data-cropped="true"
attribute if thumbnail is cropped. See also Animating from Cropped Thumbnail. PhotoSwipe API supports almost any markup and any data source, read more about it here.
Example:
<a class="lightbox" data-pswp-width="2560" data-pswp-height="1200" href="path/to/image.jpg" >...</a >
Javascript variables
There is one global variable who get set during the intialisation:
neosPhotoSwipe
This object stores the lightbox
variables from PhotoSwiper. (The variable who get used to call
lightbox.init()
). With this, you can add you own event listener or trigger
methods.
Javascript event listener
If you dispatch the event neos-photoswipe:init
all type of lightboxes get initialized. Great if you work in AJAX
enviroments. You can also activate a specific type of lightbox: neos-photoswipe.images:init
,
neos-photoswipe.fetch:init
or neos-photoswipe.template:init
.
Example:
window.dispatchEvent(new Event('neos-photoswipe:init'));
Alter generated markup
Adding custom attributes to the PhotoSwipe container
You can add custom attributes to the PhotoSwipe container like this:
Jonnitto: PhotoSwipe: additonalPswpContainerAttributes: data-turbo-temporary: true class: 'my-custom-class'
Adding custom attributes to the link in the error fetch message
Jonnitto: PhotoSwipe: fetchAttributeErrorMessages: 'data-pswp-type="fetch" data-turbo="false"'
Installation
Most of the time you have to make small adjustments to a package (e.g.
configuration in Settings.yaml
). Because of that, it is important to add the
corresponding package to the composer from your theme package. Mostly this is
the site packages located under Packages/Sites/
. To install it correctly go to
your theme package (e.g.Packages/Sites/Foo.Bar
) and run following command:
composer require jonnitto/photoswipe --no-update
The --no-update
command prevent the automatic update of the dependencies.
After the package was added to your theme composer.json
, go back to the root
of the Neos installation and run composer update
. Et voilĂ ! Your desired
package is now installed correctly.