Create Responsive Image Galleries in Drupal 7 with Juicebox

/ By / 4 minutes of reading / 102 Comments

Most websites these days have some sort of image gallery functionality. With the rise of mobile and tablet devices, it’s important to make sure that image galleries are responsive. There’s nothing more painful than trying to press the tiny next button when viewing a non-responsive image gallery on a mobile device.

Juicebox is a JavaScript library that allows you to create HTML5 responsive image galleries on your website. However, it is important to note that Juicebox is not open source. The library is available in two versions: the free Lite version and the fully-featured Pro version.

The Juicebox module for Drupal integrates Juicebox easily into Drupal. A Gallery can be implemented using a field formatter or by using Views.

In this tutorial, we’ll create an image gallery from a field formatter and a gallery using the Views module.

Getting Started

Download and install Juicebox, Libraries API and Views.

If you prefer Drush, run the following command:

$ drush dl juicebox libraries views ctools

Download Juicebox Library

Go to the Juicebox download page and download the Lite version.

Extract the downloaded file somewhere onto your file-system and copy the jbcore folder within the zip file into sites/all/libraries and rename the jbcore directory to juicebox.

Once everything has been copied and renamed the path to juicebox.js should be sites/all/libraries/juicebox/juicebox.js.

Configure Formatter Gallery

In this section, we’ll create a gallery using just the Image field formatter on the Article content type. But before we begin we’ll need to make a single change to the field.

If you’re following along with this tutorial, just install Drupal using the standard installation profile.

1. Go to Structure -> “Content types” and click on the “manage field” link for the Article content type (admin/structure/types/manage/article/fields).

2. Click on the edit link for the Image field.

3. Check the “Enable Title field” checkbox and select “Unlimited” from the “Numbers of values” drop-down list.

Fig 1.0

4. Scroll down and click on “Save settings”.

It is important that you enable the Alt and Title field on the Image field because they’ll be used as the image title and caption within a gallery.

Now we’ll need to enable the “Juicebox gallery” formatter on the image field.

1. Go to Structure -> “Content types” and click on the “manage display”.

2. Select “Juicebox gallery” from the Format drop-down list and click on Save.

Fig 1.1

The default format settings are pretty good. However, you can adjust the width and height, and resize the main and thumbnail images by using a custom image style. For this tutorial, we’ll change the “Gallery Height” to 60%.

Fig 1.2

Now, go and create an article and upload some images.

Fig 1.3

Once an article has been created, you should see the images within a gallery.

Fig 1.4

Create Gallery View

In the last section, we configured the Image field formatter to be displayed as a gallery. Now, we’ll create a gallery using Views. The benefit of using Views is that you can display a bunch of article images as a single gallery.

1. Go to Structure -> Views (admin/structure/views) and click on the “Add new view” link.

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 Juicebox
Machine name juicebox
Show Content (default)
Of Type Article
Create a page Checked
Page title Juicebox
Path juicebox
Display format Juicebox Gallery
Items to display 0
Use a pager Uncheck

Fig 1.5

3. Add the Image field to the view.

Fig 1.6

4. While you’re still in the configure field section for the Image field, uncheck the “Display all values in the same row” checkbox within the “Multiple field settings” field-set.

Fig 1.7

If you do not uncheck this option, then only a single image for each article will appear.

5. Click on the Settings link for the “Juicebox Gallery” and change the “Gallery Height” to 60%.

Fig 1.8

6. Save the view and go to /juicebox.

You should see an image gallery full of images that have been uploaded into articles.

Fig 1.9

And finally, the same gallery but on a mobile device.

Fig 1.10

If you have any questions, please leave a comment.

Closing comments as this tutorial is pretty old. If you have a question try the Juicebox issue queue.

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

