3,176

(6 replies, posted in Juicebox-Pro Support)

My previous post from yesterday (which I have since deleted to avoid confusion) referred in error to a different bug.
Sorry for the incorrect response and any inconvenience caused.

The bug which I originally referred to (whereby the value of the expandInNewPage configuration option could change the scale of the embedding page) should affect only iOS devices.
If expandInNewPage="FALSE" and an iOS device is detected, then Juicebox dynamically sets the following meta viewport tag which may change the scale of the page.

<meta id="jb-viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

More information on expanding galleries on iOS can be found here.

This problem should not affect Android devices so the original problem you encountered could be due to something else.

Did my original suggestion of changing the value of expandInNewPage make a difference?
You did not initially post back or provide the URL to your gallery so it appeared that you may have found a solution or workaround for your problem.

If you could please answer the following questions, we might have a better idea of what could be causing your problem.

  • Do you see the problem in any of our own v1.4.2 demo galleries here?

  • Does the problem occur in just Chrome or also in the Android stock browser?

  • Does the problem occur in a 100% x 100% size gallery (where the gallery is the only element on the web page, filling the page) or only in a gallery embedded in a web page alongside other content?

Also, in case the problem is somehow related to invalid HTML code, you could try validating your web page with the W3C Markup Validation Service and 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.

The problem may also be due to a CSS conflict. There may be some custom CSS code on your web page which the Juicebox gallery is inheriting and which is causing the layout of your gallery to change. If you have any global CSS rules (which might, for example, affect all <div> or <img> tags on your web page, including those within the Juicebox gallery), then try applying these CSS rules to only those elements on your web page which require them through use of CSS selectors.

In order to investigate your problem further, I would really need to see the problem for myself so, if possible, please
reproduce a gallery with the problem you originally reported and then post back with its URL (and upload a screenshot somewhere showing what you are seeing) so that I can take a look and hopefully help further.
Also, please let me know what device and version of Chrome you are using. (The more information we have, the better.)
Thank you.

3,177

(3 replies, posted in Juicebox-Pro Support)

If you see the actual embedding code in your web page rather than the gallery itself, then you may be inserting your gallery's code into your web page as plain text rather than as raw HTML code.
Please check the input mode in your editor.

If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at your problem for myself and hopefully help further.

3,178

(1 replies, posted in Juicebox-Pro Support)

I'm embedding a Juicebox gallery into a page and have been having problems with it actually appearing on the page.

It sounds like you have already solved your problem but for any other users reading this post and experiencing similar symptoms (a blank area where the gallery should be), then this FAQ may help.
When I view my gallery, I see a blank area. Why?

Also, it is not possible to isolate a Juicebox gallery (or any other HTML element) from custom CSS on a web page so if you encounter a CSS conflict, please ensure that you do not use global CSS rules but instead apply CSS rules to only those elements on your web page which require them through use of CSS selectors (classes and ids).

3,179

(3 replies, posted in Juicebox-Pro Support)

Have placed an HTML code on the page and loaded the script that is generated into it and uploaded page, but when I view page on line nothing shows...

Please see this FAQ:
When I view my gallery, I see a blank area. Why?

And how do I do this: THAT IS TO UPLOAD gallery folder to your website

You can upload your gallery folder to your website using an FTP program such as Filezilla.
Please see the Filezilla Tutorial and Usage instructions.
If you have trouble uploading files and folders to your web space, your web host should be able to help you further.

Essentially, you will need to upload the gallery files to your web server and embed the gallery in a web page (following the embedding instructions here).

If you create a gallery with JuiceboxBuilder-Pro, then the gallery is already embedded in the 'index.html' file generated by the application so, at its most basic, you could upload the entire gallery folder to your web server and just open the 'index.html' file in your browser to view your gallery.

3,180

(3 replies, posted in Juicebox-Lite Support)

I tried the site on three iPhones with iOS 8 and there the site with the gallery is non-responsive, so you see the normal desktop version on the mobile phone.

