4,426 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Lite Support)

In all my posts above, I have recommended using a separate PHP file to generate the XML data (so that the code can be accessed and reused from different pages) using the following process:

Your 'original' PHP file would create your main web page including your gallery's embedding code. Within the embedding code you would point towards a different PHP file (using the configUrl configuration option) which would generate the XML data. Once processed by the server, the data output by this PHP file would look just like an XML file to a browser.
The PHP file which would generate the XML data would look something like the file in this forum post.

However, as you suggested, an alternative would be to use a session variable using the following process:

Have the XML data generated in your 'original' PHP file and save the data as a long string in a session variable.
Point towards a different PHP file (using the configUrl configuration option).
In this PHP file, you would simply output the contents of the session variable. The entire PHP file would look something like this:

<?php
header('Content-type: application/xml');
session_start();
echo $_SESSION['xmldata'];
?>

Both methods will work fine but you do need to have your XML data in a separate file (whether it is generated by the file itself or simply passed to the file in a session variable).
It would not be possible to generate the XML code in your 'original' PHP file (which generates the page containing the gallery's embedding code) and pass it directly to the gallery.

Go to forum: Juicebox-Lite Support

4,427 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Is there a way to lock the location of the small thumbs button to the bottom of the images?

The gap between the bottom of the main image and the thumbnail dots arises due to your gallery using imageVAlign="TOP" and imageScaleMode="SCALE".
Your gallery uses the default thumbsPosition="BOTTOM" so your thumbnail dots are always displayed below the image area in the gallery.
When a browser window narrows, the height of the gallery does not change, and therefore, the height of the image area does not change (and the thumbnail dots are still positioned immediately below the image area) but the size of the main image does change to respect its aspect ratio (due to setting imageScaleMode="SCALE") resulting in space below the image.

Either set imageVAlign="CENTER" to vertically center the image within the image area (to reduce the gap between the bottom of the image and the thumbnail dots) or change imageScaleMode to FILL so that the image fills the image area (which would result in a minimal gap, although images may be cropped).

Also, how do I change the color of the button? My background is set to white so the 'on' state of the button is not visible.

The thumbnail dots currently uses the navButtonIconColor for the hover and selected state and the navButtonBackColor for the unselected state.
As long as your navButtonIconColor, navButtonBackColor and gallery background color all differ, your thumbnail dots should always be visible.
Please note that we plan to introduce separate color controls for the thumbnail dots in a future version of Juicebox-Pro.

Go to forum: Juicebox-Pro Support

4,428 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Lite Support)

Try reducing the line-height for the .jb-caption p entry on line 236 of the Juicebox-Lite v1.3.2 'jbcore/classic/theme.css' file (from its default value of 23px to something lower such as 15px).

Go to forum: Juicebox-Lite Support

4,429 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

Your gallery does not resize in Portfolio 2 because your gallery is embedded in two parent divs (.positionca95887172e34b94 and wrapper17986066c0979564), each with fixed widths of 1024px (set via CSS in your 'global_style.css' page).
Even though your gallery was a width of 100%, this means that it will be 100% of its parent container, ie. 100% x 1024px = 1024px. Therefore, the gallery's width will always be 1024px regardless of the size of the user's browser window.

If you want to use a side menu with a resizable gallery, please take a look at the View Resizable Gallery with Side Menu Example in the Resizable Gallery support section.

Go to forum: Juicebox-Pro Support

4,430 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Lite Support)

It would not run with Chrome locally, but Firefox was OK.

Please see this FAQ:
When I view my gallery locally in Google Chrome, I see the message "Juicebox does not display locally in Google Chrome". Why?

You will need to create a completely separate PHP file to generate the XML data for your gallery. This will have nothing to do with your other PHP file which creates your main HTML page and which will include your gallery's embedding code.

The PHP file which generates the XML data will be processed by the server and will output only the XML data required for the gallery. It is this file that you will need to point to within your gallery's embedding code with a configUrl (otherwise, Juicebox will not know where to find the PHP file).

Go to forum: Juicebox-Lite Support

4,431 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

Set the 'Background Opacity' for your gallery to '0' (in the settings window).

Go to forum: Juicebox-Pro Support

4,432 Reply by Steven @ Juicebox

(11 replies, posted in Juicebox-Lite Support)

It should be possible to dynamically create an XML file for a Juicebox gallery using most server-side scripting languages as long as you can output the required XML data (though I have not personally tried using a Web API URL as a configUrl).
Perhaps someone else reading this thread has already tried this and can comment.
If you want to try this for yourself, perhaps this web article will help: Getting the Result of ASP.NET Web API in XML Format

