# Arx Lightbox

A responsive jQuery lightbox for images with gallery grouping, keyboard navigation, captions, and a slick overlay UI.

## Installation

```html
<link rel="stylesheet" href="css/lightbox.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="js/lightbox.js"></script>
```

## Basic Usage

Enable all lightboxes with one line:

```js
$('[data-lightbox]').lightbox();
```

```html
<a href="images/full.jpg" data-lightbox="photos">
  <img src="images/thumb.jpg" alt="A photo">
</a>
```

## Galleries

Elements sharing the same `data-lightbox` value are grouped into a gallery with arrow navigation and a counter.

```html
<a href="01.jpg" data-lightbox="vacation">
  <img src="01-thumb.jpg" alt="Photo 1">
</a>
<a href="02.jpg" data-lightbox="vacation">
  <img src="02-thumb.jpg" alt="Photo 2">
</a>
```

```js
$('[data-lightbox]').lightbox();
```

## Captions

Set captions via `data-lightbox-caption`, falling back to `title` or `img[alt]`.

```html
<a href="photo.jpg" data-lightbox-caption="Sunset over the bay">
  <img src="thumb.jpg">
</a>
```

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `groupAttr` | `string` | `data-lightbox` | Attribute for gallery grouping |
| `captionAttr` | `string` | `data-lightbox-caption` | Attribute for caption text |
| `showCounter` | `boolean` | `true` | Show "3 / 8" counter |
| `showArrows` | `boolean` | `true` | Show prev/next arrows |
| `closeOnClick` | `boolean` | `true` | Close on overlay click |
| `closeOnEsc` | `boolean` | `true` | Close on Escape key |
| `animationSpeed` | `number` | `300` | Overlay fade duration (ms) |
| `fadeSpeed` | `number` | `250` | Image fade-in duration (ms) |
| `zIndex` | `number` | `9999` | CSS z-index |
| `loop` | `boolean` | `true` | Loop gallery navigation |
| `swipeEnabled` | `boolean` | `true` | Enable swipe left/right on touch devices |
| `swipeThreshold` | `number` | `50` | Min swipe distance to trigger navigation (px) |
| `onOpen` | `function` | `null` | Callback on open |
| `onClose` | `function` | `null` | Callback on close |
| `onChange` | `function` | `null` | Callback on navigation |

## Keyboard

| Key | Action |
|-----|--------|
| `←` `→` | Navigate between images |
| `Escape` | Close the lightbox |
| `Tab` | Cycle between close button and arrows |

## Touch

Swipe left or right on the image to navigate between images. Vertical scrolling is preserved — only horizontal swipes are intercepted. Disable with `swipeEnabled: false`.

## Programmatic API

```js
ArxLightbox.close();
ArxLightbox.next();
ArxLightbox.prev();
ArxLightbox.isOpen(); // true / false
```

## Files

- `css/lightbox.css` — Styles for overlay, image, arrows, counter, spinner
- `js/lightbox.js` — jQuery plugin