Vegas Background jQuery Plugin

Vegas of the awesome Jay Salvat from the Coders in Black community, is one of the most used jQuery plugins to add beautiful fullscreen background images with slideshow-like transitions to your webpages, respecting the viewport and the image ratio with maths to keep up the fullsize effect without skewing and with supporting fades, overlays and many more. The vegas (Vegas Background jQuery Plugin) Drupal contrib module enables the user to use the jQuery plugin for their Drupal project via admin UI.

The Drupal module enables the user to upload images to be used as background images for the plugin and to setup transition settings like fade and time based on the original Vegas jQuery plugin settings. Additionally, the module provides context based appearance settings now like blocks do, from 7.x-beta / 8.x-dev up and higher.

Drupal 8

Drupal 8 is now end-of-life, with the last release (Drupal 8.9.20) published on November 17, 2021.

Drupal 9

Please join to help to make Vegas awesome for Drupal 9/10! The Drupal 9 version is under heavy development and a dev snapshot available. But since Media is in D8 core now (Yay!), there is a heavy rethinging in progress. Please chime in to help in the port tracker issues and discussions listed below.

Dependencies

• As of now, the Drupal Libraries API module is required for the Drupal 7 version of the vegas module. For the Drupal 8/9 version the Drupal Core library API already handels it and no additional contrib Libraries API module is required.
• Drupal core Media dependency is planned for upcoming D9 version.
• Composer support for the vegas library check in D9 is under consideration but Composer is not mandatory to install the module. If you want to use Drush and/or Composer you can already use drush vegas to automate installing the vegas jquery plugin from terminal to ./libraries in 8.x and 7.x-dev and next 7.x release now and you can run composer require drupal/vegas or drush dl vegas already to install the module itself.
• The Vegas jQuery plugin.
• Recommended for Drupal 7: An additional Drupal contrib module like jquery_update or similar to have an up-to-date JQuery support in Core.

Installation for Drupal 7

1. Install the Drupal vegas module by using one of the common Drupal 7 ways to install a module.
2. Download and extract the original jQuery plugin from the original authors Vegas repositories to sites/all/libraries/vegas. Create the libraries folder if it does not exist yet.
3. Configure Vegas in the Drupal admin UI at admin/appearance/vegas.

Installation for Drupal 8 (no longer supported)

1. Install the Drupal vegas module by using one of the common Drupal 8 ways to install a module.
2. Download and extract the original jQuery plugin from the original authors Vegas repositories to libraries/vegas or web/libraries folder, if you have installed Drupal via composer project management and have the modules and themes folder in web/. Create the libraries folder if it does not exist yet. Alternatively you can use drush vegas to install the library via command line.
3. Or you can combine all previous steps by using the command line with composer and drush like composer require 'drupal/vegas:1.x-dev' 'drupal/libraries' && drush vegas && drush en vegas -y
4. Configure Vegas in the Drupal admin UI at admin/config/media/vegas.

Installation + first test | development version Drupal 9

1. Install the Drupal vegas module by using one of the common Drupal 8 ways to install a module
2. Download and extract the original jQuery plugin from the original authors Vegas repositories to libraries/vegas or web/libraries/vegas folder. Create the libraries folder if it does not exist yet.
3. Add some images ([your-site]/media/add/image)
4. Add a Vegas Configuration ([your-site]/admin/structure/vegas_config)
5. Configure Vegas and reference images in your newly created Vegas configuration
6. Specify the path on which page the Vegas slideshow should run
7. Clear cache
8. Visit the path you have defined

Some things you need to check...

The jQuery vegas plugin module works on EVERY theme, except themes with additional full page container HTML elements having background-color or background-image applied overriding the vegas backgrounds below, which is IMHO bad practise, since full screen background should be applied to body tag, not to any nested HTML element. Drupal 7 its default theme "Bartik" for example uses an additional <div id="page"></div> and <div class="page-wrapper"></div> overriding body visibility and jQuery Vegas plugin modules background div with colored background. Make sure you set the required HTML elements background to transparent to make the vegas background images visible.

If the jQuery Vegas plugin library has been installed manually, make sure you have downloaded the latest and extracted the ./dist folder from its folder tree into your ./libraries folder and renamed it from dist to vegas. Your ./libraries path to vegas should finally be now: ./libaries/vegas/vegas.js to make the vegas module find the required jQuery vegas plugin.