Go to forum: Juicebox-Lite Support

4,433 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Lite Support)

I can understand what the contents are, but I am at a loss to see how the XML file is associated with the web page containing the gallery.

how do I name the files

The web page containing the gallery will contain the gallery's embedding code (as found here).
You would use a configUrl within the embedding code to point towards your PHP file so that Juicebox can find it, e.g.:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
configUrl: 'path_to_php_file/config.php',
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Will I have to generate a different XML file for every gallery used

The XML file is where the list of images and captions is stored. Therefore, each gallery needs its own XML file (otherwise all galleries would display the same images and captions).
However, you could use the same PHP file to generate the XML data for different galleries by adding query string parameters to your configUrl to differentiate between galleries and so that the PHP file knows which gallery's information to gather, e.g.:

configUrl: 'path_to_php_file/config.php?id=12',

In the example above, you would get the 'id' within the PHP file (using $_GET['id']) and the PHP file would conditionally gather information from your chosen source depending on this value.

I think I better download "JuiceBox" and look at the code, to see how it all links together

This would be a good idea. The principle is the same for Juicebox-Lite as it is for Juicebox-Pro so download Juicebox-Lite and try it out for yourself.

most of your documentation, seems to be about generating a gallery in a directory

A gallery's files are usually all stored in the same directory for ease of use. Your gallery's files do not all need to be in the same directory but if you move them, then you may need to point towards them using configuration options such as configUrl, baseUrl and themeUrl. A list of these Embed Options can be found here.

the images that make up my gallery can come from different directories.

The images and thumbnails for the gallery can be anywhere on your web server and they are pointed to via the imageURL and thumbURL entries in the XML file (which would need to be determined by your PHP file).

This FAQ (and the links within it) may also help:
Can Juicebox handle a custom data source, for example RSS or Instagram?

Go to forum: Juicebox-Lite Support

4,434 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

When creating a gallery with JuiceboxBuilder-Pro using default settings, the application will resize your images to 1024x768 (with a quality of 80%), resulting in images with a file size of approximately 120KB each.
These default values are usually a good compromise between resolution, quality and file size for web gallery use.
The ideal size for your images will depend on a number of factors including the dimensions of your gallery and the audience you are targeting with your gallery (whether they are likely to be viewing your gallery on mobile devices or on large monitors).
Therefore, 1024x768 may not be ideal for all scenarios but it should be a good starting point for most users.
If you do not want your images to be scaled within your gallery, you can set imageScaleMode="NONE" (in JuiceboxBuilder's 'Customize -> Main Image' section). If using this setting, large images will be cropped to fit the image area.

Go to forum: Juicebox-Pro Support

4,435 Reply by Steven @ Juicebox

(11 replies, posted in Juicebox-Lite Support)

This needs to be done using server-side scripting (e.g. PHP).
For example, when Juicebox uses a PHP file to dynamically generate the XML data for a gallery, the server processes the PHP file and all that Juicebox sees is the XML data output from the PHP file (not the PHP code).
When trying to perform something similar client-side, Juicebox will see the actual JavaScript code (not the XML data).

Go to forum: Juicebox-Lite Support

4,436 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Lite Support)

You can certainly use a PHP file (instead of a static XML file) to dynamically generate a Juicebox gallery's XML file on-the-fly at the time the gallery is displayed/viewed.
An example of how this can be achieved can be found in the answer to Query #3 in this forum post.
Essentially, you would use a PHP file instead of a traditional static XML file and point your Juicebox gallery towards it using the configUrl configuration option.
Your PHP file would need to generate the XML code using the same structure as a standard 'config.xml' file (see the 'juicebox_lite_1.3.2/web/config.xml' file from the Juicebox-Lite download zip package for an example) but you could pull in images and captions from your chosen source by modifying the code as required.

Go to forum: Juicebox-Lite Support

4,437 Reply by Steven @ Juicebox

(15 replies, posted in Juicebox-Lite Support)

If your tagged images do not show up in API searches within a couple of days, I would try removing and then re-adding the tags to your images.

Go to forum: Juicebox-Lite Support

4,438 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

These are questions that should really be directed towards Flickr as only Flickr will know the answers for sure.

Should I wait after date change or that should be in effect right away after I chage the date?

