<photoswipe
mode=recommended
options="{
"gallery": "table.gallery",
"children": "a.img",
"thumbSelector": "a.img",
"pswpModule": "() => require('js.photoswipe')",
"allowPanToNext": false,
"allowMouseDrag": true,
"wheelToZoom": true,
"zoom": false
}"
addBeginning="document.querySelectorAll( 'table.gallery img' ).forEach( ( e, i ) => {
if ( e.parentElement.tagName !== 'A' ) {
document.querySelectorAll( 'img' )[ i ].outerHTML = `<a class='img' href="${e.src}" data-my-size="${e.naturalWidth}x${e.naturalHeight}">${e.outerHTML}</a>`;
}
} );"
addEventables="[
"const backEasing = { in: 'cubic-bezier(0.6, -0.28, 0.7, 1)', out: 'cubic-bezier(0.3, 0, 0.32, 1.275)', inOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)' }",
"lightbox.on( 'firstUpdate', () => { lightbox.pswp.options.easing = backEasing.out; } );",
"lightbox.on( 'initialZoomInEnd', () => { lightbox.pswp.options.easing = backEasing.inOut; } );",
"lightbox.on( 'close', () => { lightbox.pswp.options.easing = backEasing.in; } );",
"lightbox.addFilter( 'domItemData', ( itemData, element, linkEl ) => { if ( linkEl ) { const sizeAttr = linkEl.dataset.mySize; itemData.src = linkEl.href; itemData.w = Number( sizeAttr.split( 'x' )[ 0 ] ); itemData.h = Number( sizeAttr.split( 'x' )[ 1 ] ); itemData.msrc = linkEl.dataset.thumbSrc; itemData.thumbCropped = true; } return itemData; } );"
]"
addEnd="[]"
plugins="{
"DeepZoomPlugin": {
"enabled": true,
"options": {
"tileSize": 256
}
},
"DynamicCaption": {
"enabled": true,
"options": {
"captionContent": ".pswp-caption-content",
"horizontalEdgeThreshold": 20,
"mobileCaptionOverlapRatio": 0.3,
"mobileLayoutBreakpoint": 600,
"type": "auto"
}
},
"VideoPlugin": {
"enabled": true,
"options": {}
}
}"
/>
