matrix-art

commit e5820fb773250f3499f5b50298b61d0252505f7f
parent a10d4a0b2a5fa9a7b010d3e1cd01791396c6cd6a
Author: MTRNord <mtrnord1@gmail.com>
Date:   Sun,  2 Jan 2022 00:09:17 +0100

Show thumbnails if multiple pictures

Diffstat:
M
pages/post/[id].tsx
 | 
7
+++++--

1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/pages/post/[id].tsx b/pages/post/[id].tsx
@@ -3,6 +3,7 @@ import 'lightgallery/css/lightgallery.css';
 import 'lightgallery/css/lg-zoom.css';
 import 'lightgallery/css/lg-thumbnail.css';
 import lgZoom from 'lightgallery/plugins/zoom';
+import lgThumbnail from 'lightgallery/plugins/thumbnail';
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import Head from "next/head";
 import { NextRouter, withRouter } from "next/router";
@@ -219,9 +220,10 @@ class Post extends Component<Props, State> {
                 </Head>
                 <div className="flex justify-center p-10 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
                     <LightGallery
-                        plugins={[lgZoom]}
+                        plugins={[lgThumbnail, lgZoom]}
                         elementClassNames="shadow-2xl max-w-full lg:max-w-3xl max-h-[871px] shadow-black cursor-zoom-in"
                         key={imageEvent.event_id}
+                        thumbnail={true}
                     >
                         <a href={url} title={caption} data-src={url}>
                             <img alt={caption} title={caption} src={thumbnail_url} />
@@ -257,9 +259,10 @@ class Post extends Component<Props, State> {
                 </Head>
                 <div className="flex justify-center p-10 bg-[#fefefe]/[.95] dark:bg-[#14181E]/[.95]">
                     <LightGallery
-                        plugins={[lgZoom]}
+                        plugins={[lgThumbnail, lgZoom]}
                         elementClassNames="shadow-2xl max-w-full lg:max-w-3xl max-h-[871px] shadow-black cursor-zoom-in"
                         key={imageEvent.event_id}
+                        thumbnail={true}
                     >
                         {images}
                     </LightGallery>