I suspect it may take some time for any changes you make to propagate throughout Flickr's servers. I do not know how long it may take but new tags can take up to "a few days" before they appear in API searches according to this Flickr FAQ:

it shouldn't take more than a few days until your photos appear in searches, groups, etc.

How does it supposed to work if pictures are taken at the same day? TIme is counted in this case?

I would certainly expect the time to be taken into account, being that Flick have a time field that you can change.
If you have several images that have exactly the same posted date and time, then my best guess would be that they would be displayed in the order in which the uploads to Flickr completed (although I may be wrong about this).
You might want to post these queries in the Flickr help forum for definitive answers.

Go to forum: Juicebox-Lite Support

4,439 Reply by Steven @ Juicebox

(15 replies, posted in Juicebox-Lite Support)

This is not a Juicebox issue so Flickr should be hopefully be able to help.

Entering your Flickr User Id (83516242@N03) and your 'other work' tag into Flickr's API Explorer (bypassing Juicebox entirely) returns no images.
This is essentially the same method that Juicebox uses to fetch the images from Flickr's servers and if Flickr returns zero images, then Juicebox will not have any images to display in the gallery.

What you need to ask Flickr is why no images are being returned from an API search using:
user_id: 83516242@N03
tags: other work

It may just be that the tags have not yet fully propagated throughout Flickr's system.
According to this Flickr FAQ:

it shouldn't take more than a few days until your photos appear in searches, groups, etc.

Go to forum: Juicebox-Lite Support

4,440 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

The best way to deal with multiple galleries is to keep each gallery in its own separate folder (so that there are no file name conflicts), upload the complete gallery folders (not just the contents) to your web server and embed each gallery using the baseUrl method documented here.

Go to forum: Juicebox-Lite Support

4,441 Reply by Steven @ Juicebox

(3 replies, posted in Juicebox-Lite Support)

Juicebox-Lite uses the default values for all Flickr Pro Options. Therefore, the default Flickr sort order is DATE-POSTED-DESC. (These sort orders are Flickr terms. See the sort entry on this web page.)
Juicebox-Lite sends this value to Flickr as a parameter in an API search to fetch the images from their web server.
The images are then displayed in the gallery in the order in which they are returned by Flickr.
It looks like you are not the only one to have issues with Flickr's DATE-POSTED-DESC sort order.
Please see this Flickr forum thread.
Try changing the date posted on a couple of your images manually to see if this helps.
Select a photo, click on the three dots '...' to the bottom right of the photo, select 'Edit title, tags, and dates' and you can change the 'Date posted to Flickr' there.

Go to forum: Juicebox-Lite Support

4,442 Reply by Steven @ Juicebox

(8 replies, posted in Juicebox-Pro Support)

Once I add any other content to the page (another div) the gallery pushes off to the side at 100%.

Where the gallery is positioned on your web page will be dependent on the layout of your page (and the CSS you use).
For example, if you float certain elements on your page, you may need to either float the 'juicebox-container' div left or right or clear the floats before the 'juicebox-container' div on your page.

So it isn't possible to have a embedded gallery at all if I have another div with content? This seems odd.

This is not correct. You can embed a gallery in an existing web page alongside other content (e.g. other divs) by following the Embedding in a HTML Page instructions.

Take a look at the Resizable Gallery demo pages I linked to in my last post.
The View Resizable Gallery with Top Menu Example has a gallery which is embedded alongside a header div and a footer div (on the same page) and the gallery resizes dynamically depending on the size of the user's browser window. Take a look at the source of the web page in your browser to see how this can be achieved. You should hopefully be able to copy and modify the code to suit your own needs.

Go to forum: Juicebox-Pro Support

4,443 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

Is my custom theme a good location or must it be a separate CSS file after the juicebox scripts?

Your custom theme file can be in any location you wish (whatever works best for you). It is loaded via the themeUrl configuration option and should not be included manually (in a <link> tag) in your web page.
The code I posted can be included in either your custom theme CSS file or in the HTML page containing the gallery. It should not make any difference.

I prefer a black background color. It is working fine in Chrome and Firefox. Fullscreen is working in Opera Next but background-color : #000000; has no effect. Safari is making a mess of the gallery presentation.

I have created a test gallery using the following as a gallery's 'index.html' file and I do not see the problems you are describing:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #jb-glry-dlg:fullscreen {
                background-color: #000000;
            }            
            #jb-glry-dlg:-moz-full-screen {
                background-color: #000000;
            }            
            #jb-glry-dlg:-webkit-full-screen {
                background-color: #000000;
            }            
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId: 'juicebox-container',
                galleryWidth:' 400',
                galleryHeight: '400',
                backgroundColor: 'rgba(0,0,0,0)',
                useFullscreenexpand: 'true'
            });
        </script>
        <div id="juicebox-container"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

