diff --git a/README.md b/README.md index 66d3313..2b0a1b3 100644 --- a/README.md +++ b/README.md @@ -114,6 +114,7 @@ showImageCount | bool | true | Optional. Display imag onClickImage | func | onClickImage | Optional. Function to execute when lightbox image clicked. Overrides internal implementation of onClickImage. onClickPrev | func | onClickPrev | Optional. Function to execute when lightbox left arrow clicked. Overrides internal implementation of onClickPrev. onClickNext | func | onClickNext | Optional. Function to execute when lightbox right arrow clicked. Overrides internal implementation of onClickNext. +currentImageWillChange | func | undefined | Optional. Function to execute before lightbox image change. Useful for tracking current image shown in lightbox. Allows access to gallery object using `this` (See [Programmers notes]) showLightboxThumbnails | bool | false | Optional. Display thumbnails beneath the Lightbox image. onClickLightboxThumbnail | func | gotoImage | Optional. Function to execute when lightbox thumbnail clicked. Overrides internal function: gotoImage. lightboxWidth | number | 1024 | Optional. Maximum width of the lightbox carousel; defaults to 1024px. diff --git a/examples/demo6.js b/examples/demo6.js new file mode 100644 index 0000000..bc5aae1 --- /dev/null +++ b/examples/demo6.js @@ -0,0 +1,135 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import ReactDOM from 'react-dom'; +import Gallery from '../src/Gallery'; + + +class Demo6 extends React.Component { + constructor(props){ + super(props); + + this.state = { + images: this.props.images, + currentImage: 0 + }; + + this.onCurrentImageChange = this.onCurrentImageChange.bind(this); + this.deleteImage = this.deleteImage.bind(this); + } + + onCurrentImageChange(index) { + this.setState({ currentImage: index }); + } + + deleteImage() { + if (window.confirm(`Are you sure you want to delete image number ${this.state.currentImage}?`)) { + var images = this.state.images.slice(); + images.splice(this.state.currentImage, 1) + this.setState({ + images: images + }); + } + } + + render () { + return ( +
+
Current image: {this.state.currentImage}
+ Delete Image + ]} + /> +
+ ); + } +} + +Demo6.propTypes = { + images: PropTypes.arrayOf( + PropTypes.shape({ + src: PropTypes.string.isRequired, + thumbnail: PropTypes.string.isRequired, + srcset: PropTypes.array, + caption: PropTypes.string, + thumbnailWidth: PropTypes.number.isRequired, + thumbnailHeight: PropTypes.number.isRequired + }) + ).isRequired +}; + +Demo6.defaultProps = { + images: shuffleArray([ + { + src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg", + thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg", + thumbnailWidth: 320, + thumbnailHeight: 174, + caption: "After Rain (Jeshu John - designerspics.com)" + }, + { + src: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_b.jpg", + thumbnail: "https://c6.staticflickr.com/9/8890/28897154101_a8f55be225_n.jpg", + thumbnailWidth: 320, + thumbnailHeight: 183, + caption: "37H (gratispgraphy.com)" + }, + { + src: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_b.jpg", + thumbnail: "https://c7.staticflickr.com/9/8106/28941228886_86d1450016_n.jpg", + thumbnailWidth: 271, + thumbnailHeight: 320, + caption: "Orange Macro (Tom Eversley - isorepublic.com)" + }, + { + src: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_b.jpg", + thumbnail: "https://c6.staticflickr.com/9/8342/28897193381_800db6419e_n.jpg", + thumbnailWidth: 320, + thumbnailHeight: 213, + caption: "201H (gratisography.com)" + }, + { + src: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_b.jpg", + thumbnail: "https://c8.staticflickr.com/9/8104/28973555735_ae7c208970_n.jpg", + thumbnailWidth: 320, + thumbnailHeight: 213, + caption: "Flower Interior Macro (Tom Eversley - isorepublic.com)" + }, + { + src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg", + thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg", + thumbnailWidth: 320, + thumbnailHeight: 213, + caption: "Man on BMX (Tom Eversley - isorepublic.com)" + }, + { + src: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_b.jpg", + thumbnail: "https://c4.staticflickr.com/9/8578/28357117603_97a8233cf5_n.jpg", + thumbnailWidth: 320, + thumbnailHeight: 213, + caption: "Ropeman - Thailand (Tom Eversley - isorepublic.com)" + }, + { + src: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_b.jpg", + thumbnail: "https://c1.staticflickr.com/9/8056/28354485944_148d6a5fc1_n.jpg", + thumbnailWidth: 257, + thumbnailHeight: 320, + caption: "A photo by 贝莉儿 NG. (unsplash.com)" + } + ]) +}; + +ReactDOM.render(, document.getElementById('demo6')); diff --git a/examples/index.html b/examples/index.html index 7a4d067..a36d092 100644 --- a/examples/index.html +++ b/examples/index.html @@ -117,7 +117,12 @@

Code


+

Custom Controls +

+
+

Code

+