3,526

(8 replies, posted in Juicebox-Pro Support)

If you would like to manually embed a Juicebox gallery in a Drupal page, I would recommend using the baseUrl method of embedding as documented here.

Essentially, you would create a gallery with JuiceboxBuilder-Pro, upload the entire gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into your web page.
It does not matter where you upload the gallery folder to on your web server as long as the paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.

You do not need to upload your gallery folder to a location within your Drupal installation and you do not need to use the Juicebox files from their location within the Drupal module (although you can if you like).

For example, if you have a gallery folder named 'my_gallery_folder' and you upload the entire folder to the root directory of your web server (into your 'public_html') folder, then the embedding cdoe you would use would look something like this:

<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl : '/my_gallery_folder/',
    containerId : 'juicebox-container',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

To directly answer your query above, there are a few problems with the code you use.
(1) If using an absolute URL, it should start with 'http://'.
(2) The 'public_html' folder name does not form part of the publicly accessible path.
(3) Your baseUrl line of code should have a comma (',') after it as there are further configuration options after it.

Therefore:

<script src="www.joaqimb.be/public_html/sites/all/libraries/juicebox/juicebox.js"></script>

... would become:

<script src="http://www.joaqimb.be/sites/all/libraries/juicebox/juicebox.js"></script>

... and:

baseUrl : "www.joaqimb.be/public_html/sites/all/libraries/juicebox/classic/img/Juicebox Namur"

... would become:

baseUrl : "http://www.joaqimb.be/sites/all/libraries/juicebox/classic/img/Juicebox Namur/",

Rather than using absolute paths, I would recommend using the leading slash notation (to denote your root directory) rather than hard-coding the 'www' subdomain into your patsh so that your galleries display on both www.joaqimb.be and joaqimb.be.
Try using the the following lines of code in your embedding code:

<script src="/sites/all/libraries/juicebox/juicebox.js"></script>
baseUrl : "/sites/all/libraries/juicebox/classic/img/Juicebox Namur/",

3,527

(5 replies, posted in Juicebox-Pro Support)

Your galleries themselves seem to be OK. The 'config.xml' files and images seem to be in the correct locations on your web server. The problem seems to be with your embedding page.

When I load your web page, it initially seems to load OK but then some code on your web page appends #home to the URL and this is when the 'Juicebox Error: Cannot find div with id: "travelcontainer"' message is displayed and the browser fails to load the page (with a continuous spinning icon in the browser tab).

First of all, try fixing the errors on your web page so that the code on your web page validates correctly.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported.

Also, try removing whatever code is adding #home to the URL when the web page loads to see if this helps.

Please see this FAQ:
My images show locally, but not when I upload them to my website. Why?

Also, looking at your gallery's XML file, the first image in your gallery should be located here:
http://www.creation.se/webbtest/images/1_startsida.jpg
.. but going directly to that location in a browser results in an error 404 (file not found).
Please check that you have uploaded your gallery's 'images' and 'thumbs' folders to the correct location on your web server (inside your 'webbtest' directory) and make sure that the permissions on the folders and files are not too restrictive. Default permissions of 755 for folders and 644 for files should be fine.

3,529

(4 replies, posted in Juicebox-Lite Support)

when I give you the url everyone is capable to look in it, or am I wrong?

That is correct, although I will not be able to check the structure of your gallery and the paths within your gallery's XML file if I am unable to see the gallery. (If you post the URL to your gallery, I will delete it from your post once I have a note of it.)

must the images be placed in a particular folder?

The images for your gallery certainly need to be in a particular place. However, the correct location of the images will depend on where the Drupal module expects them to be. If I were to see your gallery, I could tell you where the code is looking for the images.
If you want to check this yourself, view the source of your gallery's web page in your browser, search for the 'configUrl' string, copy the value of the 'configUrl' and paste it into your browsers address bar to open the XML file in a new tab. Now check the 'imageURL' entries to see where Juicebox expects your images to be. If the 'imageUrl' paths are relative, they will be relative to the HTML document which contains the gallery's embedding code.

