4.47.1 • Published 3 months ago
@parameter1/base-cms-marko-web-photoswipe v4.47.1
BaseCMS Marko Wrapper for Photoswipe
Installation
Include
@parameter1/base-cms-marko-web-photoswipe
as a project/website dependency.Include the Browser plugin.
// your-site/browser/index.js
import PhotoSwipe from '@parameter1/base-cms-marko-web-photoswipe/browser';
PhotoSwipe(Browser);
export default Browser;
- Include the styles.
// your-site/server/styles/index.scss
@import "@parameter1/base-cms-marko-web-photoswipe/scss/main";
- If you're using the default theme (or something similar) you'll need to adjust the photoswipe z-index:
$pswp__root-z-index: $theme-site-header-z-index + 1 !default;
@import "@parameter1/base-cms-marko-web-photoswipe/scss/main";
Usage
Create a Content Image Gallery
You must specify a body gallery ID as well as an image selector.
- On the page contents, append a unique gallery ID and display some images, e.g.:
<default-theme-page-contents attrs={ "data-gallery-id": content.id }>
<marko-web-page-image width=720 obj=content.primaryImage />
<marko-web-content-body obj=content />
</default-theme-page-contents>
- Immediately after this block, load the gallery component:
import { getAsArray } from "@parameter1/base-cms-object-path";
$ const images = resolved.getEdgeNodesFor("images");
<marko-web-photoswipe-images images=images>
<@props thumbnail-click-selectors=`[data-gallery-id="${id}"] [data-image-id]` />
</marko-web-photoswipe-images>
- Make sure you're returning the images from GraphQL
const gql = require('graphql-tag');
module.exports = gql`
fragment ContentPageFragment on Content {
id
name
images(input:{ pagination: { limit: 100 }, sort: { order: values } }) {
edges {
node {
id
src
alt
displayName
caption
credit
}
}
}
}
`;
4.47.1
3 months ago
4.40.3
6 months ago
4.11.6
1 year ago
4.5.12
1 year ago
4.6.0
1 year ago
4.0.0-alpha.0
1 year ago
4.0.0-beta.0
1 year ago
4.1.0
1 year ago
4.0.0
1 year ago
4.0.2
1 year ago
3.13.0
2 years ago
3.13.4
2 years ago
3.13.5
2 years ago
3.8.0
2 years ago
3.0.0
2 years ago
2.98.0
2 years ago
2.95.0
2 years ago
2.94.0
2 years ago
2.92.0
2 years ago
2.81.0
2 years ago
2.75.1
2 years ago
2.75.0
2 years ago
2.45.0
3 years ago
2.29.0
3 years ago
2.22.2
3 years ago
2.8.1
3 years ago
2.5.0
3 years ago
2.4.2
3 years ago
2.3.0
3 years ago
2.0.0
3 years ago