I’ve been building websites for the last 10 years. Design fads come and go but image galleries have stood the test of time and every client I’ve had has asked for one.
There are a lot of image gallery libraries out there, but today I want to show you how to use Juicebox.
Juicebox is an HTML5 responsive image gallery and it integrates with Drupal using the Juicebox module.
Juicebox is not open source, instead it offers a free version which is fully useable but you are limited to 50 images per gallery. The pro version allows for unlimited images and more features.
If you’re looking for an alternative solution look at Slick, which is open source, and it integrates with Drupal via the Slick module. I will cover this module in a future tutorial.
In this tutorial, you’ll learn how to display an image gallery from an image field and how to display a gallery using Views.
Getting Started
First, go download and install Juicebox and Libraries API module.
Using Drush:
$ drush dl juicebox libraries $ drush en juicebox
Download Juicebox Library
Go to the Juicebox download page and download the free version.
Extract the downloaded file and copy the jbcore folder within the zip file into /libraries and rename the jbcore directory to juicebox.
Once everything has been copied and renamed, the path to juicebox.js should be /libraries/juicebox/juicebox.js.
At the time of this writing, you’ll need to download the dev release of Libraries API (8.x-3.x-dev).
Create a Gallery Using Fields
We’ll first look at how to create a gallery using just an image field. To do this, we’ll create an image field called “Image gallery” and this field will be used to store the images.
1. Go to Structure, “Content types” and click on “Manage fields” on the Article row.
2. Click on “Add field” and select Image from “Add a new field”.
3. Enter “Image gallery” into Label and click on “Save and continue”.
4. Change “Allowed number of values” to Unlimited and click on “Save field settings”.
You’ll need to do this if you want to store multiple images.
5. On the Edit page leave it as is and click on “Save settings”.
Configure Juicebox Gallery Formatter
Now that we’ve created the image fields, let’s configure the actual Juicebox gallery through the field formatter.
1. Click “Manage display”, and select “Juicebox Gallery” from the Format drop-down on the “Image gallery” field.
2. Click on the cogwheel to configure the gallery. Now there a lot of options but the only change we’ll make is to set the image alt text as the caption.
3. Click on the “Lite config” field-set and change the height to 500px.
4. Reorder the field so it’s below Body.
5. Click on Save at the bottom of the page.
Now if you go and create a test article and add images into the gallery you should see them below the Body field.
Create a Gallery Using Views
You’ve seen how to create a gallery using just the Juicebox gallery formatter, let’s now look at using Views to create a gallery.
We’ll create a single gallery that’ll use the first image of every gallery on the Article content type.
Update: There’s currently an issue with Views and Juicebox where it’ll only show the first image from a multi-value field. For more details go to this issue on drupal.org.
1. Go to Structure, Views and click on “Add view”.
2. Fill in the “Add new view” form with the values defined in Table 1-0.
Table 1-0. Create a new view
| Option | Value |
|---|---|
| View name | Article gallery |
| Machine name | article_gallery |
| Show | Content type of Article sorted by Newest first |
| Create a page | Unchecked |
| Create a block | Unchecked |
3. Click on Add in the Fields section.
4. Search for the “Image gallery” field and add it to the view.
5. Change the Format from “Unformatted list” to “Juicebox Gallery” and click on Apply.
6. On the “Page: Style options” select the image field in “Image Source” and “Thumbnail Source”. The one you added to the View earlier.
You can configure the look and feel by expanding the “Lite config” field-set. You can change the width and height, text color and more.
7. Click on Apply.
8.Click on Add next to Master and select Page from the drop-down.
9. Make sure you set a path in the “Page settings” section. Add something like /gallery.
10. Do not forget to save the View by clicking on Save.
11. Make sure you have some test articles and go to /gallery. You should see a gallery made up of the first image from each gallery.
Summary
The reason I like Juicebox in Drupal is because it’s easy to set up. With little effort you can get a nice responsive image gallery from a field or a view. The only downside I can see is that it’s not open source.
FAQ
Q: I get the following error message: “The Juicebox Javascript library does not appear to be installed. Please download and install the most recent version of the Juicebox library.”
This means Drupal can’t detect the Juicebox library in the /libraries directory. Refer to the “Getting started” section.
Q: I created a gallery using Views but it’s only displaying the first image. I want it to display all the images from a multi-value field.
This is a known issue with Views and Juicebox.
Q: I can’t see a Drupal 8 release of Libraries API?
Until they release an alpha or beta, you’ll need to download the dev release (8.x-3.x-dev).
Thanks Ivan. Very helpful. I have two questions. Hope you can sort them out for me. Thanks in advance
1. I created a content type for images and made it accept multiple values. When I created a view of the content type I see only the first image on the juice box gallery. How can I get all the images to appear in the gallery?
2. How can I get the image to be linked to the original node when clicked?
Hi Lakshan,
1. I created a content type for images and made it accept multiple values. When I created a view of the content type I see only the first image on the juice box gallery. How can I get all the images to appear in the gallery?
I’m aware it’ll only show the first image. Not sure how to display them all.
2. How can I get the image to be linked to the original node when clicked?
I don’t think you can do this out-of-the-box. You could do it by overriding a template and writing a bit of code.
Cheers,
Ivan
Like always really good explained and actually i never used juicebox because i thought its for buying only didn t know there is a free version and i will give it a try. I buy things too but only after i know i really need them. Thanks for this great useful tutorial. Susanne
Hi Susanne,
Thanks.
Give the free version a go and see if you like it.
Cheers,
Ivan
Greetings,
I tried to follow your instructions to install Juicebox in drupal 8.2.6.
As suggested I installed ‘Libraries’ first and then ‘Juicebox’.
The Libraries API 8.x-3.x-dev installs, creates a folder under/sites/default/files/library-definitions, where /juicebox/juicebox.js should go. See your hint: ‘Once everything has been copied and renamed, the path to juicebox.js should be /libraries/juicebox/juicebox.js.’ However, did all this, and get ‘ The Juicebox library could not be found.. Only later I learned reading the doc for the Library API: This module is currently being ported to Drupal 8, but is not usable yet. Help us by following this issue.
Do you have a solution for drupal 8?
Thanks, Roman
Hi Roman,
UPDATE: April 30th 2017
Libraries API is required to use the Juicebox module. Sorry about the confusion.
Tutorial has been updated.
You do not need Libraries API to set this up. Drupal 8 has it’s own libraries system.If you’re using Juicebox in Drupal 7 then you’ll need Libraries API but not for Drupal 8.Cheers,
Ivan
Further to my previous mail: the article in ‘drupal newsletter’ : How to create Responsive Image Galleries Using drupal 8′ is misleading. I lost a lot of time, before discovering the reason.
If I a wrong, I like to be corrected.
Hi Roman,
How to create Responsive Image Galleries Using drupal 8′ is misleading. I lost a lot of time, before discovering the reason.
What do you mean by this? What’s the reason? Are you having a problem?
Cheers,
Ivan
Hi, i have problem with thumnail in views, only first image shows as thumbnail and all images in multifiled treated with same thumbnail image
Hi Sirajudheen,
I’m aware it’ll only show the first image. Not sure how to display them all.
Cheers,
Ivan
Here’s a link to the issue, https://www.drupal.org/node/2718185#comment-11157231
Great write-up Ivan.
There’s one question that I would like your views on. Which one of these do you think is more useful. Colourbox or Juicebox??
Hi Hamza,
Never really used Colorbox on a Drupal site. So I can’t help you there.
Cheers,
Ivan
In your instructions, you say to create an Image Field in the Article type for the Juicebox images. Why can’t you use the Image field that is already there (Drupal 7) which also means you will not be able to name a new field Image.
Hi Nancy,
I use the Image field for uploading a feature image.
But there’s no hard or fast rule.
Cheers,
Ivan
Hi Ivan,
Having trouble getting this installed .. as per Roman’s comments I came to this through all the threads saying that juicebox required the API which was not yet ported to Drup8 so I was surprised to find this tutorial. Downloaded the module and juicebox, manually created the libraries directory as indicated and renamed so I have /libraries/juicebox/juicebox.js
Drupal will not install the module : Version: 8.x-2.0-beta3
Requires: File, Field, Image, Libraries (missing)
Running 8.3.1 cleared caches, etc. /libraries is off of the root .. am I missing something?
Hi Bluewater,
Having trouble getting this installed .. as per Roman’s comments I came to this through all the threads saying that juicebox required the API which was not yet ported to Drup8 so I was surprised to find this tutorial.
When you say “the API”, I assume you’re referring to Libraries API?
Yes, Libraries API is required. I got this wrong (sorry) in the comment you mentioned. I’ve updated the tutorial.
which was not yet ported to Drup8 so I was surprised to find this tutorial.
It has been ported across. (https://www.drupal.org/node/2605194) There’s just no alpha or beta release. You’ll need to use the 8.x-3.x-dev release.
Any luck with Drupal 8.4.4 and Juicebox? I’ve got the latest dev versions of Juicebox and Libraries API installed. I’ve got Juicebox Pro, so all that lives in /libraries/juicebox/juicebox.js. I get a blank section of page where the gallery should appear. Any suggestions?
Hi Tony,
I’ve never used the pro version of Juicebox. Are you getting any errors? Php or JavaScript?
Cheers,
Ivan
Regards Iván, I know that your Juicebox tutorial in Drupal 8 is old. I hope you can still help me, I did all the steps and I had no problems, I just have a problem that has come up in all the tutorials I have seen, that of loading several images at the same time and I don’t know what else to do with it. Can you help me to see if the Juicebox works well, because all the videos that I follow make it work in Drupal 7 and I want to work it in 8 as you did. I can’t get the result of your point number 11. Greetings !!
Hi Carlos,
I had a look at the module it doesn’t look like it’s maintained anymore. I haven’t used it since writing this tutorial.
Have a look at the slick module instead, https://www.drupal.org/project/slick
Cheers,
Ivan