I would certainly recommend posting your query in the Drupal forum. It is likely that the author of the module has seen this problem before, may know what is causing it and should hopefully be able to suggest a solution for you. Your query certainly seems to be more related to Drupal and the use of the Juicebox module for Drupal than with Juicebox itself. (The structure of a Juicebox gallery created with the Juicebox module for Drupal will be determined by the module's code.)

3,530

(1 replies, posted in Juicebox-Pro Support)

You will need to upgrade to Juicebox v1.4.2 in order for your Flickr gallery to work.
Please see this Juicebox blog entry for more information.
Details on how to upgrade Juicebox can be found here.

3,531

(4 replies, posted in Juicebox-Lite Support)

Please post the URL to your gallery so that I can take a look. If I am able to see your gallery, I might be able to determine the cause of the problem.
However, it sounds like a problem with the Juicebox module for Drupal (which we did not write ourselves) rather than with Juicebox itself. If so, please post your query in the Drupal forum where the author of the module will be able to help you further.

There is no shortcode attribute that WP-Juicebox uses that would alter the size of images within a Picasa Web Album.
Juicebox already dynamically resizes images so that they fit within the gallery's image area. If speed of delivery is your main goal, then the only way to improve this would be to fetch smaller images from Picasa. Even if there was a shortcode attribute available, the most it could do is fetch the full-size image from Picasa and then resize it on the web server. This might result in smaller images being passes to the gallery but it might also result in a delay to the initial loading of the gallery as more processing would be involved.
If you are a Juicebox-Pro user, you might like to change the imagePreloading configuration option from its default value of PAGE to NEXT. This should speed up the initial loading of the gallery as only the next image in the gallery will be preloaded (rather than the all the images on the thumbnail page).

3,533

(496 replies, posted in Juicebox-Pro Support)

@Tiphaine

It would be much easier to implement direct download functionality if all browsers supported the HTML 5 download attribute but this is not yet the case. Please see here for a list of browsers which currently support this feature.
If you would like to try this (though it will only work in the browsers listed in the link above), you could include a link within each image's caption using the 'download' attribute such as the following:

<caption><![CDATA[<a href="images/image.jpg" download="image.jpg">Click here to download image.</a>]]></caption>

If entering the caption directly into JuiceboxBuilder-Pro (in a 'Caption' text field on the 'Images' tab), you would enter just the following:

<a href="images/image.jpg" download="image.jpg">Click here to download image.</a>

JuiceboxBuilder-Pro will enclose the caption in the <caption> and CDATA tags automatically behind the scenes so there is no need to enter them into JuiceboxBuilder-Pro.
(You would need to include them only if entering the caption manually by editing the 'config.xml' file in a plain text editor.)

The href="images/image.jpg" part is the path to the file which will be downloaded. You can use an absolute path (such as http://www.example.com/gallery/images/image.jpg) or a relative path (as in my example above). If using a relative path, it will be relative to the HTML page containing the gallery's embedding code.

The download="image.jpg" part is the name which will be given to the file when the user downloads it. (It does not have to be the same as the image's filename, although it should have the same file extension.)

The Click here to download image. part is the text that will be displayed on screen as the caption which, when clicked, will download the file.

Please remember that this will work only in certain browsers and visitors to your web site using browsers which do not support this HTML 5 attribute (such as Internet Explorer and Safari) may wonder why this feature in your gallery does not work as expected. (You may wish to add a note somewhere on your web page to say that direct download functionality is available only in Firefox, Chrome and Opera.)

I hope this helps.

The problem with editing existing galleries and setting default values seems to be only with WebKit based browsers as the problem happens in both Chrome 36.0 and Opera 22.0.
I will investigate the problem further but in the meantime, a quick and easy fix is to open the 'wp-juicebox/js/edit.js' file in a plain text editor and remove lines 9, 10 and 11:

jQuery('input', '#jb-edit-action, #jb-set-action').click(function() {
    jQuery('input', jQuery(this).parent()).prop('disabled', true);
});

This will not affect the functionality of WP-Juicebox.

3,535

(1 replies, posted in Juicebox-Pro Support)

Unfortunately, there is currently a known bug (which should hopefully be fixed in the next version of Juicebox) whereby the value of the expandInNewPage configuration option can change the scale of the embedding page. This may be the cause of your problem.
If your gallery currently sets expandInNewPage="TRUE", then try setting expandInNewPage="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> General' section). Conversely, if your gallery currently sets expandInNewPage="FALSE", then try setting expandInNewPage="TRUE".
(Alternatively, try setting expandInNewPage="AUTO" if "TRUE" or "FALSE" do not work.)
As I noted, we hope to have this bug fixed in the next version of Juicebox but, in the meantime, changing the value of expandInNewPage should help.

Please check your email. I have sent you a message.

I don't expect such personal attention from tech support, but that would be great. Thanks.

If there is a chance that there is a bug in WP-Juicebox which some users are experiencing, I would like to get to the bottom of it and fix the problem if possible. Thank you for allowing me access to your web server and WordPress installation.

Is there a way to change that to look at the actual browser size?

No. The logic which is used to determine which Screen Mode to use when screenMode="AUTO" is within the 'juicebox.js' JavaScript file which is packed and obfuscated and cannot be changed.

And is it possible to change the resolution that the Juicebox switched from LSM to SSM?

No. This is not a user-changeable option.

If you really want to force Small Screen Mode on the Nexus 7, then you would need to detect the device being used with JavaScript and if it is the Nexus 7, then you would set screenMode="SMALL" in the gallery's embedding code (otherwise, you would set screenMode="AUTO" for Juicebox to use its own detection routine).
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var sm = 'AUTO';
    if (navigator.userAgent.match(/Nexus 7/i)) {
        sm = 'SMALL';
    }
    new juicebox({
        containerId: 'juicebox-container',
        screenMode: sm
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

If you wanted to incorporate this into WP-Juicebox, then you would need to open the 'wp-juicebox.php' file in a plain text editor and insert the following line between lines 286 and 287 (code above condensed for ease of insertion into WP-Juicebox):

$string_builder .= '        screenMode: navigator.userAgent.match(/Nexus 7/i) ? "SMALL" : "AUTO",' . PHP_EOL;

Please note that screenMode is a Juicebox-Pro option which is not available in Juicebox-Lite (the free version).

@greg

The javascript idea is most elegant, but it is awkward to have people .click or touch the empty screen to get the gallery to load.

This is not necessary. You would attach the click handler to the button that the user would click to reveal the gallery so that it all happens automatically (without a further click required once the container is visible on screen).
Just give the button a unique id and use this as the jQuery selector to which you attach the click handler.
In your web page, change:

<a href="#page2" data-role="button">Gallery</a>

... to:

<a href="#page2" id="gallery" data-role="button">Gallery</a>

... and replace your current embedding code with the following:

<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(34,34,34,.5)"
        });
    }
    $(document).ready(function() {
        $('#gallery').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container">


@laurentsch

Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if a web page uses any jQuery code at all, I would certainly recommend including a separate jQuery JavaScript file as you suggest (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).
The original poster's web page already includes a separate jQuery JavaScript file so there should be no problem in this respect.

Yes. Please see this FAQ:
Can I upgrade from a single site license to a multi-site license at a later time?

Your Juicebox gallery has dimensions of 100% x 100% and is loaded as soon as the page is loaded.
However, when the page is loaded, the gallery's parent container is not visible on screen so the gallery's dimensions are 100% of a zero-sized container.
Try giving your gallery fixed dimensions such as:

<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "800",
        galleryHeight: "600",
        backgroundColor: "rgba(34,34,34,.5)"
    });
</script>
<div id="juicebox-container">

Otherwise, delay the loading of your gallery until the gallery's parent container is visible on screen (and has dimensions which Juicebox can use to calculate its own size).
Put the Juicebox embedding code in a function and run the function to load the gallery when the HTML element is clicked.
For example:

<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(34,34,34,.5)"
        });
    }
    $(document).ready(function() {
        $('#page2').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container">

Hopefully one of these two suggestions will help.

@p.lachaine

I can't save any changes.

As I mentioned above, I am unable to replicate this problem myself in my own test WordPress installations.

As for setting defaults, I can't even save them initially. I can click on the Save button, but nothing happens.

I cannot replicate this problem either. Clicking the 'Set' button successfully saves custom default settings in my own test WordPress installations.

In order to troubleshoot these problems further, it would help greatly if I had access to your WordPress installation and web server (so that I can see the problem for myself). If you are agreeable to this, please let me know and I will email you with an address where you can send me login details. Thank you.

3,542

(8 replies, posted in Juicebox-Pro Support)

As you say, your 'juicebox.js' file is, indeed, in two locations on your web server and you can view them both in a browser to confirm this:
http://ozielgrandchapternj.org/jbcore/juicebox.js
http://ozielgrandchapternj.org/web/jbcore/juicebox.js

In terms of embedding a gallery, it does not matter where the 'jbcore' folder is on your web server as long as the path to the 'juicebox.js' file within your gallery's embedding code is correct.
On your '2014_gallery_COTY.asp' page on your web server, the path to the 'juicebox.js' file is incorrect.
You currently use:

<script src="web/images/COTY/jbcore/juicebox.js"></script>

... but there is no 'juicebox.js' file in that location (http://ozielgrandchapternj.org/web/imag … uicebox.js) on your web server.

It looks like you have uploaded a complete gallery to your http://ozielgrandchapternj.org/web/ directory.

If you do the following, your gallery will display OK.

(1) Remove the 'jbcore' folder from the root of your web space (it is not required as you can use the 'jbcore' folder within your 'web' directory).

(2) On your '2014_gallery_COTY.asp' page, replace:

<script src="web/images/COTY/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : 'web/images/COTY/',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(18,18,18,1)"
});
</script>
<div id="juicebox-container">

... with:

<script src="/web/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: '/web/',
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(18,18,18,1)'
});
</script>
<div id="juicebox-container">

