• Registered: 2013-10-08
  • Posts: 4

Topic: Juicebox - Lightbox Drupal 7

Hey guys thanks again for all the help.

My boss wants to integrate lightbox in all the gallery images, ex. when an image is clicked

How would I go about doing this in drupal.

I've been through the instructions on how to complete this with the .html version of Juicebox


Thanks again!!!
Greg

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Juicebox - Lightbox Drupal 7

You can embed a Juicebox gallery in Drupal by either:
(1) Using the Juicebox module for Drupal. (Please note that we did not write the module ourselves and support for the module should be directed towards the Drupal forums where the author of the module should be able to help you out.)
... or:
(2) Following the manual embedding instructions here.

If you want to be able to open an image from within a gallery in a lightbox-style modal window, then this can be achieved by following the instructions in this forum post.

I expect it would be rather complex to try to incorporate such functionality into the Juicebox module and it would probably be easier to try to implement it manually.

First, create the gallery as required (with the necessary linkURLs and linkTargets in the gallery's 'config.xml' file).
Next, you would need to include all the necessary external JavaScript and CSS files (from the code in the forum post linked to above) into the <head> section of your page.
These two links should be able to help with this:
https://drupal.org/node/171209
https://drupal.org/node/304255

Then, the embedding code that you would need to add to your page would look something like this:

<script type="text/javascript">
    Shadowbox.init({
        skipSetup: true
    });
    var jb;
    $(document).ready(function () {
        jb = new juicebox({
            containerId: 'juicebox-container',
            galleryWidth: '100%',
            galleryHeight: '600'
        });
    });
    function func() {
        var index = jb.getImageIndex();
        var info = jb.getImageInfo(index);
        var url = info.imageURL;
        var title = info.title;
        Shadowbox.open({
            content: url,
            player: 'img',
            title: title
        });                
    }
</script>
<div id="juicebox-container"></div>