First of all, please ensure that you are using the most recent version of Juicebox-Lite (v1.4.2) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, you can download the current version of Juicebox-Lite from the download page here.

If your gallery sets screenMode="AUTO" (the default value for this configuration option), then your gallery should be displayed in Small Screen Mode on small screen devices (like the iPhone). (Please see here for more information on how Juicebox adapts to different devices and screen sizes.)
Do you see the problem in both Chrome and Mobile Safari on your iPhones or just in one of these browsers?
Are you able to upload screenshots somewhere of what you are seeing on iOS 7 vs iOS 8 so that I can see what you are seeing? (For example, I do not know if your gallery uses a Splash Page and whether or not this is displayed.)
Also, it may help if I could see the gallery in question so please post the URL to your gallery's web page so that I can investigate further. Thank you.

The ability to add SEO content code to a gallery's web page is a feature of JuiceboxBuilder-Pro only (the code is included in the 'index.html' file generated by the application) and it is not available in any of the plugins.

addSEOContent is not a configuration option which is used by the Juicebox when the gallery is displayed (like other configuration options found here).

Please also note that we did not write the Juicebox module for Drupal ourselves so if you would like to suggest this as a feature request, then I would recommend that you post in the Drupal forum where the author of the module will see your idea.

Alternatively, you could use JuiceboxBuilder-Pro to create a gallery with SEO content code and then embed the gallery into your web page manually following the instructions here.
(The embedding code provided by JuiceboxBuilder-Pro on the 'Publish' tab will contain the SEO content code as long as the 'Add SEO Content' checkbox is selected in the 'Customization -> Sharing' section.)

3,182

(1 replies, posted in Juicebox-Lite Support)

