https://github.com/vovayatsyuk/photoswipe-object-position
PhotoSwipe5 plugin that adds object-position property support
https://github.com/vovayatsyuk/photoswipe-object-position
Last synced: 7 months ago
JSON representation
PhotoSwipe5 plugin that adds object-position property support
- Host: GitHub
- URL: https://github.com/vovayatsyuk/photoswipe-object-position
- Owner: vovayatsyuk
- License: mit
- Created: 2022-03-31T13:49:57.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-04-01T09:34:43.000Z (over 4 years ago)
- Last Synced: 2025-01-29T07:34:53.685Z (over 1 year ago)
- Language: HTML
- Homepage: https://vovayatsyuk.github.io/photoswipe-object-position/
- Size: 877 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ObjectPosition plugin for [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)
ObjectPosition — is a [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe)
plugin that improves `object-position` property handling when cropped thumbnails
are used.
**You don't need this plugin if you don't use `object-position` for your cropped
thumbnails.**
## Improvements
1. Fixes thumbnail jumping animation while opening/closing lightbox.
2. Make sure that the initially zoomed image will show the same region of the image
as we saw in cropped thumbnail.
[View Demo](https://vovayatsyuk.github.io/photoswipe-object-position/)
## Usage
Download the `photoswipe-object-position.js` file and put it to your assets folder.
> Alternatively, you may install the plugin via NPM:
>
> ```
> npm i @vovayatsyuk/photoswipe-object-position
> ```
```js
import PhotoSwipeLightbox from '/assets/photoswipe/dist/photoswipe-lightbox.esm.js';
import ObjectPosition from '/assets/photoswipe-object-position.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: () => import('/assets/photoswipe/dist/photoswipe.esm.js')
});
new ObjectPosition(lightbox);
lightbox.init();
```