This module integrates Slick Lightbox functionality with Drupal, allowing images to be displayed in a lightbox view when clicked. It provides options for configuring image fields and Blazy filters to enable this feature, and it leverages the Blazy and Slick modules for its core features.
Slick within a lightbox.
Requirements
- Slick Lightbox library:
- Download Slick Lightbox archive from Slick lightbox
- Extract it as is, rename slick-lightbox-master to slick-lightbox, so the asset is available at:
/sites/../libraries/slick-lightbox/dist/slick-lightbox.min.js
/sites/../libraries/slick-lightbox/dist/slick-lightbox.css
Remove "/sites/.." for D8.
- D8+:
Slick >= 2.x with Blazy >= 2.x
D7:
Slick 7.x-3.x with Blazy 7.x-1.x
Installation
Install the module as usual, more info can be found on:
Drupal 7
Drupal 8
Usage / Configuration
Enable this module and its dependency, core image, Blazy, and Slick modules.
Field formatters
- Visit /admin/config/people/accounts/fields, or /admin/structure/types, or any fieldable entity, click Manage display.
- Under Format, choose blazy-related formatters: Blazy, Slick Carousel for image field.
- Click the Configure icon.
- Under Media switcher, choose Image to Slick lightbox. Adjust the rest.
Blazy filter
- Visit /admin/config/content/formats/full_html, etc.
- Enable Blazy Filter.
- Under Media switcher, choose Image to Slick Lightbox.
Features
- Has no formatter, instead integrated into Media switcher option as seen at Blazy/ Slick formatters, including Blazy Views fields for File Entity and Media, and also Blazy Filter for inline images.
Slick Lightbox optionset
We only have one optionset for the Slick Lightbox globally, override it accordingly:
/admin/config/media/slick/list/slick_lightbox/edit
Limitation
Has no skins, yet. Patches or contributions are very much welcome to improve the first looks like what Colorbox has OOTB.
Good at CSS? We welcome your contributions to make this Slick Lightbox slick, even if you don't patch, contributing just a CSS attachment is very much welcome. We can provide UI options later once we have some skins.
Thanks!
Known Issue
https://git.drupalcode.org/project/slick_lightbox/tree/7.x-3.x#known-issues
There is a weird character at the beginning of slick-lightbox.css file:
.slick-lightbox{....}
Note the "" characters.
This only appears when aggregation is enabled, and causes its styling broken.
Temp solution: delete the dot before slick-lightbox with a backspace. And
put your own dot back there. It is weird as nothing in there, but it solves it.
This only happens at D7 at Linux box, not D8. Assumes NOT the library issue,
but not sure whether it is D7 aggregation issue, either.