PHPackages                             hounddd/wn-lightgallery-plugin - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. hounddd/wn-lightgallery-plugin

ActiveWinter-plugin[Utility & Helpers](/categories/utility)

hounddd/wn-lightgallery-plugin
==============================

Galleries plugin for Winter CMS with lightbox support

v1.0.3(2y ago)62891MITPHPPHP >=7.0

Since Apr 11Pushed 1y ago1 watchersCompare

[ Source](https://github.com/Hounddd/wn-lightgallery-plugin)[ Packagist](https://packagist.org/packages/hounddd/wn-lightgallery-plugin)[ Docs](https://github.com/Hounddd/wn-lightgallery-plugin)[ RSS](/packages/hounddd-wn-lightgallery-plugin/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (1)Versions (4)Used By (0)

LightGallery Plugin for Winter
==============================

[](#lightgallery-plugin-for-winter)

Create stunning images and videos galleries for your WinterCMS website in minutes. Responsive, touch-friendly, and easy to use.

---

This plugin use [lightGallery script v2.4.0](https://www.lightgalleryjs.com/).

---

Features
--------

[](#features)

- Create galleries of images organized in categories
- A gallery can be shown either as thumbnails or as an inline lightbox
- Compatible page snippet for [Winter Pages plugin](https://github.com/wintercms/wn-pages-plugin)
- Fully translate

### lightGallery script features

[](#lightgallery-script-features)

- **Vanilla javascript**, no dependencies required, not even jquery
- Fully responsive.
- Modular architecture with built in plugins.
- Highly optimized for touch devices.
- Mouse drag supports for desktops.
- Double-click/Double-tap to see actual size of the image.
- Animated thumbnails.
- Social sharing.
- YouTube Vimeo Wistia and html5 videos Support.
- 20+ Hardware-Accelerated CSS3 transitions.
- Dynamic mode.
- Inline gallery
- Full screen support.
- Zoom in/out, Pinch to zoom.
- Swipe/Drag up/down support to close gallery
- Browser history API(deep linking).
- Responsive images.
- HTML iframe support.
- Multiple instances on one page.
- Easily customizable via CSS (SCSS) and Settings.
- Smart image preloading and code optimization.
- Keyboard Navigation for desktop.
- SVG icons.
- Accessibility support.
- Rotate, flip images.
- And many more.

Installation
------------

[](#installation)

*Let assume you're in the root of your wintercms installation*

### Using composer

[](#using-composer)

Just run this command

```
composer require hounddd/wn-lightgallery-plugin
```

### Clone

[](#clone)

Clone this repo into your winter plugins folder.

```
cd plugins
mkdir hounddd && cd hounddd
git clone https://github.com/Hounddd/wn-lightgallery-plugin lightgallery
```

> **Note**: Run `php artisan winter:up` command Add `{% styles %}` and `{% scripts %}` placeholders in your layout or page `` tag, if it is not already the case.

Components
----------

[](#components)

This plugin offer 2 components and 1 static page snippet.

- `galleriesList` component, display list of galleries
- `gallerySlug` component, display in a page a gallery based on his URL
- `galleryId` page snippet, display in a page a gallery based on his ID

### Galleries list

[](#galleries-list)

Use the `galleryList` component to display a list of latest galleries on a page. The component has the following properties:

- **galleryPage** - path to the gallery details page. The default value is galleries/gallery - it matches the pages/galleries/gallery.htm file in the theme directory. This property is used in the default component partial for creating links to the gallery images.
- **categoryPage** - path to the category page. The default value is galleries/category - it matches the pages/galleries/category.htm file in the theme directory. This property is used in the default component partial for creating links to the gallery images.
- **galleriesPerPage** - how many galleries to display on a single page (the pagination is supported automatically). The default value is 9.
- **pageNumber** - this value is used to determine what page the user is on, it should be a routing parameter for the default markup. The default value is {{ :page }} to obtain the value from the route parameter :page.
- **noGalleriesMessage** - message to display in on empty galleries list.

The galleryList component injects the following variables to the page where it's used:

- **galleries** - a list of galleries loaded from the database.
- **category** - the galleries category object loaded from the database. If the category is not found, the variable value is **null**.
- **galleryPage** - contains the value of the `galleryPage` component's property.
- **categoryPage** - contains the value of the `categoryPage` component's property.
- **pageParam** - contains the value of the current viewing page.
- **noPostsMessage** - contains the value of the `noPostsMessage` component's property.

The component supports pagination and reads the current page index from the :page URL parameter. The next example shows the basic component usage:

```
title = "Show galleries"
url = "/galleries/:page?"
layout = "default"
is_hidden = 1

[viewBag]
localeUrl[fr] = "/galeries/:page?"
localeTitle[fr] = "Affiche une liste de galleries"

[galleriesList]
galleryPage = "galleries/gallery"
categoryPage = "galleries/category"
galleriesPerPage = 6
pageNumber = "{{ :page }}"
noGalleriesMessage = "No gallery found"
==
{% component 'galleriesList' %}
```

The next example shows the basic component usage with the category filter:

```
title = "Galleries Category"
url = "/galleries/category/:slug/:page?"

[galleriesList]
categoryFilter = "{{ :slug }}"
==
function onEnd()
{
    // Optional - set the page title to the category name
    if ($this->category)
        $this->page->title = $this->category->name;
}
==
{% if not category %}
    Category not found
{% else %}
    {{ category.name }}

    {% component 'galleriesList' %}
{% endif %}
```

The galleries and the pagination are coded in the default component partial `plugins/hounddd/lightgallery/components/galleries/default.htm`. If the default markup is not suitable for your website, feel free to copy it from the default partial and replace the {% component %} call in the example above with the partial contents.

### Gallery (by slug)

[](#gallery-by-slug)

Use the `gallerySlug` component to display a gallery on a page. The component has the following properties:

- **inline** - the display mode of the gallery.
- **noImagesMessage** - message to display in an empty gallery.
- **plugins** - the plugins used by lightGallery script.
- **preload** - the number of preload slides.
- **mode** - the ype of transition between images.
- **speed** - the transition duration (in ms).
- **loop** - the ability to loop back to the beginning of the gallery from the last slide.
- **pause** - the the time (in ms) between each auto transition.
- **counter** - whether to show total number of images and index number of currently displayed image.
- **controls** - whether or not to display the prev/next buttons.
- **download** - whether or not to display the download button.
- **escKey** - whether the LightGallery could be closed by pressing the "Esc" key.
- **prevHtml** - custom html for prev control.
- **nextHtml** - custom html for next control.
- **width** - the width of the thumbnails to be displayed in the gallery.
- **height** - the height of the thumbnails to be displayed in the gallery.
- **resizer** - how the image should be fitted to dimensions.
- categoryPage - path to the category page. The default value is galleries/category - it matches the pages/galleries/category.htm file in the theme directory. This property is used in the default component partial for creating links to the gallery images.

The gallerySlug component injects the following variables to the page where it's used:

- **gallery** - the gallery object loaded from the database. If the post is not found, the variable value is null.
- **noImagesMessage** - contains the value of the `noImagesMessage` component's property.

The next example shows the basic component usage on the gallery page:

```
title = "Display a gallery"
url = "/gallery/:slug"
layout = "default"
is_hidden = 1

[viewBag]
localeUrl[en] = "/galerie/:slug"
localeTitle[fr] = "Affiche une galerie"

[gallerySlug]
slug = "{{ :slug }}"
inline = "false"
noImagesMessage = "No images in this gallery"
plugins[] = "lgThumbnail"
plugins[] = "lgZoom"
preload = 2
mode = "lg-slide"
speed = 600
loop = "true"
pause = 5000
counter = "true"
controls = "true"
download = "true"
escKey = "true"
width = 300
height = 300
resizer = "auto"
==
{% component 'gallerySlug' %}
```

The gallery details are coded in the component partials wich are shared between `gallerySlug` component and `galleryId` page snippet.

- `plugins/hounddd/lightgallery/components/partials/gallery.htm` for thumbs view launching lightbox on click.
- `plugins/hounddd/lightgallery/components/partials/gallery_inline.htm` for inline lightbox view.

Blocks
------

[](#blocks)

This plugin provides a block compatible with the [Winter.blocks](https://github.com/wintercms/wn-blocks-plugin) plugin.

### Block `lightgallery_gallery`

[](#block-lightgallery_gallery)

This block provide a simple way to add an images gallery to your content.

PropertyTypeDescription`gallery`IntegerGallery ID to display`maxImages`IntegerNumber of images per gallery between 2, 4 or 6.
Default: `'4'`Notes
-----

[](#notes)

### 🔑 Licence key

[](#-licence-key)

If you want to use lightGallery to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. [Read more about the commercial license](https://www.lightgalleryjs.com/license/)

### 🏆 Credits

[](#-credits)

This plugin is inspired by [rjchauhan / RJGallery-for-OctoberCMS](https://github.com/rjchauhan/RJGallery-for-OctoberCMS) of which it can be a replacement\*. Besides the removal of jQuery from the dependencies, it brings some new features compared to the source plugin:

- Update to last stable version of LightGallery script (v2.4.0)
- Default image for galleries
- Use external CSS with class selectors
- Add real anchor link to large file
- Customisables "prev" and "next" buttons

\* It may have some breaking changes as the component Gallery doesn't exist anymore.

---

Make awesome sites with ❄ [WinterCMS](https://wintercms.com)!

###  Health Score

29

—

LowBetter than 57% of packages

Maintenance34

Infrequent updates — may be unmaintained

Popularity19

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~232 days

Total

3

Last Release

1072d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0b94bfda4c51f6f158b55a6726e01443fc9bbf1e5676f672f281a9e6e875e8be?d=identicon)[damsfx](/maintainers/damsfx)

---

Top Contributors

[![damsfx](https://avatars.githubusercontent.com/u/282242?v=4)](https://github.com/damsfx "damsfx (17 commits)")

---

Tags

galleryimageslightgallerypluginwintercmsplugingallerylightboxwinterwinter cmsgalleries

### Embed Badge

![Health badge](/badges/hounddd-wn-lightgallery-plugin/health.svg)

```
[![Health](https://phpackages.com/badges/hounddd-wn-lightgallery-plugin/health.svg)](https://phpackages.com/packages/hounddd-wn-lightgallery-plugin)
```

###  Alternatives

[helsingborg-stad/municipio

A bootstrap theme for creating municipality sites.

4028.3k10](/packages/helsingborg-stad-municipio)[winter/wn-blog-plugin

Blog plugin for Winter CMS

2045.2k3](/packages/winter-wn-blog-plugin)[winter/wn-sitemap-plugin

Sitemap plugin for Winter CMS

1047.1k1](/packages/winter-wn-sitemap-plugin)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)