Navigation Dots

[YuroZen]

I'm attempting to add "navigation dots" to the lightbox. Tried adding outside of lightbox and couldn't get my element above the lightbox with z-index: you could see the dots but you couldn't "click" or mouse-over and get a hover effect.

Problem right now: when the plugin is added to the plugins array, nav dots show up, but the images no longer show. When the plugin is removed, no nav dot but images restored.

return (
  <div className="Gallery">
    {lightboxOpen && (
      <Lightbox
        open={lightboxOpen}
        close={handleClose}
        slides={filteredImages.map((img) => ({ src: img.src }))}
        plugins={[Zoom, Fullscreen, NavigationDotsPlugin]}
        zoom={{
          maxZoomPixelRatio: 3,
          zoomInMultiplier: 2,
          doubleTapDelay: 300,
          doubleClickDelay: 300,
          doubleClickMaxStops: 2,
          keyboardMoveDistance: 50,
          wheelZoomDistanceFactor: 100,
          pinchZoomDistanceFactor: 100,
          scrollToZoom: true,
        }}
        fullscreen={{
          ref: fullscreenRef,
          onEnter: () => {
            console.log("Entered fullscreen");
            setIsFullscreen(true);
          },
          onExit: () => {
            console.log("Exited fullscreen");
            setIsFullscreen(false);
          },
        }}
        render={{
          iconZoomIn: () => null,
          iconZoomOut: () => null,
          iconEnterFullscreen: () => null,
          iconExitFullscreen: () => null,
          buttonFullscreen: ({ isFullscreen }) => (
            <button onClick={handleFullscreenToggle} id="fullscreenbutton">
              {isFullscreen ? <ExitFullscreenIcon /> : <EnterFullscreenIcon />}
            </button>
          ),
        }}
        index={currentIndex}
        on={{
          view: ({ index: newIndex }) => {
            console.log(`View changed to index: ${newIndex}`);
            setCurrentIndex(newIndex);
          },
          enterFullscreen: () => {
            console.log("Entered fullscreen");
            setIsFullscreen(true);
          },
          exitFullscreen: () => {
            console.log("Exited fullscreen");
            setIsFullscreen(false);
          },
        }}
      />
    )}
  </div>
);

// NavigationDotsModule.js
import React, { useContext } from "react";
import { useLightboxState } from "yet-another-react-lightbox";
import { ImageDataContext } from "../../context/ImageContext";

const NavigationDotsModule = () => {
  const { currentIndex, slides } = useLightboxState();
  console.log("Current index in NavigationDotsModule:", currentIndex);
  console.log("Slides in NavigationDotsModule:", slides);

  const { setCurrentIndex } = useContext(ImageDataContext);
  console.log("ImageContext accessed in NavigationDotsModule");

  return (
    <div style={{ textAlign: "center", position: "absolute", bottom: "10px", width: "100%" }}>
      {slides.map((_slide, index) => (
        <button
          key={index}
          style={{
            height: "10px",
            width: "10px",
            borderRadius: "50%",
            backgroundColor: currentIndex === index ? "white" : "gray",
            margin: "0 5px",
            cursor: "pointer",
            border: "none",
          }}
          onClick={() => {
            console.log(`Navigating to slide ${index}`);
            setCurrentIndex(index);
          }}
          aria-label={`Go to slide ${index + 1}`}
        />
      ))}
    </div>
  );
};

export default NavigationDotsModule;

[igordanchenko]

Can you also post your NavigationDotsPlugin source code?

[igordanchenko]

I'm assuming you added your module with the addModule plugin function. If that's the case, then you should also render children in your module.

Alternatively, you can use the addChild plugin function:

addChild(MODULE_CONTROLLER, createModule("dots", NavigationDotsModule));

Please feel free to use the following draft as a starting point.

function NavigationDotsModule() {
  const { slides, currentIndex } = useLightboxState();
  const dispatch = useLightboxDispatch();

  const navigateTo = (index: number) => () => {
    dispatch({ type: "swipe", increment: index - currentIndex });
  };

  return (
    <div style={{ position: "absolute", bottom: 16 }}>
      {slides.map((_, index) => (
        <button
          // eslint-disable-next-line react/no-array-index-key
          key={index}
          type="button"
          style={{
            height: "10px",
            width: "10px",
            borderRadius: "50%",
            backgroundColor: currentIndex === index ? "white" : "gray",
            margin: "0 5px",
            padding: 0,
            cursor: "pointer",
            border: "none",
          }}
          aria-label={`Go to slide ${index + 1}`}
          onClick={navigateTo(index)}
        />
      ))}
    </div>
  );
}

function NavigationDotsPlugin({ addChild }: PluginProps) {
  addChild(MODULE_CONTROLLER, createModule("dots", NavigationDotsModule));
}

[YuroZen]

// NavigationDotsModule.js
import React, { useContext } from 'react';
import { useLightboxState } from 'yet-another-react-lightbox';
import { ImageDataContext } from '../../context/ImageContext';

const NavigationDotsModule = () => {
    const { currentIndex, slides } = useLightboxState();
    const { setCurrentIndex } = useContext(ImageDataContext);

    return (
        <div style={{ textAlign: 'center', position: 'absolute', bottom: '10px', width: '100%',  }}>
            {slides.map((_slide, index) => (
                <button
                    key={index}
                    style={{
                        height: '10px',
                        width: '10px',
                        borderRadius: '50%',
                        backgroundColor: currentIndex === index ? 'white' : 'gray',
                        margin: '0 5px',
                        cursor: 'pointer',
                        border: 'none'
                    }}
                    onClick={() => setCurrentIndex(index)}
                    aria-label={`Go to slide ${index + 1}`}
                />
            ))}
            
        </div>
    );
};

export default NavigationDotsModule;

[igordanchenko]

NavigationDotsModule - that's the same code as you posted in the original question. I was curious to see the source code of the NavigationDotsPlugin that is referenced here:

plugins={[Zoom, Fullscreen, NavigationDotsPlugin]}

Anyway, see my previous answer above - I believe it should address your questions.

[YuroZen]

Sorry:

// NavigationDotsPlugin.js
import { createModule } from 'yet-another-react-lightbox';
import NavigationDotsModule from './NavigationDotsModule';

const navigationDotsModule = createModule("NavigationDots", NavigationDotsModule, {
});

const NavigationDotsPlugin = ({ addModule }) => {
    addModule(navigationDotsModule);
};

export default NavigationDotsPlugin;

[YuroZen]

the working module:

import { ImageDataContext } from '../../context/ImageContext';
import './NavigationDotsModule.css'
import React, { useContext } from 'react';

const NavigationDotsModule = ({ children }) => {
    const { filteredImages, currentIndex, setCurrentIndex } = useContext(ImageDataContext);

    const navigateTo = (index) => {
        setCurrentIndex(index); 
    };

    return (
        <>
            {children}  {/* Missing children components */}
            <div style={{ textAlign: 'center', position: 'absolute', bottom: '22px', width: '100%', paddingBottom:'20px'}} className="navDots">
                {filteredImages.map((_slide, index) => (
                    <button
                        key={index}
                        className="navDot"
                        style={{
                            height: '10px',
                            width: '10px',
                            borderRadius: '50%',
                            backgroundColor: currentIndex === index ? 'white' : 'gray',
                            margin: '0 5px',
                            cursor: 'pointer',
                            border: 'none',
                        }}
                        onClick={() => navigateTo(index)}
                        aria-label={`Go to slide ${index + 1}`}
                    />
                ))}
            </div>
        </>
    );
};

export default NavigationDotsModule;

[YuroZen]

Thank you for your help