Light Gallery

import React from 'react'
import { Col, Container, Row } from 'react-bootstrap'
import { Link } from 'react-router-dom';
// lightbox gallery
import LightGallery from 'lightgallery/react';
import lgFullscreen from 'lightgallery/plugins/fullscreen';
import lgAutoplay from 'lightgallery/plugins/autoplay';
import lgZoom from 'lightgallery/plugins/zoom';
import lgShare from 'lightgallery/plugins/share';
import lgComment from 'lightgallery/plugins/comment';
import lgVideo from 'lightgallery/plugins/video';
// css
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-fullscreen.css';
import 'lightgallery/css/lg-autoplay.css';
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-share.css';
import 'lightgallery/css/lg-video.css';

//Images
import mock1 from '../../../Assets/dist/img/gallery/mock1.jpg'
import mock2 from '../../../Assets/dist/img/gallery/mock2.jpg'
import mock3 from '../../../Assets/dist/img/gallery/mock3.jpg'
import mock4 from '../../../Assets/dist/img/gallery/mock4.jpg'
import mock5 from '../../../Assets/dist/img/gallery/mock5.jpg'
import mock6 from '../../../Assets/dist/img/gallery/mock6.jpg'
import mock7 from '../../../Assets/dist/img/gallery/mock7.jpg'
import mock8 from '../../../Assets/dist/img/gallery/mock8.jpg'
import mock9 from '../../../Assets/dist/img/gallery/mock9.jpg'
import mock10 from '../../../Assets/dist/img/gallery/mock10.jpg'
import mock11 from '../../../Assets/dist/img/gallery/mock11.jpg'
import mock12 from '../../../Assets/dist/img/gallery/mock12.jpg'
import mock13 from '../../../Assets/dist/img/gallery/mock13.jpg'
import mock14 from '../../../Assets/dist/img/gallery/mock14.jpg'
import mock15 from '../../../Assets/dist/img/gallery/mock15.jpg'

const BasicExample = () => {
    return (
        <>
            <Row className="hk-gallery">
                <LightGallery
                    elementClassNames="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1"
                    speed={500}
                    mode='lg-fade'
                    plugins={[lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo]}
                    thumbnail={false}
                >

                    <Col lg={2} md={4} sm={4} xs={6} className="mb-3" data-src={mock1}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock1})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src="http://www.youtube.com/watch?v=Pq9yPrLWMyU" data-poster={mock2}>
                        <Link to="#" >
                            <div className="gallery-img gallery-video" style={{ backgroundImage: `url(${mock2})` }} />
                            <i className="ion ion-ios-play" />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock3}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock3})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src="http://vimeo.com/1084537" data-poster={mock4}>
                        <Link to="#" >
                            <div className="gallery-img gallery-video" style={{ backgroundImage: `url(${mock4})` }} />
                            <i className="ion ion-ios-play" />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock5}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock5})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock6}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock6})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock7}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock7})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock8}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock8})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock9}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock9})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock10}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock10})` }} />
                        </Link>
                    </Col>
                </LightGallery>

            </Row>
            <h6 className="mt-3 mb-2">Yesterday</h6>
            <Row className="hk-gallery">
                <LightGallery
                    elementClassNames="row row-sm row-cols-xxl-6 row-cols-xl-5 row-cols-lg-3 row-cols-md-2 row-cols-1"
                    speed={500}
                    mode='lg-fade'
                    plugins={[lgFullscreen, lgAutoplay, lgZoom, lgShare, lgComment, lgVideo]}
                    thumbnail={false}
                >
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock11}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock11})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src="http://www.youtube.com/watch?v=Pq9yPrLWMyU" data-poster={mock12}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock12})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock13}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock13})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src="http://vimeo.com/1084537" data-poster={mock14}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock14})` }} />
                        </Link>
                    </Col>
                    <Col lg={2} md={4} sm={4} xs={6} data-src={mock15}>
                        <Link to="#" >
                            <div className="gallery-img" style={{ backgroundImage: `url(${mock15})` }} />
                        </Link>
                    </Col>
                </LightGallery>
            </Row>
        </>
    )
}

export default BasicExample