I have uploaded the gallery here. [Gallery removed.]
The fullscreen functionality works fine in all browsers I have tested it in (Firefox 23.0.1, Chrome 29, Opera 16, Opera Next 16 and Safari 5.1.7) and the background is black in every case. Additionally, the layout of the gallery is fine in all browsers including Safari.

Go to forum: Juicebox-Pro Support

4,444 Reply by Steven @ Juicebox

(15 replies, posted in Juicebox-Lite Support)

Entering 'Stephen Wood' into Flickr's flickr.people.findByUsername page brings up a different Flickr User Id than the one you quoted above.
Please check with Flickr that the User Name you should be using is actually 'Stephen Wood'. It looks like this might be taken by a different person with the same name.

Go to forum: Juicebox-Lite Support

4,445 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Keep a copy of the gallery on your computer and you can edit it using JuiceboxBuilder-Pro.
You can add or remove images on the 'Images' tab and then re-upload the gallery to your web server when finished.
If you make no other changes to the gallery than adding or removing images, then you need only re-upload the gallery's 'config.xml' file and the new images and thumbnails.
If you simply upload your entire gallery to your web server, most FTP programs should be smart enough to upload only new or changed files (though you may want to manually delete images and thumbnails that are no longer included in your gallery).

Go to forum: Juicebox-Pro Support

4,446 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

This is due to your gallery's backgroundColor being 'transparent' and each browser having a different deafult background color when the Fullscreen API is used. Firefox uses a black background whereas Chrome uses a white background. See the 'Styling it all' section on this web page.

Firefox applies this by default along with background-color: black

To set the default background color to white for Fullscreen API mode in all browsers, use the following CSS in the web page containing your gallery:

#jb-glry-dlg:fullscreen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-moz-full-screen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-webkit-full-screen {
    background-color: #ffffff;
}

Please note that the code above does not set a new gallery background color for Fullscreen API mode. (The gallery's own background color will still be used.) It simply sets a default background color which will show through if the gallery's own background color uses transparency.

I have notified the developers of this inconsistency.

Go to forum: Juicebox-Pro Support

4,447 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

If the captions are positioned on the image overlay (OVERLAY or OVERLAY_IMAGE), then set showOverlayOnLoad="FALSE" in your gallery's XML file (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).

Go to forum: Juicebox-Pro Support

4,448 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Pro Support)

If showExpandButton is set to 'TRUE, the Expand Button will be displayed on the Button Bar.
When a gallery is expanded (via the Expand Button), the gallery will (by default) fill the user's browser window.
However, if useFullscreenExpand is set to true, the gallery will fill the user's entire screen (not just the browser window) but only in browsers which support the Fullscreen API.
Please see these pages for more information on the Fullscreen API:
http://www.w3.org/TR/fullscreen/
https://developer.mozilla.org/en-US/doc … creen_mode

For a list of browsers which currently support the Fullscreen API, please see here.

Is it possible to configure the look-and-feel of the useFullScreenExpand page?

An expanded gallery (whether useFullscreenExpand is used or not) uses the same configuration options as the gallery in normal (unexpanded) mode.

Go to forum: Juicebox-Pro Support

4,449 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

No problem.
I'm glad everything is working as expected just now.

Go to forum: Juicebox-Pro Support

4,450 Reply by Steven @ Juicebox

(15 replies, posted in Juicebox-Lite Support)

Perhaps it has something to do with the fact that your Flickr User Name has a space in it.

as I can't see any way to create a gallery with the builder using Id instead of User name

Juicebox-Pro allows you to enter your Flickr User Id instead of your Flickr User Name and I can confirm that entering your Flickr User Id in JuiceboxBuilder-Pro displays your images as expected.
For reference, the Juicebox-Pro Flickr Options can be found here.

I will investigate how to create a Juicebox gallery manually.

You can create a Juicebox gallery manually by following the instructions here.

Then I've tried setting

    flickrUserId="83516242@N03"

in the config,

but that just comes up with a general selection of Flickr photos.

The flickrUserId is a Juicebox-Pro configurtation option only which is not supported by Juicebox-Lite.
Configuration options supported by Juicebox-Lite can be found here.

Go to forum: Juicebox-Lite Support