Juicebox HTML5 Responsive Image Galleries

By KF Cheng on Sat, 07/25/2020 - 00:27
Drupal Versions
D7
D8
For Installation
Official Link to Module
https://www.drupal.org/project/juicebox
Links for Dependencies
Module: Libraries API
Juicebox Javascript library
General

Provide a Juicebox effect on images in HTML5 responsive gallery library.  It can be applied to content type display, or in views.  This is provided by juicebox.net and free tier availabcontle for use.

 

  1. Install the Juicebox module
  2. Install the required modules:
  3. Install the juicebox javascript library.  The Juicebox Lite version is free.  Other chargeable Pro versions available.
    • Retrieve only the folder jbcore under web folder and place under /libraries
  4. Enable the Juicebox module
  5. Check system status @ /admin/reports/status to make sure the modules and libraries are installed correctly without errors

Configuration is available @ /admin/config/media/juicebox

  • Default setting is fine: Option 'Filter all title ...' is enabled

 

For Content Type Display

  1. In the Manage Display tab of each content type, image fields formats can be configured as Juicebox Gallery
    • More settings available.

For Views

  1. After installation, a Juicebox Gallery format is available in Views.  Follow the screen and make appropriate settings accordingly.
Juicebox.net
OSTraining: Create a Juicebox Image Gallery in Drupal

Installation of the juicebox javascript library is a bit tricky.  Refer to the Installation section for details.

Juicebox gallery display of images

Juicebox gallery display of images

Configure content types
Choose Juicebox Gallery as the image field format
More detailed settings for each Juicebox Gallery
Configuration of Juicebox Gallery @ administration > configuration > media
Configuration of Juicebox Gallery in Views as display format settings
Recommendation
Based on Need