(3) The paths to the main images (the imageURLs) are incorrect in your gallery's XML file. Open your http://ozielgrandchapternj.org/web/config.xml file in a plain text editor and change the paths in the imageURLs from:

imageURL="web/images/COTY/DSC_0018.jpeg"

... to:

imageURL="images/DSC_0018.jpeg"

Following the above steps will have the same result as if you had created a gallery with JuiceboxBuilder-Pro, named the gallery folder 'web', uploaded the complete gallery folder to your web server and embedded the gallery in a web page using the baseUrl method of embedding as documented here.

If you just replace the embedding code as in Step #2 above and upload a complete gallery folder (created by JuiceboxBuilder-Pro with no modifications to any files afterwards) named 'web' to the root directory of your web server, this would also work fine.

I hope this helps.

3,543

(8 replies, posted in Juicebox-Pro Support)

is there someone that can contact me via phone support?

Unfortunately, we are unable to provide telephone support. We provide support via email and the online forum.

but when I view on the web it goes back to the generic photos.

The only way that your gallery would be able to display the images from the sample gallery would be if:
(1) You uploaded the sample images to your web site.
(2) The imageURL entries in your gallery's XML file points towards the sample images.

On the web page whose link you posted above, you have two different lots of embedding code:

<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>

... and:

<script src="web/images/COTY/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : 'web/images/COTY/',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(18,18,18,1)"
});
</script>
<div id="juicebox-container">

