Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jonnitto/jonnitto.photoswipe
PhotoSwipe for Neos CMS
https://github.com/jonnitto/jonnitto.photoswipe
hacktoberfest neoscms photoswipe
Last synced: about 2 months ago
JSON representation
PhotoSwipe for Neos CMS
- Host: GitHub
- URL: https://github.com/jonnitto/jonnitto.photoswipe
- Owner: jonnitto
- License: gpl-3.0
- Created: 2016-04-24T18:41:28.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T11:41:50.000Z (5 months ago)
- Last Synced: 2024-10-31T11:44:48.439Z (about 2 months ago)
- Topics: hacktoberfest, neoscms, photoswipe
- Language: JavaScript
- Homepage:
- Size: 1.5 MB
- Stars: 6
- Watchers: 3
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[![Latest stable version]][packagist] [![Total downloads]][packagist] [![License]][packagist] [![GitHub forks]][fork] [![GitHub stars]][stargazers] [![GitHub watchers]][subscription] [![GitHub followers]][followers] [![Follow Jon on Twitter]][twitter]
# Jonnitto.PhotoSwipe
**This package includes [PhotoSwipe] into [Neos CMS]**
| Version | Neos | Maintained |
| -------- | ----------- | :--------: |
| 0.\* | 2.\* | ✗ |
| > 1.4 | 3.\* + 4.\* | ✗ |
| 2.\* | 3.3 + 4.\* | ✗ |
| > 3.\* | 3.3 + 4.\* | ✗ |
| >= 3.1.2 | 3.3 - 8.\* | ✗ |
| 4.\* | 7.3 - 8.\* | ✓ |
## Required HTML markup
Each element that matches the selector `a.lightbox` must have such attributes:
- Image URL in `href` or `data-pswp-src` attribute (latter has higher priority).
- Image width in `data-pswp-width`.
- Image height in `data-pswp-height`.
And optionally:
- `![]()
` 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](https://photoswipe.com/opening-or-closing-transition#animating-from-cropped-thumbnail).
PhotoSwipe API supports almost any markup and any data source, [read more about it here](https://photoswipe.com/data-sources#custom-html-markup).
Example:
```html
...
```
## 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](https://photoswipe.com/events/) or trigger
[methods](https://photoswipe.com/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:
```js
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:
```yaml
Jonnitto:
PhotoSwipe:
additonalPswpContainerAttributes:
data-turbo-temporary: true
class: 'my-custom-class'
```
### Adding custom attributes to the link in the error fetch message
```yaml
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:
```bash
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.
[packagist]: https://packagist.org/packages/jonnitto/photoswipe
[neos cms]: https://www.neos.io
[photoswipe]: http://photoswipe.com/
[latest stable version]: https://poser.pugx.org/jonnitto/photoswipe/v/stable
[total downloads]: https://poser.pugx.org/jonnitto/photoswipe/downloads
[license]: https://poser.pugx.org/jonnitto/photoswipe/license
[github forks]: https://img.shields.io/github/forks/jonnitto/Jonnitto.PhotoSwipe.svg?style=social&label=Fork
[github stars]: https://img.shields.io/github/stars/jonnitto/Jonnitto.PhotoSwipe.svg?style=social&label=Stars
[github watchers]: https://img.shields.io/github/watchers/jonnitto/Jonnitto.PhotoSwipe.svg?style=social&label=Watch
[github followers]: https://img.shields.io/github/followers/jonnitto.svg?style=social&label=Follow
[follow jon on twitter]: https://img.shields.io/twitter/follow/jonnitto.svg?style=social&label=Follow
[twitter]: https://twitter.com/jonnitto
[fork]: https://github.com/jonnitto/Jonnitto.PhotoSwipe/fork
[stargazers]: https://github.com/jonnitto/Jonnitto.PhotoSwipe/stargazers
[subscription]: https://github.com/jonnitto/Jonnitto.PhotoSwipe/subscription
[followers]: https://github.com/jonnitto/followers
[`settings.yaml`]: Configuration/Settings.yaml
