fix: handle images in gallery
This commit is contained in:
reza karimi
+65
-72
@@ -1,7 +1,7 @@
|
|||||||
import React, { useEffect, useState} from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import AppContainer from "./appContainer";
|
import AppContainer from "./appContainer";
|
||||||
import {AppFile, AppUrl} from "../lib/api";
|
import { AppFile, AppUrl } from "../lib/api";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import dynamic from "next/dynamic";
|
import dynamic from "next/dynamic";
|
||||||
import { Suspense } from 'react'
|
import { Suspense } from 'react'
|
||||||
@@ -12,8 +12,8 @@ import {
|
|||||||
MDBContainer,
|
MDBContainer,
|
||||||
MDBRow,
|
MDBRow,
|
||||||
} from "mdb-react-ui-kit";
|
} from "mdb-react-ui-kit";
|
||||||
import {LightBox} from "react-lightbox-pack";
|
import { LightBox } from "react-lightbox-pack";
|
||||||
import {Button, Divider, Tab, TabList, TabPanel, TabPanels, Tabs} from "@chakra-ui/react";
|
import { Button, Divider, Tab, TabList, TabPanel, TabPanels, Tabs } from "@chakra-ui/react";
|
||||||
|
|
||||||
const APV = dynamic(() => import('./components/Videos'), {
|
const APV = dynamic(() => import('./components/Videos'), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
@@ -40,25 +40,25 @@ const toBase64 = (str) =>
|
|||||||
const Gallery = (dataImage) => {
|
const Gallery = (dataImage) => {
|
||||||
const [Images, SetImages] = useState(dataImage)
|
const [Images, SetImages] = useState(dataImage)
|
||||||
const [justifyActive, setJustifyActive] = React.useState('tab1');
|
const [justifyActive, setJustifyActive] = React.useState('tab1');
|
||||||
const [toggle, setToggle] = React.useState(false);
|
const [toggle, setToggle] = React.useState(false);
|
||||||
const [sIndex, setSIndex] = React.useState(0);
|
const [sIndex, setSIndex] = React.useState(0);
|
||||||
const [filterId, setFilterId] = React.useState(1);
|
const [filterId, setFilterId] = React.useState(1);
|
||||||
const Parallax = ({ quality }) => {
|
const Parallax = ({ quality }) => {
|
||||||
return `../resource/parallax/Gallery.jpg`;
|
return `../resource/parallax/Gallery.jpg`;
|
||||||
}
|
}
|
||||||
const Filter = async (filter) => {
|
const Filter = async (filter) => {
|
||||||
const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`));
|
const res = await axios.get(AppUrl(`FilterGalleyImages/${filter}`));
|
||||||
SetImages({dataImage : res.data})
|
SetImages({ dataImage: res.data })
|
||||||
setFilterId(filter)
|
setFilterId(filter)
|
||||||
}
|
}
|
||||||
|
|
||||||
const AllImage = async () => {
|
const AllImage = async () => {
|
||||||
const res = await axios.get(AppUrl(`GetGalleyImages`));
|
const res = await axios.get(AppUrl(`GetGalleyImages`));
|
||||||
SetImages({dataImage: res.data})
|
SetImages({ dataImage: res.data })
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handler
|
// Handler
|
||||||
const lightBoxHandler = (state, sIndex) => {
|
const lightBoxHandler = (state, sIndex) => {
|
||||||
setToggle(state);
|
setToggle(state);
|
||||||
setSIndex(sIndex);
|
setSIndex(sIndex);
|
||||||
};
|
};
|
||||||
@@ -88,7 +88,7 @@ const Gallery = (dataImage) => {
|
|||||||
</style>
|
</style>
|
||||||
<AppContainer>
|
<AppContainer>
|
||||||
<div className="parallax-container">
|
<div className="parallax-container">
|
||||||
<h1 className={'center-align text-white header_back service-text dana font-weight-bold'}> گالری بیمارستان </h1>
|
<h1 className={'center-align text-white header_back service-text dana font-weight-bold'}> گالری بیمارستان </h1>
|
||||||
<Image
|
<Image
|
||||||
loader={Parallax}
|
loader={Parallax}
|
||||||
src="Parallax.png"
|
src="Parallax.png"
|
||||||
@@ -98,68 +98,61 @@ const Gallery = (dataImage) => {
|
|||||||
alt="درباره بیارستان مهر ایرانیان پرند "
|
alt="درباره بیارستان مهر ایرانیان پرند "
|
||||||
width={3000}
|
width={3000}
|
||||||
height={1300}
|
height={1300}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='lg:mx-20 sm:mx-5'>
|
<div className='lg:mx-20 sm:mx-5'>
|
||||||
<Tabs defaultIndex={1} className={'mt-5'} isFitted variant='enclosed'>
|
<Tabs defaultIndex={1} className={'mt-5'} isFitted variant='enclosed'>
|
||||||
<TabList mb='1em'>
|
<TabList mb='1em'>
|
||||||
{/* <Tab on className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>ویدئو ها</Tab> */}
|
{/* <Tab on className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>ویدئو ها</Tab> */}
|
||||||
<Tab className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>تصاویر</Tab>
|
<Tab className={'bk font-weight-bold'} _selected={{ color: 'white', bg: 'teal.500' }}>تصاویر</Tab>
|
||||||
</TabList>
|
</TabList>
|
||||||
<TabPanels>
|
|
||||||
<TabPanel>
|
|
||||||
<APV />
|
|
||||||
</TabPanel>
|
|
||||||
<TabPanel>
|
|
||||||
<div style={{ flexDirection: 'column' }} className={'flex justify-content-end flex-xl-row flex-lg-row flex-md-column flex-sm-column'}>
|
|
||||||
<MDBBtn onClick={() => Filter(2)} color={filterId === 2 ? 'light' : 'light'} className={filterId === 2 ? 'm-2' : 'm-2 text-dark'}>تصاویر در حال ساخت</MDBBtn>
|
|
||||||
<MDBBtn onClick={() => Filter(1)} color={filterId === 1 ? 'light' : 'light'} className={'m-2'}>تصاویر معماری</MDBBtn>
|
|
||||||
<MDBBtn onClick={() => AllImage()} color={filterId !== 1 && 2 ? 'light' : 'light'} className={'m-2'}>همه تصاویر </MDBBtn>
|
|
||||||
</div>
|
|
||||||
<Divider colorScheme={'gray'} />
|
|
||||||
<MDBRow style={{ marginTop: 10 }}>
|
|
||||||
{Images && Images.dataImage.map((image ,index)=> {
|
|
||||||
return (
|
|
||||||
<MDBCol xs={12} sm={12} md={6} lg={3}>
|
|
||||||
<div className={'cardImage'} key={image.id}>
|
|
||||||
<img
|
|
||||||
key={image.id}
|
|
||||||
alt={image.title}
|
|
||||||
width={350}
|
|
||||||
style={{ cursor: 'zoom-in' }}
|
|
||||||
className={'responsive-img'}
|
|
||||||
src={AppFile(`panel-public/uploads/HospitalGallery/${image.imageAddr}`)}
|
|
||||||
onClick={() => {
|
|
||||||
lightBoxHandler(true, index);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<span>{ image.title }</span>
|
|
||||||
</div>
|
|
||||||
</MDBCol>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</MDBRow>
|
|
||||||
</TabPanel>
|
|
||||||
</TabPanels>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
<LightBox
|
</Tabs>
|
||||||
state={toggle}
|
<div style={{ flexDirection: 'column' }} className={'flex justify-content-end flex-xl-row flex-lg-row flex-md-column flex-sm-column'}>
|
||||||
event={lightBoxHandler}
|
<MDBBtn onClick={() => Filter(2)} color={filterId === 2 ? 'light' : 'light'} className={filterId === 2 ? 'm-2' : 'm-2 text-dark'}>تصاویر در حال ساخت</MDBBtn>
|
||||||
data={Images.dataImage}
|
<MDBBtn onClick={() => Filter(1)} color={filterId === 1 ? 'light' : 'light'} className={'m-2'}>تصاویر معماری</MDBBtn>
|
||||||
imageWidth="60vw"
|
<MDBBtn onClick={() => AllImage()} color={filterId !== 1 && 2 ? 'light' : 'light'} className={'m-2'}>همه تصاویر </MDBBtn>
|
||||||
imageHeight="70vh"
|
</div>
|
||||||
thumbnailHeight={50}
|
<Divider colorScheme={'gray'} />
|
||||||
thumbnailWidth={50}
|
<MDBRow style={{ marginTop: 10 }}>
|
||||||
setImageIndex={setSIndex}
|
{Images && Images.dataImage.map((image, index) => {
|
||||||
imageIndex={sIndex}
|
return (
|
||||||
/>
|
<MDBCol xs={12} sm={12} md={6} lg={3}>
|
||||||
<br />
|
<div className={'cardImage'} key={image.id}>
|
||||||
<br />
|
<img
|
||||||
<br />
|
key={image.id}
|
||||||
<br />
|
alt={image.title}
|
||||||
</div>
|
width={350}
|
||||||
|
style={{ cursor: 'zoom-in' }}
|
||||||
|
className={'responsive-img'}
|
||||||
|
src={AppFile(`panel-public/uploads/HospitalGallery/${image.imageAddr}`)}
|
||||||
|
onClick={() => {
|
||||||
|
lightBoxHandler(true, index);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<span>{image.title}</span>
|
||||||
|
</div>
|
||||||
|
</MDBCol>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</MDBRow>
|
||||||
|
<LightBox
|
||||||
|
state={toggle}
|
||||||
|
event={lightBoxHandler}
|
||||||
|
data={Images.dataImage}
|
||||||
|
imageWidth="60vw"
|
||||||
|
imageHeight="70vh"
|
||||||
|
thumbnailHeight={50}
|
||||||
|
thumbnailWidth={50}
|
||||||
|
setImageIndex={setSIndex}
|
||||||
|
imageIndex={sIndex}
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
</div>
|
||||||
</AppContainer>
|
</AppContainer>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -169,7 +162,7 @@ export async function getServerSideProps(context) {
|
|||||||
const res = await axios.get(AppUrl('GetGalleyImages'));
|
const res = await axios.get(AppUrl('GetGalleyImages'));
|
||||||
return {
|
return {
|
||||||
props: {
|
props: {
|
||||||
dataImage : res.data
|
dataImage: res.data
|
||||||
}, // will be passed to the page component as props
|
}, // will be passed to the page component as props
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user