100 lines
No EOL
4.3 KiB
JavaScript
Executable file
100 lines
No EOL
4.3 KiB
JavaScript
Executable file
import ReactPaginate from "react-paginate";
|
||
import { useRouter } from "next/router";
|
||
import Image from 'next/image';
|
||
import Link from 'next/link'
|
||
|
||
const GalleryPager = ({galleryImages, basepath, gallery}) => {
|
||
|
||
const router = useRouter()
|
||
|
||
const handleImageClick = (e, path) => {
|
||
alert(path)
|
||
}
|
||
|
||
const handlePagination = page => {
|
||
const path = router.pathname
|
||
const query = router.query
|
||
query.page = page.selected + 1
|
||
router.push({
|
||
pathname: path,
|
||
query: query,
|
||
})
|
||
}
|
||
|
||
const carouselList = []
|
||
for (var i = 0; i < galleryImages.meta.pagination.total; i++) {
|
||
carouselList.push(<li data-target="carouselExample" data-slide-to={i}></li>)
|
||
}
|
||
|
||
return (
|
||
<div className="episode_pages col-sm-12">
|
||
<div className="card-columns">
|
||
{galleryImages.data.map((galleryImage) => {
|
||
var imageUrl = basepath + galleryImage.attributes.Image.data.attributes.formats.small.url
|
||
var imageLink = "/galleryimages/" + galleryImage.attributes.Slug
|
||
return (
|
||
<div className="card p-3 hover:cursor-pointer" data-target="#carouselExample" data-slide-to="0">
|
||
<Link href={imageLink}><Image
|
||
src={imageUrl}
|
||
layout="responsive"
|
||
height={galleryImage.attributes.Image.data.attributes.formats.small.height}
|
||
width={galleryImage.attributes.Image.data.attributes.formats.small.width}
|
||
key={galleryImage.attributes.id}
|
||
className="card-img-top"
|
||
alt={galleryImage.attributes.Title}
|
||
></Image></Link>
|
||
</div>
|
||
)})}
|
||
</div>
|
||
|
||
<div className="modal fade" id="exampleModal" tabIndex="-1" role="dialog" aria-hidden="true">
|
||
<div className="modal-dialog" role="document">
|
||
<div className="modal-content">
|
||
<div className="modal-header">
|
||
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div className="modal-body">
|
||
<div id="carouselExample" className="carousel slide" data-ride="carousel">
|
||
<ol>
|
||
{carouselList}
|
||
</ol>
|
||
<div className="carousel-inner">
|
||
{galleryImages.data.map((galleryImage) => {
|
||
<div className="carousel-item">
|
||
<img className="d-block w-100"
|
||
src={basepath + galleryImage.attributes.Image.data.attributes.formats.medium.url}></img>
|
||
</div>
|
||
})}
|
||
<a className="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
|
||
<span className="carousel-control-prev-icon" aria-hidden="true"></span>
|
||
<span className="sr-only">Previous</span>
|
||
</a>
|
||
<a className="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
|
||
<span className="carousel-control-next-icon" aria-hidden="true"></span>
|
||
<span className="sr-only">Next</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div className="modal-footer">
|
||
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<ReactPaginate
|
||
marginPagesDisplayed={2}
|
||
pageRangeDisplayed={5}
|
||
previousLabel={"previous"}
|
||
nextLabel={"next"}
|
||
breakLabel={"..."}
|
||
initialPage={galleryImages.page}
|
||
pageCount={galleryImages.meta.pagination.pageCount}
|
||
onPageChange={handlePagination} />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default GalleryPager |