Configure the layout and format of content and data presented to site visitors.

Views Lightbox - Views Vanilla JavaScript Lightbox (VVJL)

Views Vanilla JavaScript Lightbox (VVJL) Screenshot

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.

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.

Field Display Toggle

Enable all disable all buttons in manage display

For entities with numerous fields, manually dragging each field into the disabled section can be tedious, especially when configuring multiple view modes that require only a few fields to be visibl

CKEditor Responsive Table

CKEditor 5 responsive table insert dialog featuring fields for rows, columns, headers and optional caption

This module is a CKEditor 5 plugin that adds a table button with some accessibility improvements over the default CKE table button.

Views Carousel - Views Vanilla JavaScript 3D Carousel (VVJC)

Views Vanilla JavaScript 3D Carousel Screenshot

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.

Overview

The Views Vanilla JavaScript 3D Carousel module (machine name: vvjc) allows you to create dynamic, responsive, and visually striking 3D carousels for displaying content items on your Drupal site. Seamlessly integrated with the Views module, this module introduces a new display style that can be selected when creating or editing views. Built using pure vanilla JavaScript, the VVJC module avoids jQuery dependencies, ensuring a lightweight and modern user experience.

Features

  • No jQuery: By using vanilla JavaScript, the module ensures faster performance, reduced page load times, and no reliance on heavy external libraries. This makes it an ideal choice for modern, lightweight Drupal websites.
  • 3D Carousel Format: Renders content items in an interactive 3D carousel format for engaging and visually captivating displays.
  • Comprehensive Customization Options: Provides a variety of settings, including maximum width, screen heights for different devices, set the background color with opacity, and perspective depth to fine-tune the carousel’s appearance.
  • Responsive Design: Built-in breakpoints ensure the carousel adapts seamlessly to various screen sizes, offering a consistent experience across devices.
  • Play/Pause Functionality: Includes an automatic scrolling feature with a play/pause button, giving users control over the carousel's movement.
  • Customizable Intervals: Set the time interval for slide transitions, with options ranging from 3 to 15 seconds, or disable automatic transitions entirely to allow users full control.
  • Keyboard Navigation: Supports arrow keys and the space bar for intuitive slideshow navigation.
  • Touch and Swipe Support: Includes swipe gestures for seamless navigation on mobile devices.
  • Accessibility-Enhanced: Announces active slides to screen readers and includes ARIA attributes for improved accessibility.
  • Hover Pause: Automatically pauses the slideshow on hover and resumes on mouseout for better user interaction.
  • Unique ID Generation: To prevent conflicts and ensure consistency across different views, the module automatically generates a unique numeric ID for each slideshow instance.
  • Pause on Tab Switch: The carousel automatically pauses when the user switches to another browser tab, preserving content visibility when they return.
  • Reduced Motion Support: Respects the user's "prefers-reduced-motion" system setting to reduce animations for users who prefer less movement.

Basic Layouts

The basic Layouts module provides a handful of layouts as well as the ability to customize their settings through the Layout Builder Styles and Layout Builder Sections Config dependencies.

Pages

Subscribe with RSS Subscribe to RSS - Content display