Difficulty implementing Fancybox lightbox on with next.js

Developing with Prismic
1

I am trying to implement Fanxybox to showcase an image gallery on a site I am building. I have used a content relationship to display by custom type on the webpage, and that is working great.

I am trying to link each dynamically created gallery image to a gallery in Fancybox so the user can click on an image to expand, and advance to the next image, but it doesn't see to work. It looks like when clicked, the browser re-directs to the image url.

Is there any way to fix this?

import { Content, isFilled } from "@prismicio/client";
import { JSXMapSerializer, PrismicRichText, SliceComponentProps } from "@prismicio/react";
import Bounded from "@/components/Bounded";
import Heading from "@/components/Heading";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

import { createClient } from "@/prismicio";
import { PrismicNextImage } from "@prismicio/next";


const components: JSXMapSerializer = {
  heading2: ({ children }) => (
    <Heading
      as="h2"
      size="md"
      className=""
      >
        {children}
      </Heading>
  ),
  paragraph: ({ children }) => (
    <p className="test-base font-medium font-body text-slate-600 sm:text-left text-center">
      {children}
    </p>
  )
};

/**
 * Props for `Gallery`.
 */
export type GalleryProps = SliceComponentProps<Content.GallerySlice>;

/**
 * Component for "Gallery" Slices.
 */


const Gallery = async ({ slice }: GalleryProps): Promise <JSX.Element> => {

  const client = createClient();

  const galleryItems = await Promise.all(
    slice.items.map((item) => {
      if (
        isFilled.contentRelationship(item.gallery_image) && item.gallery_image.uid
      ) {
        return client.getByUID("gallery", item.gallery_image.uid)
      }
    })
  )

  Fancybox.bind('[data-fancybox]', {

    
    groupAll: true,

    hideScrollbar: false,

    closeButton: true,

    Carousel: {
      Navigation: true,
      transition: "slide",
    },
    Toolbar: {
      display: {
        left: [],
        middle: ["prev", "infobar", "next"],
        right: ["close"]
      }
    }
  });
  

  return (
    
    <Bounded
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >  
      <Heading>
        <PrismicRichText components={components} field={slice.primary.heading} />
      </Heading>

      <div data-fancybox className="grid grid-cols-4 grid-flow-row">
        {galleryItems.map((item, index) => (
          <a data-fancybox="gallery" href={item?.data.image.url} key={index}>
            <PrismicNextImage width={200} height={200}
            field={item?.data.image}
            className="shadow-lg shadow-slate-800 rounded-lg transform transition duration-100 ease-in-out hover:scale-105 hover:border-2 hover:border-slate-100"
            imgixParams={{ar: "1:1", fit: "crop"}} />
          </a>
        ))}
      </div>

    </Bounded>
  );
};

export default Gallery;
3

Not sure if commenting on this will bump it up, but I still need assistance with this. Thanks!

4

Hey team, I've never tried out fancybox but from what I've seen online, it looks like the data-fancybox attribute should be on your <a> element instead of being a key-value in your code, could that be it?

For reference I'm looking at these docs: