Views Lightbox - Views Vanilla JavaScript Lightbox (VVJL)

The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to enhance the visual and interactive experience of Drupal Views using pure, lightweight Vanilla JavaScript. Originally developed as Paragraphs Bundles, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

Additionally, I have created a demo for each module: Accordion Demo, 3D Carousel Demo, Carousel Demo, 3D FlipBox Demo, Hero Demo, Lightbox Demo, Parallax Demo, Reveal Demo, Slideshow Demo, and Tabs Demo.
To get started, check out our Video Demo for a step-by-step guide on using the module effectively. Explore our mixed demos here: Live Demo One | Live Demo Two. The site for the live demo is built with the Solo Theme.

VVJ v2.x requires VVJ Core (composer require drupal/vvjl:^2.0 pulls it in automatically). Requires Drupal 11.3+ or 12 and PHP 8.3+. v2 runs front-end behavior in custom elements via the shared vvj_core foundation; token and JavaScript API details below reflect v2.

Overview

The Views Vanilla JavaScript Lightbox module (machine name: vvjl) allows you to create stunning and responsive lightbox displays for various content items on your Drupal site. This module integrates seamlessly with the Views module, providing a new display style that can be selected when creating or editing views. It utilizes pure vanilla JavaScript, eliminating the need for jQuery, to ensure a modern and efficient user experience.

Features

• Lightbox Format: Renders content items in a lightbox format, enhancing the visual presentation of your content.
• Customizable Options: Offers settings for grid image width, gap between images, overlay color, and opacity, with the option to disable the overlay entirely.
• Responsive Design: Ensures that the lightbox adapts seamlessly to different screen sizes for optimal viewing on all devices.
• Animation Options: Provides various animation styles for transitions between images, such as top, bottom, left, right, and zoom animations.

Accessibility

The Views Vanilla JavaScript Lightbox module includes several accessibility features to ensure that your lightbox is usable by all visitors, including those using screen readers. Features include:

• ARIA Roles and Properties: Proper ARIA roles and properties are used to provide context and state information to screen readers.
• Keyboard Navigation: Users can navigate through lightbox items using keyboard shortcuts, ensuring full functionality without a mouse.
• Focus Management: Ensures that the currently displayed item is focused, providing a better experience for keyboard and screen reader users.

Configuration

After installing and enabling the module, you can configure it through the Views UI:

1. Grid Image Width: Set the width of the grid images (e.g., 100px, 200px, etc.).
2. Grid Image Gap: Define the gap between grid images in pixels (e.g., 10px, 20px, etc.).
3. Overlay Color: Choose a color for the lightbox background overlay.
4. Overlay Opacity: Adjust the opacity of the overlay (from 0.0 to 1.0).
5. Disable Overlay: Option to disable the overlay color completely.
6. Animation Type: Select the type of animation for transitions between images (e.g., Top, Bottom, Left, Right, Zoom).

Custom Token for views header/footer from first row

In Views header/footer, if you add a field using Global: Text area or Global: Unfiltered text, there is an option called "Use replacement tokens from the first row."
The default tokens will not work in this case. Please use the custom tokens created by VVJL instead.
For example:

• The default token {{ title }} should be replaced with [vvjl:title].
• The default token {{ field_image }} should be replaced with [vvjl:field_image].

You can append :plain to the token to strip any HTML.

Example: [vvjl:title:plain]

Note: The [vvjl:*] tokens pull data directly from the rendered View fields.
Fields using complex rewrites (e.g., Global: Custom text with {{ tokens }}) are not supported by default for token replacement. Please use individual field tokens like [vvjl:title], [vvjl:field_image], etc.

v2 note: Token resolution is handled by the shared vvj_core.token_resolver service; the [vvjl:field] and [vvjl:field:plain] syntax is unchanged from v1.

Example Usage

1. Install and enable the Views Vanilla JavaScript Lightbox module.
2. Create or edit a view in the Views module.
3. In the Format section, select Lightbox from the available display styles.
4. Configure the various options available under the Format Settings to customize the lightbox according to your needs.

Additional Information

• Dependencies: This module does not have any dependencies on other contributed modules.

Installation

1. Download and install the VVJL module from Drupal.org:
   

   composer require drupal/vvjl

2. Enable the module through the Drupal admin interface or using Drush:
   

   drush en vvjl

3. Clear caches to ensure the new plugin is available:
   

   drush cr

Support and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue in the module's issue queue. Contributions are welcome and appreciated!

Lightbox - Developer & Site Builder Tips:

• Every view created with this plugin has a CSS class vvj-lightbox placed alongside js-view-dom-id.
• The first field should be an image and should not be clickable. If this is forgotten, the module includes a fallback to disable any links. Only one image can be used for the lightbox, but all links are active in the modal.
• All remaining fields will be positioned at the bottom of the image.
• To target the fields inside the grid, use .vvjl-inner > .lightbox-row .lightbox-image. To target the fields inside the modal when it is opened, use .vvjl-inner > .lightbox-modal .lightbox-image.
• A CSS class is added to the number of items: grid-count-THE-NUMBER-OF-ITEMS.
• All buttons are SVG; to change the color, just target the SVG fill.

Module Limitation Notice: Grouping Field Feature

Please note that the current version of this module does not support the
Grouping Field feature available in Drupal Views. The
"Grouping Field" option allows you to group records by a specified field,
but this functionality is not compatible with the module's current implementation.

We recommend avoiding the use of this feature with this module to ensure
proper functionality and display of your Views.

Support and maintenance

Questions, ideas, and bug reports are welcome. Please use this project’s issue queue so discussions and solutions remain available to the Drupal community.

Maintainers monitor issues, but response times depend on availability.

Developed and maintained by Alaa Haddad of Flash Web Center, LLC.

AI disclosure: AI tools assisted with drafting and reviewing this project description. The maintainer verified the final content against the project source.