The handling of images is done entirely by WordPress itself and WP-Juicebox just displays the images in the order in which they are provided by WordPress (using WordPress's own 'menu_order').

The images should not be in a random order unless you set randomizeImages="TRUE" in your gallery.

If you edit a post containing a gallery, click the 'Add Media' button and go to 'Insert Media (side menu) -> Media Library (tab) -> Uploaded to this post (drop-down menu)', then the images should be displayed in the same order on screen here as they are in the gallery.
If this is not the case, then you should be able to drag and drop the thumbnails into a new order. If you just move a single thumbnail (and move it back to its original position), this should be enough to snap the images into order.

WP-Juicebox (since v1.3.3.1) includes a quick and easy way to reverse the order of images in a gallery (if they seem to be reversed for whatever reason). Just edit the gallery on the 'Manage Galleries' page and select 'Ascending' or 'Descending' as the 'Image Order' before clicking 'Save'.

I hope this helps.

If expandInNewPage="AUTO" (the default value, as used by Juicebox-Lite), then expanding in a new page is the default behavior on iOS devices. Please see the Expand Gallery Behavior support section for more information.

This sample gallery will always expand in a new page (on all devices and in all browsers) either when the Splash Page is clicked in Small Screen Mode or when the Expand Button is clicked in Large Screen Mode:
http://www.juicebox.net/demos/pro/embed … wPage=TRUE

3,184

(1 replies, posted in Juicebox-Lite Support)

Please see this FAQ:
Can Juicebox handle a custom data source, for example RSS or Instagram?

Essentially, if you do not use a static XML file, you would need to point Juicebox towards a server-side script (using a configUrl entry in the gallery's embedding code) which would dynamically build the gallery's XML file using the images from your custom source.
You can see the structure of a gallery's XML file (that your server-side script would need to replicate) by examining the sample 'config.xml' file from the Juicebox-Lite download zip package ('juicebox_lite_1.4.2/web/config.xml').

There is an example of using a PHP file to display images in a designated folder in this forum post.
It is not what you are looking to achieve but demonstrates that Juicebox is flexible enough to use a custom source of images.
As long as you can fetch the URLs of your images using a server-side language, you should be able to construct an XML file for use within a Juicebox gallery.

I hope this points you in the right direction.

Perhaps any other Sharepoint users reading this can help further and contribute with the code you might need to use.

It sounds like your problem may be due to a known bug whereby elements which have explicitly been assigned a CSS 'position' are not covered by the fullscreen gallery (they should be). This bug has already been addressed and will be fixed in the next version of Juicebox.
In the meantime, a workaround would be to set expandInNewPage="TRUE" so that, when the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page. However, expandInNewPage is a Juicebox-Pro option which is not configurable in Juicebox-Lite (the free version).
An alternative workaround would be to set useFullscreenExpand="TRUE". When the gallery is expanded, it will cover the user's entire screen instead of just the browser window. Please note that this will work only in browsers which support the Fullscreen API. Please see this web page for a current list of such browsers.

When you select the 'Add SEO Content' checkbox, code in the following format is added to the Juicebox gallery container (the 'juicebox-container' div).

<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>GALLERY TITLE</h1>
<p>GALLERY DESCRIPTION</p>
<p><img src="images/IMG_1249.jpg" title="IMAGE #1 TITLE" alt="IMAGE #1 CAPTION" /><br>IMAGE #1 TITLE IMAGE #1 CAPTION</p>
<p><img src="images/IMG_1253.jpg" title="IMAGE #2 TITLE" alt="IMAGE #2 CAPTION" /><br>IMAGE #2 TITLE IMAGE #2 CAPTION</p>
</noscript>

As you can see for the sample code above, both alt and title attributes are included in the img tags.
However, the code is not rendered by the browser and displayed on screen (unless JavaScript is disabled) but is there to help with search engine optimization.
Please see the SEO support section for further details.

I hope this helps to explain this feature and what you are seeing.
If not, then please post back and explain in greater detail what you mean by "alt title not showing and image source show instead" so that I can hopefully help further.

3,187

(5 replies, posted in Juicebox-Pro Support)

As long as your galleries use the latest version of either the Juicebox-Lite or Juicebox-Pro 'jbcore' folder (v1.4.2), the JavaScript conflict should not occur.

3,188

(9 replies, posted in Juicebox-Pro Support)

When you create or edit a gallery with JuiceboxBuilder-Pro, the baseUrl is not used and you need to add it to your embedding code manually afterwards.
However, if you are just editing a gallery, then you just need to replace the updated gallery files (in the gallery folder) and there is no need to alter the embedding code at all.

3,189

(1 replies, posted in Juicebox-Pro Support)

The SLIDE transition works only for adjacent images when the main image navigation arrows are clicked/tapped (or when swiping on a touch device).
As you have discovered, images do not SLIDE when selected via thumbnails. There is no user control to change this.

3,190

(5 replies, posted in Juicebox-Pro Support)

The Lightroom plugin v1.2 came bundled with Juicebox v1.2.0 so, if you upgraded the plugin to Juicebox-Pro around that time period, then the version of Juicebox that your gallery is using is almost certainly the cause of your problem.
You can determine the version of Juicebox that a gallery uses by opening the gallery's 'jbcore/juicebox.js' file in a plain text editor and checking the version number in the comments at the top.
You can do likewise with the plugin's 'juicebox.js' file ('juicebox.lrwebengine/jbcore/juicebox.js') to determine what version the plugin is currently using.

As you will likely need to upgrade the plugin's core Juicebox files, you might like to take this opportunity to upgrade the plugin, too.
(1) Download the latest version of the plugin (v1.4.2.0) from here.
(2) Download the latest version of Juicebox-Pro (v1.4.2) using the link from your purchase email (see here for details).
(3) Upgrade the Lightroom plugin following the 'Upgrading to Juicebox-Pro' instructions on the plugin's support page.

If you want to upgrade an existing gallery to the latest version of Juicebox-Pro, then either recreate the gallery with the upgraded version of the Lightroom plugin or replace the 'jbcore' folder in the existing gallery folder with the 'jbcore' folder from the Juicebox-Pro v1.4.2 download zip package ('juicebox_pro_1.4.2/web/jbcore/').

3,191

(5 replies, posted in Juicebox-Pro Support)

Please make sure that you are using the latest version of Juicebox-Pro (v1.4.2).
The problem you reported was an issue in v1.3.0 but was fixed in v1.3.1 (released 29 April 2013). Please see the Version History for a full list of changes between versions.
Instructions for upgrading Juicebox-Pro can be found here.

I have just double-checked that v1.4.2 works fine alongside the code you posted (whether jQuery is loaded before or after the 'juicebox.js' file).

If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further.

3,192

(1 replies, posted in Juicebox-Pro Support)

I would recommend following the baseUrl method of embedding as documented here.
Essentially, you would upload the complete gallery folder (not just the contents) to your web server and enter the baseUrl embedding code into your web page wherever you would like the gallery to appear. It does not matter where on your web server you upload your gallery folder to as long as the two paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

Keeping the gallery files within the gallery folder should help keep things organized on your web server and also makes life easier if you want to update the gallery in the future (as you would just have to replace the complete gallery folder on your web server).

Please ensure that you enter the baseUrl embedding code into your web page as HTML code rather than just plain text.
Chapter 7 in this web page may help with this.

3,193

(9 replies, posted in Juicebox-Pro Support)

The embedding code on your findanevent.php web page is currently missing the baseUrl entry.
Change:

<script src="currentgalleries/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "300px",
galleryHeight: "550px",
backgroundColor: "rgba(128,0,0,1)"
});
</script>

