jonnitto/photoswipe

PhotoSwipe for Neos CMS

![Latest stable version] ![Total downloads] ![License] ![GitHub forks] ![GitHub stars] ![GitHub watchers] ![GitHub followers] ![Follow Jon on Twitter], _(*1)

Jonnitto.PhotoSwipe

This package includes PhotoSwipe into Neos CMS, _(*2)

Required HTML markup

Each element that matches the selector a.lightbox must have such attributes:, _(*3)

• 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:, _(*4)

• <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:, _(*5)

<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:, _(*6)

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., _(*7)

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., _(*8)

Example:, _(*9)

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:, _(*10)

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:, _(*11)

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., _(*12)