Alpine Popout Plugin

A lightweight Alpine.js directive that provides a smooth image popout (zoom) effect.
Clicking on an image with x-popout will enlarge it into the center of the screen with a darkened background overlay.
Supports custom options such as margins, animation duration, easing, background color and larger image source loading.

Features

• Simple Alpine.js directive x-popout
• Smooth zoom-in / zoom-out animation
• Supports larger image source for full-resolution previews
• Customizable:
  • Margin from edges
  • Background overlay color
  • Animation duration and easing
• Preloads large image on hover
• Keyboard Escape key and click-to-close support
• Fully responsive on resize

Installation

Install via npm:

npm install @designbycode/alpine-popout

Then register it in your Alpine setup:

import Alpine from 'alpinejs'
import Popout from '@designbycode/alpine-popout'

Alpine.plugin(Popout)
Alpine.start()

Or include it via a <script> tag (UMD build):

<script src="https://unpkg.com/@designbycode/alpine-popout"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.plugin(Popout)
    })
</script>

Usage

Apply the x-popout directive to any <img> element.

Basic Example

<img 
    x-popout 
    src="/thumbnail.jpg" 
    alt="Example Image" 
    class="rounded-md"
/>

Clicking this image will open it in a popout view with default settings.

With Options

You can pass an Alpine expression with configuration options:

<img 
    x-popout="{ 
        margin: 40, 
        background: 'rgba(0,0,0,0.85)', 
        duration: 400, 
        easing: 'ease-in-out', 
        largeSrc: '/high-res.jpg' 
    }"
    src="/thumbnail.jpg" 
    alt="Zoomable Image" 
    class="rounded-lg"
/>

Options

| Option | Type | Default | Description | | ------------ | -------- | ------------------------- | ------------------------------------------ | | margin | number | 24 | Space around the image from viewport edges | | background | string | rgba(0,0,0,0.75) | Overlay background color | | duration | number | 300 (ms) | Animation duration in milliseconds | | easing | string | cubic-bezier(0.2,0,0,1) | CSS easing function | | largeSrc | string | null | Optional high-resolution image URL |

Example Markup

<div class="grid grid-cols-3 gap-4">
    <!-- Simple -->
    <img x-popout src="/thumb1.jpg" alt="Photo 1" class="rounded-md" />

    <!-- With custom background -->
    <img x-popout="{ background: 'rgba(20,20,20,0.9)' }" src="/thumb2.jpg" alt="Photo 2" class="rounded-md" />

    <!-- With high resolution preview -->
    <img 
        x-popout="{ largeSrc: '/large-photo3.jpg', margin: 50 }"
        src="/thumb3.jpg" 
        alt="Photo 3" 
        class="rounded-md"
/>
</div>

License