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