102 thoughts on “Create Responsive Image Galleries in Drupal 7 with Juicebox”

  2. gangadhara u

    Call to undefined function libraries_load() in C:xampphtdocsdemositesallmodulesjuiceboxjuicebox.module on line 478

      1. Tezza

        This may be relevant, I’m not sure, but I hit the same error until I upgraded my Libraries API to 7.x-2.x. I’ve now hit another problem (Juicebox Error: Cannot find div with id: …) but ran out of time to debug it last night. Will dig further later, and will try to establish if upgrading Libraries was also a necessary requirement.

  7. Gregor

    Another great tutorial – really glad that I’ve run into your site. Pa i slike su super.
    Pozdrav iz Ljubljane

  8. Heiko Helmbrecht

    The “Cannot find div” problem disappears if you set the search settings to clean

    1. Nadeeka

      what is the mean of “search settings to clean” how to do this

      Juicebox Error: Cannot find div with id:

      1. ivan

        Can you give me details on how to replicate the “Juicebox Error: Cannot find div with id:” error?

        1. Wasil Konnas

          Juicebox Error: Cannot find div with id: “xxxxxxxxx-?q=juicebox-xml-view-juicebox-page”

      1. Jaime Morales

        The module have a issue with the developer theme and my case was the ZEN Theme´s Rebuild theme registry on every page. If you check this option the issue is the same.

        Thanks, and excuse my English! =)

    2. Kien An

      Hi !
      i had error same it , how to fixed it ! can you help me fixed error”Juicebox Error :Config XML file not found”

  10. Int

    Thank you so much for writing this tutorial. Digging for the stuff that is related to responsive design is so hard and your tutorial was very helpful.

  11. Tom

    Hi there,

    First of, thanks for this great tutorial. It worked like a charm, when I created a content type and followed the first part of your tutorial.

    However… when I created the View, I ran into some error messages, which result in the images not being shown in the View gallery. All I see is the loading-wheel trying to load the images, and then the error message which says the following:

    Notice: Undefined index: width in theme_juicebox_embed_markup() (line 25 of /Applications/MAMP/htdocs/dots-creation/sites/all/modules/juicebox/themes/juicebox.theme.inc).
    Notice: Undefined index: height in theme_juicebox_embed_markup() (line 26 of /Applications/MAMP/htdocs/dots-creation/sites/all/modules/juicebox/themes/juicebox.theme.inc).

    Wondering if anyone might be able to help me out on this one?

    1. ivan

      In the view, try submitting the “Page: Style Option” form where you can configure the width and height.

      What I think is happening is that the default settings are not being set. Just save the form and see if that fixes the issues.

  12. Lisa

    I follow step by step this tutorial and I don’t understand why I can’t see “juicebox gallery” on the image field when I am in Structure -> “Content types”->”manage display” : It doesn’t appear in the format drop-down list… Can you help me please ?

    1. ivan

      First and foremost, make sure the module is installed. Also, the “juicebox gallery” formatter will only appear in the drop-down on image fields.

      If you’re still having trouble, test the module on a fresh Drupal 7 site.

      1. Piet Rietveld

        I installed a fresh Drupal 7.22 site. I followed the instructions but whateven I do in format “Juicebox Gallery” doesn’t show up. ns yes I installed Libraries API and yes I copied the juicebox to the libraries directory. In your reaction you stated “make sure the module is installed”. Do you refer to the Juicebox-module? If so how do you install the Juicebox-module? I am using Wamp on a Windows 7 PC.

          1. Piet Rietveld

            Thank you for the quick response. My mistake; I didn’t realize that I had to install a separate Drupal module. I installed it and now I was able to get the galery working. The problem I have now is that I don’t see the actule images (where the image should be it is black) while it displays the correct number of images and also the correct number of thumbnails. Any idea?

    1. ivan

      Are you receiving JavaScript or PHP errors?

      Have you configured the JuiceBox formatter on the right view mode? For example, if you have modified the “full content” view mode, then you must setup the formatter on that view mode and not the default view mode.

      Sorry, but I need a lot more information than just “juicebox is not working”.

  14. Maya

    Thank you for a good description of this workflow.
    I actually want to have not just one gallery showing all the images on my site but several galleries, for example, one with a series of photo’s from a daylong activity, another with a series of photo’s of another event.
    What would be the trick for this?

    1. ivan

      Yes you can have multiple galleries. It all comes down to how your content types are organised.

      The views plugin for juicebox simply turns a list of images into a gallery.

      For example, you could create a content type called “gallery” and attach images to a “gallery” content via a image field. But it really comes down to how your data is organised.

  15. ibrahim

    hi, i don’t understand what is the difference about juicebox and gallery formatter. i think two of them are same. and i think gallery formatter is easier than juicebox. but they are same.

    could you say about juicebox which properties better than gallery formatter.
    thanks,

    1. ivan

      First, correct me if I’m wrong but I don’t think Gallery formatter supports Juicebox. Juicebox is a 3rd part gallery library that has nothing to do with Drupal.

      Second, Gallery formatter implements a gallery using just a field formatter (let me know if I’m wrong).
      You can implement galleries using Juicebox via a field formatter as well as using the Views module.

      Third, if you find Gallery formatter easier to use, then use that module. In Drupal, things can be built in multiple ways. 🙂

      1. ibrahim

        thanks for reply ivan. ” In Drupal, things can be built in multiple ways” is absolutely correct. i can not choose which gallery module to use. because there are lots of and i search which is the best. so far i could not this question’s answer.

        by the way could you say about juicebox video support?
        thanks again.

  16. Peter

    Hi

    I can’t see the Image content type after enabling the Juicebox module, I have the libraries files. Is there something that triggers seeing this? I have the latest Drupal / Library / Views

    1. ivan

      There is no “Image content type”. All we’re using for the gallery is the Image field on the Article content type.

    1. ivan

      First of all, the URL to the image looks wrong. It simply points to the “/public” folder, there’s no reference to a file within it.

      Looks like images are not being added to the gallery. This can happen because of a few reasons; the View wasn’t setup properly or images were not uploaded.

    3. Peter

      I get a rotating hexagon when the page loads up. Is there way to debug and find out more about what its trying to do because I can’t get images to show at the moment

    1. ivan

      I had a look at the Views URL, the gallery is loading but I got “Failed to load resource: the server responded with a status of 403 (Forbidden)” errors when the browser tried to load the images.

      The 403 error looks like a server side issue.

  20. David Aubrey

    can you show me how to access the views url to duplicate that error?

    I cant see it anywhere

    1. ivan

      I can see the errors using the Developer tools in Chrome or by using Firebug in Firefox.

      Here are the errors:


      Failed to load resource: the server responded with a status of 403 (Forbidden) http://www.robpage.ca/?q=sites/default/files/styles/large/public/field/image/_DSC5576.JPG&itok=FOq3LlQ6
      Failed to load resource: the server responded with a status of 403 (Forbidden) http://www.robpage.ca/?q=sites/default/files/styles/large/public/field/image/_DSC5596.JPG&itok=7dRAnmpI

  21. David Aubrey

    Hi Ivan,

    First – Thank you very much or your help. I was able to identify that some of the images did not have execute permissions and was able to add them in order to show them on the views page.

    Now the issue I am having is that in the node it displays correctly but within views, the slide image seems defaulted to thumbnail size. (link below)

    http://www.robpage.ca/?q=InternalGallery

    When I expand to full screen it work correctly but I currently have it set to show the original image for the slide and the thumbnail image for the thumbnail.

    -Dave

  23. Tom

    Hi Ivan,
    I use the Juicebox field formatter (nodes/entities are galleries) to show galleries, I follows the instructions https://drupal.org/node/2000300 .

    But after I created a node, there is only an white empty area, no gallery shown.
    I think there is a placehoder for gallery (but it is a white box) in my page. The page is http://lab.wjguoji.com/node/59
    I have check systems status report ,it shows Juicebox Javascript Library Lite 1.3.2 .

    Any ideas? Thanks.

    1. ivan

      I’m not sure why it’s not working. Check for PHP errors or JavaScript errors. Also, setup a fresh Drupal 7 site (for testing) using the standard theme and try setting up Juicebox.

      If it works on a fresh Drupal 7 site, then there could be an issue in how your current site is setup.

      1. Tom

        Hi Ivan,

        I make a mistake, I only copied the juicebox.js to sites/all/libraries/juicebox , I missed other files and folders. That is the key problem.

        It works!
        Realy very nice!

        Thanks, Ivan.

        Best regards,
        Tom

  25. Hasnaa

    Hello thanks for th tutorial, it was very clear; when I display image gallery, only the miniature are displayed, And they are not resizable, thank you for help.

    1. ivan

      Sorry but I need a lot more information about the problem than just “And they are not resizable”. 😉

      So this is how I would investigate the problem:

      1. Check for JavaScript errors.
      2. Check for PHP errors, go to Reports, “Recent log messages” to see if there are any.
      3. Go to the Juicebox project page and search the issue queue (https://drupal.org/project/issues/juicebox), see if other people have reported this issue.

      Hope this helps.

  26. Naod

    I usually find your tutorials to be simple to understand and easy to implement. Keep it up!

  27. harikris

    i’m using juice box module in my drupal 7 website.i’m using the theme mobile_jquery.

    its working on normal theme for desktop and not loading the gallery page for mobile devices.

    when i checked the js error i found the following one.

    Error: ReferenceError: juicebox is not defined
    Source File: http://code.jquery.com/jquery-1.6.4.min.js?mqsmlr Line: 3

    what is the issue with this jquery file?
    http://w3qatar.info/aldarmobi/properties
    Please click any property and you can see the page will not go to next page…and you can check the JS error in this page.

    Please help me…

    1. ivan

      “Error: ReferenceError: juicebox is not defined” means some JavaScript files for Juicebox are not being loaded into the theme.

      I have never used mobile_jquery with juicebox so I don’t know how well they work together. I think the mobile_jquery theme is doing something to the JavaScript files, I would start my investigation there.

  28. Zach

    I followed your tutorial it was very helpful, thank you. I was wondering what would cause the images in an Article(like the first half of you tutorial) to just be rendered like normal images even when their display is set to “Juicebox Gallery”.

    1. ivan

      Look through the comments on this tutorial, some users may have experienced a similar issue.

      See if you’re getting JavaScript or PHP errors when viewing the gallery. Also, search the Juicebox issue queue and see if other users have raised similar issues.

  29. andrea

    I follow your instruction an was ok, but when I create a article I see all the image all togher in vertical structure.
    I try to do it again but it the same, any idea about my error?
    thank you very much
    andrea

    1. ivan

      It looks like the Juicebox JavaScript library is not getting loaded onto the page. You’ll have to double check and make sure that you have downloaded Juicebox and that it’s being added to the page.

  31. Tim

    Is there anyway integrate this solution with colorbox so that when you click, the image it opens up in its original size in a light box.

  32. pRoseDC

    In Drupal 7 I am using “Nice Menus” module and “Juicebox”. I’ve got it working but there is a problem with the dropdown navigation. When I hover over a menu child element that appears above the juicebox gallery the browser seems to favor the juicebox hover above the menu link. (i.e. I can’t click the child element because the gallery takes the hover focus). The child elements (activated on hover) visibly appear above the gallery but functionality is lost. Any ideas on how to fix this?

  35. Ian

    Well explained and gave me exposure to juicebox, which I had not seen before. Looks like something that I would actually be prepared to pay for too

  36. DSoS

    First thing first, Thank You so much for your tutorial on this. This has been driving me insane trying to figure this out, yet quite simple.

    I do have a question though, when I upload multiple images, some of my articles can have 20+ images, is there a way to only show one image (the first uploaded possibly) on the teaser page, instead of all the images?

    Image of what is happening:
    DSoSWeb.com/Images/DrupalJuiceBoxIssue.jpg

    I might be overlooking this and is probably under my nose the entire time.

    For reference I have the Pro version of JuiceBox and updated to the latest version, same as Drupal and all modules.

    Thank You and have a great day!

      1. DSoS

        Thank You for the reply back. I ended up using the “Field Multiple Limit” module. I found it easier to get to the settings.

        Again, Thank You for the help and the great articles!

  37. samuel

    please after i finish the whole process on viewing the gallery this is the error i got,

    Juicebox Error: Config XML file not found.

    1. ivan

      This has already been discussed in these comments. Please review the comment section for a workaround. Or, ask in the issue queue.

  38. surya sasi

    Notice: Undefined index: juicebox_vm in juicebox_field_formatter_view() (line 215 of C:xampphtdocsdrupal7sitesallmodulescontribjuiceboxjuicebox.field.inc).

  39. Carol

    Hello, first of all, thanks for this great tutorial. it would be awesome if it worked for me. I followed along and did everything but at the end I got an error message and the gallery is not showing on the article page /juicebox. Here is the message I got. Sorry I am somewhat new to drupal.

    PDOException: SQLSTATE[23000]: Integrity constraint violation: 1062 Duplicate entry ‘juicebox’ for key 2: INSERT INTO {views_view} (name, description, tag, base_table, human_name, core) VALUES (:db_insert_placeholder_0, :db_insert_placeholder_1, :db_insert_placeholder_2, :db_insert_placeholder_3, :db_insert_placeholder_4, :db_insert_placeholder_5); Array ( [:db_insert_placeholder_0] => juicebox [:db_insert_placeholder_1] => [:db_insert_placeholder_2] => default [:db_insert_placeholder_3] => node [:db_insert_placeholder_4] => Juicebox [:db_insert_placeholder_5] => 7 ) in views_db_object->save_row() (line 2224 of /home/content/……..

    Please help. Thanks!!!

    1. ivan

      This looks like an issue with your database. There’s already a view called “juicebox”. That’s why you’re getting the “Duplicate entry” error.

      Try setting Juicebox on a new Drupal site.

  40. Susanne

    Hi, and thank you! Both my article type and views worked. I am moving my site to Drupal and I have multiple galleries with many pictures.

    I’m not so sure I understand why the view when the article worked just fine?

    Susanne

        1. ivan

          Galleries can be created in two ways: using a formatter or using Views. Sometimes a formatter won’t cut it because you don’t have all the images in a single field.

          If the formatter is working for you, great. But Views is there as another option.

  41. Dennis

    Hi,

    Thanks for the article. I am setting up a juicebox, all works fine. But one thing is bugging me. Because I have a lot of images per juicebox I’d like to order them by dragging them into place. In your screenshot I can see this is possible. As I am new to Drupal I was wondering if you can help me pointing my search in the right direction. How to achieve this.

    Thanks for your time, Dennis

    1. ivan

      Hi Dennis,

      The screenshot you’re talking about is the general image field. Fields in Drupal can be configured to store multiple values, in this case, it allows you to store multiple images on a single field.

      If you want to create a gallery using images from a field, then look at setting up Juicebox using the field formatter instead of views.

      Hope this helps.

      Cheers,
      Ivan

  42. Alain

    HI Ivan,
    I’m from Belgium, and have a question:

    when i make 1 gallery i see on the “photo-gallery” page all the uploaded pictures in 1 time , is it possible to see 1 picture ( thumbnaill” from the gallery, and then when i click on the thumbnail that i see then all the pictures?

    Is it also possible to see more than 1 gallery on the “photo gallery” page?
    And so yes, how can i fixes that

    Manny thanks
    Alain

    Can you help me please

    1. Ivan Zugec

      Hi Alain,

      when i make 1 gallery i see on the “photo-gallery” page all the uploaded pictures in 1 time , is it possible to see 1 picture ( thumbnaill” from the gallery, and then when i click on the thumbnail that i see then all the pictures?

      Not quite sure how’d you do this. See if there’s an option to hide the images.

      Is it also possible to see more than 1 gallery on the “photo gallery” page?
      And so yes, how can i fixes that

      It depends how you’re creating the galleries. If you’re using an image field just create multiple image fields.

      Cheers,
      Ivan

  43. Jonas

    I got this error

    “The Juicebox style cannot be used with a pager. Please disable the “Use pager” option for this display.”

    1. Ivan Zugec

      Hi Jonas,

      Have you tried disabling the pager as the error suggests?

      “Please disable the “Use pager” option for this display.”

      Cheers,
      Ivan

  44. Jim Weir

    Ivan,

    Is there a way to have the image of the gallery stored as files on the server? I have my own web server and would like to have a folder of different art work or images and then call them on different view. Is that possible?
    Oh.. Great write ups and awesome module.

    Jim

    1. Ivan Zugec

      Hi Jim,

      Anything is possible if you’re willing to write code. 🙂

      Out-of-the-box Juicebox works best if you’re storing files using the Image or File field. Anything else will have to be handled via custom code.

      Cheers,
      Ivan

Comments are closed.

Scroll to Top