Fullscreen Gallery

A fullscreen gallery that fills the viewport with one image at a time. Good for immersive photo stories, lookbooks, or a striking visual showcase.

import * as React from 'react';
import { cn } from '@/lib/utils';
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ExpandIcon,
  MinimizeIcon,
} from 'lucide-react';
import { Button } from '@/components/ui/button';

interface GalleryImage {
  src: string;
  alt: string;
  width: number;
  height: number;
}

export default function FullscreenGallery() {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [isFullscreen, setIsFullscreen] = React.useState(false);
  const galleryRef = React.useRef<HTMLDivElement>(null);

  // Static images array
  const images: GalleryImage[] = [
    {
      src: 'https://images.unsplash.com/photo-1682687982501-1e58ab814714?q=80&w=1470&auto=format&fit=crop',
      alt: 'Emerald lake surrounded by forest and mountains',
      width: 1470,
      height: 980,
    },
    {
      src: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?q=80&w=1470&auto=format&fit=crop',
      alt: 'Majestic mountain peaks with snow and clouds',
      width: 1470,
      height: 980,
    },
    {
      src: 'https://images.unsplash.com/photo-1433086966358-54859d0ed716?q=80&w=1374&auto=format&fit=crop',
      alt: 'Powerful waterfall flowing through lush greenery',
      width: 1374,
      height: 916,
    },
    {
      src: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?q=80&w=1474&auto=format&fit=crop',
      alt: 'Foggy forest with sunlight streaming through trees',
      width: 1474,
      height: 982,
    },
    {
      src: 'https://images.unsplash.com/photo-1426604966848-d7adac402bff?q=80&w=1470&auto=format&fit=crop',
      alt: 'Serene mountain lake reflecting snow-capped peaks',
      width: 1470,
      height: 980,
    },
  ];

  const prevSlide = () => {
    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
  };

  const nextSlide = () => {
    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
  };

  // Handle fullscreen toggling
  const toggleFullscreen = () => {
    if (!isFullscreen) {
      if (galleryRef.current?.requestFullscreen) {
        galleryRef.current.requestFullscreen();
      }
      setIsFullscreen(true);
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      }
      setIsFullscreen(false);
    }
  };

  React.useEffect(() => {
    const handleFullscreenChange = () => {
      setIsFullscreen(!!document.fullscreenElement);
    };

    document.addEventListener('fullscreenchange', handleFullscreenChange);
    return () => {
      document.removeEventListener('fullscreenchange', handleFullscreenChange);
    };
  }, []);

  // Keyboard navigation
  React.useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === 'ArrowRight') {
        nextSlide();
      } else if (e.key === 'ArrowLeft') {
        prevSlide();
      } else if (e.key === 'Escape' && isFullscreen) {
        toggleFullscreen();
      } else if (e.key === 'f') {
        toggleFullscreen();
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isFullscreen]);

  return (
    <div
      ref={galleryRef}
      className={cn(
        'relative w-full overflow-hidden bg-black',
        isFullscreen ? 'h-screen' : 'aspect-video rounded-lg'
      )}
    >
      {/* Progress bar */}
      <div className="absolute top-0 right-0 left-0 z-10 h-1 bg-black/20">
        <div
          className="h-full bg-white"
          style={{ width: `${((currentIndex + 1) / images.length) * 100}%` }}
        />
      </div>

      {/* Images */}
      <div className="relative h-full w-full">
        {images.map((image, index) => (
          <div
            key={`slide-${index}`}
            className={cn(
              'absolute inset-0 transition-all duration-500',
              index === currentIndex ? 'opacity-100' : 'opacity-0'
            )}
          >
            <img
              src={image.src}
              alt={image.alt}
              sizes="100vw"
              className="object-contain"
            />
          </div>
        ))}
      </div>

      {/* Controls - centered at the bottom */}
      <div className="absolute inset-x-0 bottom-0 z-10 flex items-center justify-between p-4 text-white">
        <div className="text-xs text-white/70">
          {currentIndex + 1} / {images.length}
        </div>

        <div className="mb-2 flex items-center gap-2">
          <Button size="icon" onClick={prevSlide}>
            <ChevronLeftIcon className="h-5 w-5" />
          </Button>

          <Button size="icon" onClick={toggleFullscreen}>
            {isFullscreen ? (
              <MinimizeIcon className="h-5 w-5" />
            ) : (
              <ExpandIcon className="h-5 w-5" />
            )}
          </Button>

          <Button size="icon" onClick={nextSlide}>
            <ChevronRightIcon className="h-5 w-5" />
          </Button>
        </div>

        <div className="mb-3 max-w-md text-center">
          <p className="sr-only">{images[currentIndex]!.alt}</p>
        </div>
      </div>
    </div>
  );
}

About this block

Fullscreen Gallery is a focused image viewer with a single large image filling the frame at a time. A thin progress bar runs across the top, filling left to right as a reader steps through the set. Below the image sits a bottom bar with a slide counter on the left, previous and next arrow buttons in the centre, and an expand button that calls the browser native fullscreen API to push the entire viewer edge to edge. Images cross-fade with a short transition as the active index changes.

The image list, count, and alt text are all independent. You can swap in any set of photos and add or remove slides without touching the controls or layout. The progress bar and counter update automatically from the array length, so the chrome stays correct however many items you include.

When to use

Reach for this block when you want one image to hold full attention at a time rather than showing a grid or strip. It suits a course preview page on an online education platform where each slide shows a lesson outcome or campus environment, a lookbook that steps through a visual story, or any page where sequential context matters and distraction should be minimal. Compared to the filmstrip layout, it removes the thumbnail row so the active image can breathe, and compared to the carousel it adds a true fullscreen mode for readers who want an immersive view.

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the subject before the viewer draws focus
Feature Sections that establish context so each image lands with meaning

After

Testimonials to follow the visual story with social proof
A CTA section to convert attention into action once the gallery has made its case

What you can display

The block works for any sequential set of images where the reader benefits from stepping through one at a time:

Course or curriculum previews. Show a lesson interface, a classroom setting, or a student outcome per slide to give prospective learners a clear picture of what they are signing up for.
Visual case studies. Walk through before and after states, key project milestones, or annotated screenshots in a controlled order that tells a story.
Environment or location tours. Present a campus, studio, or facility slide by slide so visitors build a mental map as they navigate forward.

Tip: keyboard navigation is built in. Left and right arrow keys step through slides and the F key toggles fullscreen, so power users never need to reach for the buttons.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

A hero section to introduce the subject before the viewer draws focus
Feature Sections that establish context so each image lands with meaning

After

Testimonials to follow the visual story with social proof
A CTA section to convert attention into action once the gallery has made its case

What you can display

The block works for any sequential set of images where the reader benefits from stepping through one at a time:

Course or curriculum previews. Show a lesson interface, a classroom setting, or a student outcome per slide to give prospective learners a clear picture of what they are signing up for.
Visual case studies. Walk through before and after states, key project milestones, or annotated screenshots in a controlled order that tells a story.
Environment or location tours. Present a campus, studio, or facility slide by slide so visitors build a mental map as they navigate forward.

Tip: keyboard navigation is built in. Left and right arrow keys step through slides and the F key toggles fullscreen, so power users never need to reach for the buttons.

Fullscreen Gallery

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display