... to:

<script src="currentgalleries/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "currentgalleries/",
        containerId: "juicebox-container",
        galleryWidth: "300px",
        galleryHeight: "550px",
        backgroundColor: "rgba(128,0,0,1)"
    });
</script>

3,194

(8 replies, posted in Juicebox-Pro Support)

Do you have a link to a gallery which still displays the flickering so that we can take another look (now knowing what we know about the server-side caching issue)?
The link in your earlier post does not seem to work any more.

Also, do you see the problem (in your Safari browser) in this demo gallery which uses imageTransitionType="CROSS_FADE" and displays navigation buttons?

Thanks for your help.

3,195

(9 replies, posted in Juicebox-Pro Support)

One the individual pix are not opening into a lightbox

In a Juicebox gallery, images do not open in a lightbox. When you click a thumbnail in a gallery, the main image in the gallery changes to display the selected image.
You can expand the gallery so that it fills the browser window by clicking the Expand Button on the gallery's Button Bar.
Hover over the gallery and the Button Bar will appear. Hover over the Button Bar icons and the Expand Button is the one with the text 'Expand Gallery'.

two under the word back on the top is the title of the slider - its covering the word back.

Your gallery currently sets galleryTitlePosition="TOP" and backButtonPosition="TOP" and there is not enough width in your narrow gallery to horizontally align the Gallery Title and Back Button so that they do not overlap. The easiest solution would be to change the position of either the Gallery Title or the Back Button, e.g.:

galleryTitlePosition="OVERLAY"
backButtonPosition="TOP"

For reference, a full list of configuration options can be found here.
You could either edit your gallery with JuiceboxBuilder-Pro (if you still have a copy of the gallery on your hard drive) and re-upload the gallery files to your web server or just edit your gallery's XML file manually and change the configuration options as necessary.
Just open your 'currentgalleries/config.xml' file in a plain text editor and edit the configuration options (the attributes to the opening <juiceboxgallery> tag) as required.
Other solutions would be to increase the width of your gallery or to reduce the size of your Gallery Title text and then to horizontally align either the Gallery Title or the Back Button to the right (e.g. backButtonHAlign="RIGHT").

In the next version of Juicebox, thumbnails within a gallery will still all be the same size as each other (they do not need to be square) but the images used to fill the thumbnail dimensions will be scaled-to-fill. This is certainly an improvement over the current behavior (which center-crops images) and allows for images which are nowhere near the thumbWidth and thumbHeight dimensions to be used as thumbnails, although it is not what you are looking for.

