+
,
+
{renderOverlay()}
- ]
+ ];
}
renderCountOverlay(more) {
- const {images} = this.props;
- const {countFrom} = this.state;
+ const { images } = this.props;
+ const { countFrom } = this.state;
const extra = images.length - (countFrom && countFrom > 5 ? 5 : countFrom);
- return [more &&
, more &&
]
+ return [
+ more &&
,
+ more && (
+
+ )
+ ];
}
- render(){
- const {modal, index, countFrom} = this.state;
- const {images} = this.props;
+ render() {
+ const { modal, index, countFrom, imageUrls, selectedImage } = this.state;
+ const { images } = this.props;
const imagesToShow = [...images];
- if(countFrom && images.length > countFrom) {
+ if (countFrom && images.length > countFrom) {
imagesToShow.length = countFrom;
}
- return(
-
- {[1, 3, 4].includes(imagesToShow.length) && this.renderOne()}
- {imagesToShow.length >= 2 && imagesToShow.length != 4 && this.renderTwo()}
- {imagesToShow.length >= 4 && this.renderThree()}
+ return (
+
+ {[1, 3, 4].includes(imagesToShow.length) && this.renderOne()}
+ {imagesToShow.length >= 2 &&
+ imagesToShow.length != 4 &&
+ this.renderTwo()}
+ {imagesToShow.length >= 4 && this.renderThree()}
- {modal && }
-
- )
+ {modal && (
+
+ )}
+
+ );
}
-
}
Images.propTypes = {
- images: PropTypes.array.isRequired,
+ images: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.string),
+ PropTypes.arrayOf(PropTypes.shape({ url: PropTypes.string.isRequired }))
+ ]).isRequired,
hideOverlay: PropTypes.bool,
renderOverlay: PropTypes.func,
overlayBackgroundColor: PropTypes.string,
onClickEach: PropTypes.func,
- countFrom: PropTypes.number,
+ countFrom: PropTypes.number
};
-export default Images;
\ No newline at end of file
+export default Images;
diff --git a/src/components/Modal.js b/src/components/Modal.js
index 861fa3d..5494016 100644
--- a/src/components/Modal.js
+++ b/src/components/Modal.js
@@ -1,52 +1,52 @@
-import React, { Component } from 'react';
-import { Image, Modal, Grid, Row, Col } from 'react-bootstrap';
-import Lightbox from 'react-image-lightbox';
-import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
-
+import React, { Component } from "react";
+import { Image, Modal, Grid, Row, Col } from "react-bootstrap";
+import Lightbox from "lightbox-react";
+import "lightbox-react/style.css"; // This only needs to be imported once in your app
class ModalComponent extends Component {
- constructor(props) {
- super(props)
- this.state = {
- images: props.images || [],
- currentImageIndex: props.index
- };
-
- this.onMovePrevRequest = this.onMovePrevRequest.bind(this);
- this.onMoveNextRequest = this.onMoveNextRequest.bind(this);
- }
-
- onMovePrevRequest() {
- const {currentImageIndex, images} = this.state;
-
- this.setState({
- currentImageIndex: (currentImageIndex + images.length - 1) % images.length,
- })
- }
-
- onMoveNextRequest() {
- const {currentImageIndex, images} = this.state;
-
- this.setState({
- currentImageIndex: (currentImageIndex + 1) % images.length,
- })
- }
-
- render(){
- const {images, currentImageIndex} = this.state;
- const {onClose, index} = this.props;
-
- return(
-
- )
- }
-
+ />
+ );
+ }
}
-export default ModalComponent;
\ No newline at end of file
+export default ModalComponent;
diff --git a/src/css/style.css b/src/css/style.css
index bd5a4f6..7ae6764 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,5 @@
-@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
-@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css';
+@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css";
+@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css";
/* Images Component CSS */
@@ -16,7 +16,7 @@
width: 100% !important;
}
-.container *{
+.container * {
margin: 0;
padding: 0;
cursor: pointer;
@@ -88,16 +88,46 @@
.slide {
height: 0;
bottom: 100%;
- transition: .5s ease;
+ transition: 0.5s ease;
overflow: hidden;
font-size: 3%;
}
-.border:hover .slide {
+.border:hover .slide {
bottom: 0;
height: auto;
}
-.border:hover .animate-text {
- top: 62%
+.border:hover .animate-text {
+ top: 62%;
+}
+
+.d-none {
+ display: none;
+}
+
+.iframe {
+ width: 80% !important;
+ height: 80% !important;
+ max-width: 97% !important;
+ position: absolute !important;
+ left: 0 !important;
+ right: 0 !important;
+ margin: auto !important;
+ top: 50% !important;
+ transform: translateY(-50%) !important;
+}
+.iframe-overlay {
+ z-index: -1;
+ width: 100% !important;
+ height: 100% !important;
+}
+
+.flex-container-div {
+ width: 100% !important;
+ height: 100% !important;
+ display: flex !important;
+ flex: 1 !important;
+ justify-content: center !important;
+ align-items: center !important;
}