https://photoswipe.com/assets/js/261d41ac.0cb841e5.js

1"use strict";(self.webpackChunkdemo_docs_website=self.webpackChunkdemo_docs_website||[]).push([[420],{3905:function(e,n,t){t.d(n,{Zo:function(){return p},kt:function(){return h}});var o=t(7294);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function l(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function s(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?l(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function r(e,n){if(null==e)return{};var t,o,i=function(e,n){if(null==e)return{};var t,o,i={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var a=o.createContext({}),c=function(e){var n=o.useContext(a),t=n;return e&&(t="function"==typeof e?e(n):s(s({},n),e)),t},p=function(e){var n=c(e.components);return o.createElement(a.Provider,{value:n},e.children)},g={inlineCode:"code",wrapper:function(e){var n=e.children;return o.createElement(o.Fragment,{},n)}},d=o.forwardRef((function(e,n){var t=e.components,i=e.mdxType,l=e.originalType,a=e.parentName,p=r(e,["components","mdxType","originalType","parentName"]),d=c(t),h=i,u=d["".concat(a,".").concat(h)]||d[h]||g[h]||l;return t?o.createElement(u,s(s({ref:n},p),{},{components:t})):o.createElement(u,s({ref:n},p))}));function h(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var l=t.length,s=new Array(l);s[0]=d;var r={};for(var a in n)hasOwnProperty.call(n,a)&&(r[a]=n[a]);r.originalType=e,r.mdxType="string"==typeof e?e:i,s[1]=r;for(var c=2;c<l;c++)s[c]=t[c];return o.createElement.apply(null,s)}return o.createElement.apply(null,t)}d.displayName="MDXCreateElement"},7703:function(e,n,t){t.r(n),t.d(n,{assets:function(){return g},contentTitle:function(){return c},default:function(){return m},frontMatter:function(){return a},metadata:function(){return p},toc:function(){return d}});var o,i=t(7462),l=t(3366),s=(t(7294),t(3905)),r=["components"],a={id:"events",title:"Events",sidebar_label:"Events"},c=void 0,p={unversionedId:"events",id:"events",title:"Events",description:"All events can be bound directly to lightbox, they'll automatically map to PhotoSwipe core when it's open.",source:"@site/../docs/events.md",sourceDirName:".",slug:"/events",permalink:"/events",editUrl:"https://github.com/dimsemenov/PhotoSwipe/tree/master/docs/../docs/events.md",tags:[],version:"current",frontMatter:{id:"events",title:"Events",sidebar_label:"Events"},sidebar:"mainSidebar",previous:{title:"Options",permalink:"/options"},next:{title:"Filters",permalink:"/filters"}},g={},d=[{value:"Initialization events",id:"initialization-events",level:2},{value:"Opening or closing transition events",id:"opening-or-closing-transition-events",level:2},{value:"Closing events",id:"closing-events",level:2},{value:"Pointer and gesture events",id:"pointer-and-gesture-events",level:2},{value:"Slide content events",id:"slide-content-events",level:2}],h=(o="PswpCodePreview",function(e){return console.warn("Component "+o+" was not imported, exported, or provided by MDXProvider as global scope"),(0,s.kt)("div",e)}),u={toc:d};function m(e){var n=e.components,t=(0,l.Z)(e,r);return(0,s.kt)("wrapper",(0,i.Z)({},u,t,{components:n,mdxType:"MDXLayout"}),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js"},"const lightbox = new PhotoSwipeLightbox({\n  // options...\n});\nlightbox.init();\n")),(0,s.kt)("p",null,"All events can be bound directly to lightbox, they'll automatically map to PhotoSwipe core when it's open."),

1(0,s.kt)("h2",{id:"initialization-events"},"Initialization events"),(0,s.kt)(h,{galleryID:"test-init-events",mdxType:"PswpCodePreview"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js",metastring:"pswpcode",pswpcode:!0},"import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';\nconst lightbox = new PhotoSwipeLightbox({\n  gallery: '#gallery--test-init-events',\n  children: 'a',\n  pswpModule: () => import('/photoswipe/photoswipe.esm.js')\n});\nlightbox.on('beforeOpen', () => {\n  console.log('beforeOpen');\n  // photoswipe starts to open\n});\n\nlightbox.on('firstUpdate', () => {\n  console.log('firstUpdate');\n  // photoswipe keeps opening\n  // you may modify initial index or basic DOM structure\n});\n\nlightbox.on('initialLayout', () => {\n  console.log('initialLayout');\n  // photoswipe measures size of various elements\n  // if you need to read getBoundingClientRect of something - do it here\n});\n\nlightbox.on('change', () => {\n  // triggers when slide is switched, and at initialization\n  console.log('change');\n});\n\nlightbox.on('afterInit', () => {\n  console.log('afterInit');\n  // photoswipe fully initialized and opening transition is running (if available)\n});\n\nlightbox.on('bindEvents', () => {\n  console.log('bindEvents');\n  // photoswipe binds DOM events (such as pointer events, wheel, etc)\n});\nlightbox.init();\n"))),(0,s.kt)("h2",{id:"opening-or-closing-transition-events"},"Opening or closing transition events"),(0,s.kt)("p",null,"The events will trigger even if transition is disabled."),(0,s.kt)(h,{galleryID:"test-opening-closing-events",mdxType:"PswpCodePreview"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js",metastring:"pswpcode",pswpcode:!0},"import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';\nconst lightbox = new PhotoSwipeLightbox({\n  gallery: '#gallery--test-opening-closing-events',\n  children: 'a',\n  pswpModule: () => import('/photoswipe/photoswipe.esm.js')\n});\nlightbox.on('openingAnimationStart', () => {\n  console.log('openingAnimationStart');\n});\nlightbox.on('openingAnimationEnd', () => {\n  console.log('openingAnimationEnd');\n});\nlightbox.on('closingAnimationStart', () => {\n  console.log('closingAnimationStart');\n});\nlightbox.on('closingAnimationEnd', () => {\n  console.log('closingAnimationEnd');\n});\nlightbox.init();\n"))),(0,s.kt)("h2",{id:"closing-events"},"Closing events"),(0,s.kt)(h,{galleryID:"test-closing-events",mdxType:"PswpCodePreview"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js",metastring:"pswpcode",pswpcode:!0},"import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';\nconst lightbox = new PhotoSwipeLightbox({\n  gallery: '#gallery--test-closing-events',\n  children: 'a',\n  pswpModule: () => import('/photoswipe/photoswipe.esm.js')\n});\nlightbox.on('close', () => {\n  // PhotoSwipe starts to close, unbind most events here\n  console.log('close');\n});\nlightbox.on('destroy', () => {\n  // PhotoSwipe is fully closed, destroy everything\n  console.log('destroy');\n});\nlightbox.init();\n"))),(0,s.kt)("h2",{id:"pointer-and-gesture-events"},"Pointer and gesture events"),(0,s.kt)(h,{galleryID:"test-pointer-events",mdxType:"PswpCodePreview"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js",metastring:"pswpcode",pswpcode:!0},"import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';\nconst lightbox = new PhotoSwipeLightbox({\n  gallery: '#gallery--test-pointer-events',\n  children: 'a',\n  pswpModule: () => import('/photoswipe/photoswipe.esm.js')\n});\nlightbox.on('pointerDown', (e) => {\n  console.log('pointerDown', e.originalEvent);\n});\nlightbox.on('pointerMove', (e) => {\n  console.log('pointerMove', e.originalEvent);\n});\nlightbox.on('pointerUp', (e) => {\n  console.log('pointerUp', e.originalEvent);\n});\nlightbox.on('pinchClose', (e) => {\n  // triggered when using pinch to close gesture\n  // can be default prevented\n  console.log('pinchClose', e.bgOpacity);\n});\nlightbox.on('verticalDrag', (e) => {\n  // triggered when using vertical drag to close gesture\n  // can be default prevented\n  console.log('verticalDrag', e.panY);\n});\nlightbox.init();\n"))),(0,s.kt)("h2",{id:"slide-content-events"},"Slide content events"),(0,s.kt)("p",null,"Refer to ",(0,s.kt)("a",{parentName:"p",href:"/custom-content"},"Custom Content")," section of docs for examples."),(0,s.kt)(h,{galleryID:"test-content-events",mdxType:"PswpCodePreview"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-js",metastring:"pswpcode",pswpcode:!0},"import PhotoSwipeLightbox from '/photoswipe/photoswipe-lightbox.esm.js';\nimport PhotoSwipe from '/photoswipe/photoswipe.esm.js';\nconst lightbox = new PhotoSwipeLightbox({\n  gallery: '#gallery--test-content-events',\n  children: 'a',\n  pswpModule: PhotoSwipe\n});\nlightbox.on('contentInit', ({ content }) =>

1 {\n  console.log('contentInit', content);\n});\nlightbox.on('contentLoad', ({ content, isLazy }) => {\n  // content starts to load \n  // can be default prevented\n  // assign elements to `content.element`\n  console.log('contentLoad', content, isLazy);\n});\nlightbox.on('contentLoadImage', ({ content, isLazy }) => {\n  // similar to the previous one, but triggers only for image content\n  // can be default prevented\n  console.log('contentLoadImage', content, isLazy);\n});\nlightbox.on('loadComplete', ({ content, slide }) => {\n  console.log('loadComplete', content);\n});\nlightbox.on('contentResize', ({ content, width, height }) => {\n  // content will be resized\n  // can be default prevented\n  console.log('contentResize', content, width, height);\n});\nlightbox.on('imageSizeChange', ({ content, width, height, slide }) => {\n  // content.element is image\n  console.log('imageSizeChange', content, width, height, slide, slide.index);\n});\nlightbox.on('contentLazyLoad', ({ content }) => {\n  // content start to lazy-load\n  // can be default prevented\n  console.log('contentLazyLoad', content);\n});\nlightbox.on('contentAppend', ({ content }) => {\n  // content is added to dom\n  // can be default prevented\n  // content.slide.container.appendChild(content.element);\n  console.log('contentAppend', content);\n});\nlightbox.on('contentActivate', ({ content }) => {\n  // content becomes active (the current slide)\n  // can be default prevented\n  console.log('contentActivate', content);\n});\nlightbox.on('contentDeactivate', ({ content }) => {\n  // content becomes inactive\n  // can be default prevented\n  console.log('contentDeactivate', content);\n});\nlightbox.on('contentRemove', ({ content }) => {\n  // content is removed from DOM\n  // can be default prevented\n  console.log('contentRemove', content);\n});\nlightbox.on('contentDestroy', ({ content }) => {\n  // content will be destroyed\n  // can be default prevented\n  console.log('contentDestroy', content);\n});\nlightbox.init();\n"))))}m.isMDXComponent=!0}}]);