Please feel free to post suggestions for future versions in the Feature Requests thread. This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.

3,197

(8 replies, posted in Juicebox-Pro Support)

On further investigation, the problem may be related to server-side caching.
If caching is disabled on your web server, then Juicebox will have to download the images every time it needs them (as it will not be able to fetch them from a cache) and this may be causing the problem.

If you have an Apache web server and have a .htaccess file with an entry such as the following (to disable caching), then please try removing it to see if it helps.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

This may solve the problem.

3,198

(27 replies, posted in Juicebox-Pro Support)

On further investigation, the problem may be related to server-side caching.
If caching is disabled on your web server, then Juicebox will have to download the images every time it needs them (as it will not be able to request them from a cache) and this may be causing the problem.

If you have an Apache web server and have a .htaccess file with an entry such as the following (to disable caching), then please try removing it to see if it helps.

Header set Cache-Control "max-age=0, private, no-cache, no-store, must-revalidate"

This may solve the problem.

This issue has been addressed and in the next version of Juicebox, thumbnail images will be scaled-to-fill the thumbWidth and thumbHeight dimensions (rather than being centre-cropped which currently happens).
If the aspect ratio of the thumbnail image does not exactly match the thumbWidth x thumbHeight aspect ratio, then there may still be a small amount of cropping (but only at the top and bottom or left and right, not in all dimensions).
If the thumbnails were scaled-to-fit (with no cropping at all) then there may be odd/uneven spaces between thumbnails (as thumbnails will still be the same size as each other with the same amount of padding between each one).

This now means that a user could potentially use a single folder of images as both the main images and thumbnails in a gallery (although I would still recommend using a dedicated, smaller set of thumbnails).

3,200

(9 replies, posted in Juicebox-Pro Support)

The reason for the gallery not displaying currently is as follows.
The embedding code on your https://www.countyfairgrounds.net/findanevent/findanevent.php web page uses the following code:

<script src="jbcore/juicebox.js"></script>

Therefore, the 'juicebox.js' file should be located at https://www.countyfairgrounds.net/findanevent/jbcore/juicebox.js but going directly to that location in a browser results in an error 404 (file not found).
The 'juicebox.js' file is not where it should be on your web server (according to your embedding code).

As you have uploaded a complete gallery folder to https://www.countyfairgrounds.net/findanevent/currentgalleries/, you can point towards this gallery folder using a baseUrl.
Change your embedding code (on your findanevent.php page) to the following and your gallery should display.

<!--START JUICEBOX EMBED-->
<script src="currentgalleries/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: "currentgalleries/",
        containerId: "juicebox-container",
        galleryWidth: "300px",
        galleryHeight: "550px",
        backgroundColor: "rgba(128,0,0,1)"
    });
</script>
<div id="juicebox-container">
    *** KEEP YOUR GALLERY'S SEO CONTENT CODE HERE ***
</div>
<!--END JUICEBOX EMBED-->

Alternatively, you could keep your gallery's embedding code exactly as it is and copy the contents of the currentgalleries directory into the findanevent directory.
Either solution should work fine.

I would recommend keeping your gallery in the currentgalleries folder and using the baseUrl code (as above).
Keeping the gallery files together in a separate folder should help to keep things organized on your web server.

A couple of other notes:

(not a great name I know but it my first attempt at this)

There is absolutely nothing wrong with naming your gallery folder currentgalleries. This is just as valid as calling it anything else and it will not affect the functionality of your web site. In fact, you have named your gallery folder well, sticking to web-safe alphanumeric characters. (Using other 'reserved' characters in a web server directory name can sometimes cause problems.)

FIRST its got to work and then I need help in getting past my https

The fact that your web site is https:// should not make a difference to the embedding or functionality of a Juicebox gallery.

I hope the information above helps.