Alpine Popout Plugin

!npm (tag)
!npm
!npm type definitions
!GitHub License

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:

``bash
npm install @designbycode/alpine-popout
``

Then register it in your Alpine setup:

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

Alpine.plugin(Popout)
Alpine.start()
`

Or include it via a

`

---

Usage

Apply the x-popout directive to any element.

$3

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

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

---

$3

You can pass an Alpine expression with configuration options:

`html
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

`html

x-popout="{ largeSrc: '/large-photo3.jpg', margin: 50 }"
src="/thumb3.jpg"
alt="Photo 3"
class="rounded-md"
/>

``

---

License