However, if you want only one gallery displayed on your page, then you should remove one of the above.

At the moment, both galleries use the XML file from the sample web gallery (pointing towards the sample images in their respective 'images' folders). Take a look at the following two files on your web server and you will see that they are identical and contain entries only to the sample images.
http://ozielgrandchapternj.org/config.xml
http://ozielgrandchapternj.org/web/imag … config.xml

If you remove the first lot of embedding code from your web page and replace the contents of your 'COTY' directory with the contents of your own gallery folder ('config.xml' file, 'jbcore' folder, 'images' folder, 'thumbs' folder), then your own gallery will display on your main web page.

According to the Nexus 7 Tech Specs on this Google page, the Nexus 7 has a screen resolution of 1280 x 800 and, as noted on the Juicebox Screen Modes Support Section:

Large Screen Mode (LSM) is displayed on screens of 1024x768 pixels or bigger.

I do not know why your device's screen resolution is being returned as 601x906 but the information above seems to explain why Large Screen Mode is being used on the Nexus 7.

When creating or editing a gallery in JuiceboxBuilder-Pro, the 'Quality' setting is used only if the images are resized.
The images are resized only if the source images are larger than the maximum bounds set in the 'Resize Images' section.

Therefore, if the source images are already within the maximum bounds and do not need to be resized, they will be copied across to the output 'images' folder without any processing and the 'Quality' setting will not have been used.

I hope this helps clarify things.

3,546

(4 replies, posted in Juicebox-Pro Support)

That's great! Thank you for posting back to let me know.
As I noted, this bug should hopefully be fixed in the next version of Juicebox but, in the meantime, just continue to use this workaround.

3,547

(2 replies, posted in Juicebox-Pro Support)

Each web page should have a Doctype Declaration at the very top of the document.
At the top of your web page (before your Doctype Declaration) is the text:

'Rooftops-unsual-sights-of-the-sleeping-cities''Rooftops-unsual-sights-of-the-sleeping-cities'

This is probably throwing Internet Explorer into quirks mode, resulting in the problems you are describing.
Try removing this text before your Doctype Declaration and hopefully your gallery will display and function as expected.
Please see this FAQ: My gallery looks strange in Internet Explorer 9. Why?

If this does not help, then, once you have removed the text before your Doctype Declaration, you can check the code on your web page for HTML errors with the W3C Markup Validation Service and then fix any errors reported. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.

3,548

(1 replies, posted in Juicebox-Pro Support)

When Juicebox is displayed on mobile devices, the gallery is displayed, by default, using Small Screen Mode (to maximize the size of the main image on small screen devices). You can toggle the overlay on and off by tapping on the screen.
For more information about Screen Modes and how Juicebox adapts to different devices and screen sizes, please see here.

If you like, you can force Juicebox to use Large Screen Mode on all devices and in all browsers by setting screenMode="LARGE" in JuiceboxBuilder-Pro's 'Customize -> General' section.

3,549

(2 replies, posted in Juicebox-Pro Support)

Use the 'Presets -> Save Preset...' option from the drop-down menu at the top.
For reference, there is a 'Presets' support section on the JuiceboxBuilder User Guide web page.

3,550

(3 replies, posted in Juicebox-Pro Support)

I should also have pointed out that to ensure JuiceboxBuilder-Pro generates SEO content code in the gallery's 'index.html' file, you should select the 'Add SEO Content' checkbox in JuiceboxBuilder-Pro's 'Customize -> Sharing' section. (This configuration option is selected by default.)

Please see the Search Engine Optimization support section for further details.