3,401

(15 replies, posted in Juicebox-Pro Support)

So the problem appears to be that audio does not play on load in the stock browser on a Samsung S3 running Android 4.3 (but that the functionality and icon status of the Audio Button is OK).

Unfortunately, this may be unavoidable (similar to iOS devices) and that the user will have to click the Audio Button to start the audio playing.

Have you tried a different browser (such as Chrome) yet to see if this makes a difference?

3,402

(11 replies, posted in Juicebox-Pro Support)

You have a stray ' character at the beginning of your <script> tag's 'src' value which is preventing the 'juicebox.js' file from being loaded.
Change:

<script src="'http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>

.. to:

<script src="http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>

3,403

(11 replies, posted in Juicebox-Pro Support)

On your web page, you currently use the following embedding code:

<script src="http://steinjanssen.nl/gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
baseUrl : 'http://steinjanssen.nl/Gallerij.html/',
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>

There are two problems with this.

(1) The 'juicebox.js' file is not located at the location specified in your <script> tag: http://steinjanssen.nl/gallery/jbcore/juicebox.js

(2) The baseUrl should point towards your gallery folder and there is no folder in your root directory named 'Gallerij.html'.

From your screenshot, it looks like some (but not all) of your gallery folder's contents have been uploaded to your root directory. If using the baseUrl method of embedding, you should upload the entire gallery folder (not just the contents) to your web server.

Try the following.
If your gallery folder is named 'gallery', then upload the entire gallery folder to your root directory (to your 'public_html' directory) and use the following embedding code in your web page:

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

3,404

(15 replies, posted in Juicebox-Pro Support)

I have now been able to take a look at your gallery and the configuration options it uses (although I do not have a Samsung S3 on which to test).

I made a test on 3G and WiFi on Android phone, I confirm that audio is playing with WiFi (but playAudioOnLoad doesn't work) I have to turn on Audio button.

Is the audio icon's status always correct, though? When you load the gallery, does the audio icon in the button bar show the 'Click to play audio' status and does a single click (rather than a double-click) play the audio? It sounds like your stock Android browser does not support playAudioOnLoad (like iOS devices) but that the Audio Button is displaying and functioning correctly.
Try a difference browser (such as Chrome) to see if this makes a difference.
Also, try setting expandInNewPage="AUTO" or expandInNewPage="TRUE" (rather than expandInNewPage="FALSE") to expand the gallery on a new page (rather than within the embedding page) to see if this makes a difference.

With 3G connection no audio at all.

Maybe this is due do with the fact that your audio tracks are approximately 7MB each and are taking longer to download over 3G. Does the gallery display OK over your 3G connection? If not, please see this FAQ for a solution.

I also notice that your gallery's Back Button icon is not visible.
The Back Button icon's color should be determined by the buttonBarIconColor but is overridden by the textColor (which in your gallery is fully transparent). Either change your gallery's textColor (so that it is not fully transparent) or remove this configuration option from your gallery's XML file and your gallery's Back Button icon should become visible.
(I have logged a bug report with the developers regarding this and it should hopefully be fixed in a future version.)

3,405

(9 replies, posted in Juicebox-Pro Support)

That's great! Thank you for posting back to let me know.

3,406

(6 replies, posted in Juicebox-Pro Support)

@wspollack

Thank you for your input. Any information which might help is appreciated.

@patrick7

With regard to my original suggestion of creating a gallery with JuiceboxBuilder-Pro and then doing the sorting dynamically via PHP when the gallery is displayed (rather than when it is created), here is an example which will display the images in the order in which they were taken (comparing the EXIF 'DateTimeOriginal' values for each image) from earliest to latest.

(1) In your gallery's embedding code, use a configUrl to point to a PHP file named 'sort.php':

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

(2) Create the PHP file named 'sort.php' with the following code:

<?php
header('Content-Type: application/xml');
$xml = simplexml_load_file('config.xml');
$arr = array();
foreach($xml->image as $img) {
    $arr[] = $img;
}
usort($arr, function($a, $b) {
    $a_exif_data = @exif_read_data($a->attributes()->imageURL);
    $b_exif_data = @exif_read_data($b->attributes()->imageURL);
    $a_exif_date = !empty($a_exif_data['DateTimeOriginal']) ? strtotime($a_exif_data['DateTimeOriginal']) : '';
    $b_exif_date = !empty($b_exif_data['DateTimeOriginal']) ? strtotime($b_exif_data['DateTimeOriginal']) : '';
    return $a_exif_date - $b_exif_date;
});
$dom_doc = new DOMDocument('1.0', 'UTF-8');
$dom_doc->formatOutput = true;
$settings_tag = $dom_doc->createElement('juiceboxgallery');
foreach ($xml->attributes() as $key=>$value) {
    $settings_tag->setAttribute($key, $value);
}
foreach($arr as $img) {
    $image_element = $dom_doc->createElement('image');
    foreach($img->attributes() as $key=>$value) {
        $image_element->setAttribute($key, $value);
    }
    $title_element = $dom_doc->createElement('title');
    $title_text = $dom_doc->createCDATASection($img->title);
    $title_element->appendChild($title_text);
    $image_element->appendChild($title_element);
    $caption_element = $dom_doc->createElement('caption');
    $caption_text = $dom_doc->createCDATASection($img->caption);
    $caption_element->appendChild($caption_text);
    $image_element->appendChild($caption_element);
    $settings_tag->appendChild($image_element);
}
$dom_doc->appendChild($settings_tag);
echo $dom_doc->saveXML();
?>

(3) Place the 'sort.php' file in your gallery folder (in the same directory as the gallery's 'config.xml' file).

This solution relies on the images in the gallery's 'images' folder having EXIF info.
Please note that JuiceboxBuilder-Pro strips EXIF info when resizing images so, if you are using JuiceboxBuilder-Pro to create your gallery, you may need to resize your images in an imaging program such as Adobe Photoshop (and ensure that the EXIF info is retained when saving them) before feeding them to JuiceboxBuilder-Pro and then deselect the 'Resize Images' checkbox (on the 'Images' tab) so that JuiceboxBuilder-Pro just copies the images (with EXIF info intact) into the gallery's 'images' folder.

I hope this helps.

Steven, the ability to sort by file creation (capture) date seems like an obvious feature to add.

Thank you for posting your suggestion in the Feature Requests thread. (It keeps all the suggestions together and ensures that they are not overlooked.)

3,407

(15 replies, posted in Juicebox-Pro Support)

here is the url to my website

At the moment, your web page is not loading for me at all. I have tried a couple of different browsers and the little icons in the browser tabs just keep spinning. I will try to view your gallery later. Once I can view your gallery, I might have a better idea as to the cause of your problem.

the gallery doesn't load on adroid phone

Please make sure that you are viewing your gallery using a wi-fi connection rather than 3G. Viewing a gallery using a 3G connection can break Juicebox if your provider uses content modification. If you are using a 3G connection, then please see this FAQ which provides a solution to the problem:
Why can't I view my gallery on a 3G mobile connection?

I made the test on Samsung S3 Adroid 4.3

Thank you for the information.

3,408

(6 replies, posted in Juicebox-Pro Support)

The only sorting options available within the JuiceboxBuilder-Pro interface are 'By File Name', 'By File Date' and 'Reverse' (from the 'Images -> Sort' drop-down menu at the top) and the ability to drag and drop a thumbnail (or a Ctrl+Click or Shift+Click selection of thumbnails) into a new position on the 'Images' tab.
There are no other automated methods of sorting images within a  gallery.

It would be possible to sort image's dynamically using a server-side scripting language such as PHP (no matter what order the images actually are in the gallery's XML file) but it would likely involve a lot of work to create such a script and knowledge of PHP would be required.
You would load the PHP script using a configUrl in your gallery's embedding code.
The script would then read the gallery's own static XML file, store the image tag data in an array, sort the array into whatever order you require (assuming that the property that the sorting relies on is available within PHP) and then output a new XML file on-the-fly.
This would be further complicated by the need to ensure that all associated thumbURL, linkURL, linkTarget, <title> and <caption> entries are still attached to their respective images.
It might also not be quite as fast as loading a gallery with a static XML file (especially in a gallery with a large number of images) but it might be an avenue you wish to pursue further.

Thank you for testing the demo galleries.
I have now notified the developers of this issue. Thank you for reporting it.

3,410

(15 replies, posted in Juicebox-Pro Support)

@aleckaram

Please post the URL to your gallery so that I can take a look.
Also, please let me know exactly which devices and browsers (and version numbers) you use.

Also, please bear in mind that playAudioOnLoad (the ability to start playing audio automatically when the gallery is loaded) is not supported on iOS devices.
(This is noted in the description of the playAudioOnLoad configuration option on the Config Options page.)

Thank you.

@mark44345

I notice that your gallery uses Juicebox-Pro v1.4.0.
Ordinarily, I would ask you to upgrade your gallery to ensure that any bugs that may have been present in previous versions but which have since been fixed are not contributing to your problem.
However, if the problem happens in our own demo galleries, then this is unlikely to help (although you could still upgrade your gallery if you like by following the instructions here).

I do not have a Galaxy S4 on which to test and would appreciate some help gathering some information.
Do all of our demo galleries which use Splash Pages on mobile devices exhibit the problem?
Lite Embedded: http://www.juicebox.net/demos/lite/embedded/
Pro Embedded: http://www.juicebox.net/demos/lite/embedded/
Splash Page: http://www.juicebox.net/demos/pro/splash/
Blog Style: http://www.juicebox.net/demos/pro/blog/
API Demo: http://www.juicebox.net/demos/support/api/
Top-Left Alignment: http://www.juicebox.net/demos/pro/top/

Also, could you please confirm that you are viewing the galleries using a wi-fi connection rather than 3G? (If your 3G provider uses content modification, then this can break Juicebox.)

Thank you for your help.

3,412

(1 replies, posted in Juicebox-Pro Support)

In the code you posted above, the showImageNumber="false" configuration option comes after the > character which closes the opening <juiceboxgallery> tag.
Change:

captionBackColor="rgba(0,0,0,0.1)">
showImageNumber="false"

... to:

captionBackColor="rgba(0,0,0,0.1)"
showImageNumber="false">

3,413

(3 replies, posted in Juicebox-Lite Support)

The Gallery Title can be positioned using the galleryTitlePosition (OVERLAY, TOP, ABOVE_THUMBS, NONE) and galleryTitleHAlign (LEFT, CENTER, RIGHT) configuration options. However, please not that these configuration options are available in Juicebox-Pro only. They are not available in Juicebox-Lite, the free version.) Both of these configuration options can be found in the General section of the Config Options page.

You can change the font used throughout the gallery using the galleryFontFace configuration option. Again, this is a Pro-only configuration option (which can also be found in the General section of the Config Options page).

With Juicebox-Lite (and Juicebox-Pro), you could change the font of the Gallery Title using HTML formatting as noted in this FAQ:
How do I add HTML formatting to the Gallery Title or Back Button?

For example, in JuiceboxBuilder-Lite, you could enter a Gallery Title such as the following:

<span style="font-family: Times; font-size: 20px; color: #ffff00;">Big times text</span>

3,414

(3 replies, posted in Juicebox-Lite Support)

What i was talking about is more like the "firstImageIndex" you have.

firstImageIndex is a Pro-only option (as you are aware).
The only other way to load a particular image in a gallery is to set enableDirectLinks="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) and then use a # in the URL. For example:
http://www.example.com/gallery/index.html#7 would load the gallery and initially display the seventh image.
However, enableDirectLinks is also a Pro-only configuration option.

what we wont is, when we are in the "Menthe" page, the slider is un the first page and we wont it to be in the page where the "Menthe" is show.

It sounds like what you want to do is embed your galleries in your existing web pages alongside your other content (essentially replacing your static images with galleries), rather than have the galleries displayed on pages of their own. If so then you should follow either the standard embedding instructions here or the baseUrl embedding instructions here. Using the baseUrl method of embedding allows you to keep each gallery in its own folder (and you would upload the entire gallery folders to your web server). I would recommend this method if you plan to embed multiple galleries as it helps to keep things organized on your web server.
(Embedding Juicebox-Lite galleries is exactly the same as embedding Juicebox-Pro galleries).

Do you have a demo of the pro version?

No. Please see this FAQ:
Can I try a trial version of Juicebox-Pro?

3,415

(3 replies, posted in Juicebox-Lite Support)

I like to know if it's possible to do a carousel slider, that when we click to a photo we go to a different webpage.

This is possible in Juicebox-Pro but not in Juicebox-Lite (the free version) by setting imageClickMode="OPEN_URL" and assigning URLs to the images via the linkURL entries on JuiceboxBuilder-Pro's 'Images' tab.

Can we also setup the image/page start in the slider?

I'm not quite sure what you mean but it sounds like you might want to use a Splash Page.
The Splash Page is a placeholder for the gallery which, when clicked, will open the gallery fullscreen.
Please see this sample gallery for a demonstration.
For more information about the Splash Page, please see here.
The Splash Page can be configured using these (Pro-only) configuration options. With Juicebox-Pro, you can force the Splash Page to always be displayed by setting showSplashPage="ALWAYS".

However, if all you want to do is choose the first image in your gallery, you can order the images in exactly the order you want on the 'Images' tab of JuiceboxBuilder-Lite (by dragging and dropping each thumbnail into a new position).

3,416

(3 replies, posted in Juicebox-Lite Support)

Yes. If you are creating your gallery with JuiceboxBuilder-Lite v1.4.2, the Gallery Title (from the 'Customize' tab) will be displayed in the browser's tab.
Otherwise, you can edit the gallery's HTML index page in a plain text editor and change the contents of the <title> tag in the <head> section.

Our demo galleries function very similarly in Safari 5.1.7 as they do in other browsers on my own PC.

If you are referring to the smoothness of the slide transition, then this may vary slightly from browser to browser and may also be somewhat dependent on the computer hardware being used. The fact that you are also loading the gallery in a virtual machine may also be a contributing factor.

One possible thing that can be done to maximize the smoothness of the transition is to ensure that imagePreloading="NEXT" (Juicebox-Pro only) or imagePreloading="PAGE" (default setting used by Juicebox-Lite) so that the next image in the gallery is already preloaded by the browser and ready to be displayed when selected by the user.
(Most of our demo galleries already use such settings but I thought I should point it out for anyone creating their own galleries and currently setting imagePreloading="NONE".)

Please also bear in mind that Safari is no longer being developed by Apple for PC and Safari v5.1.7 is now over two years old.
As you have noticed, modern browsers seem to provide a smoother image transition and I would recommend using a browser which is actively being developed (Chrome, Firefox, Opera, Internet Explorer).

3,418

(3 replies, posted in Juicebox-Pro Support)

when I maximize the browser on an iPad I still see the tool bar and menu.

Just to clarify, maximizing the browser will not, by itself, cause a gallery to go fullscreen (or full browser).
You will need to either click on a gallery's Splash Page or Expand Button to expand the gallery.

Actually I am also using an other provider, SlideshowPro, and their slideshow run on Safari in full screen.

I do not know how SlideShowPro generates a fullscreen effect in Mobile Safari.
According to the website I linked to above, Mobile Safari does not support the Fullscreen API.
As far as I am aware, the only way to hide the Mobile Safari toolbars on an iPad is to add the web page to the home screen (as in my previous post).

Try using another browser such as Chrome to see what difference this makes.

This forum thread regarding hiding the toolbars in Mobile Safari may be of interest (although it is not directly related to the iPad).

3,419

(1 replies, posted in Juicebox-Pro Support)

Enter your Flickr details (the same ones you use for your gallery) into the Flickr API Explorer.
The photo ids will be returned (along with other data) in the results box at the bottom of the page.

3,420

(3 replies, posted in Juicebox-Pro Support)

Mobile Safari does not support the Fullscreen API (which is used to expand a gallery fullscreen rather than just full browser). (A list of browsers which currently support the Fullscreen API can be seen here.)
On an iPhone (for example), the size of the browser window cannot be changed so the gallery is only actually expanding within the browser (but looks to be going fullscreen due to the browser window filling the screen).
If you maximize your browser window on your iPad and expand your gallery, it should look similar to the way it displays on an iPhone.

Also, you could try saving a bookmark of your gallery's web page to your home screen (load the web page in Mobile Safari, click the arrow icon on your browser's toolbar and select 'Add to Home Screen'). A new bookmark icon to your gallery's web page will be created on your Home Screen and clicking the icon should run the gallery as fullscreen as possible.

3,421

(1 replies, posted in Juicebox-Pro Support)

The problem seems to be originating from the following CSS in your '51924fc4b1f57.css' file (specifically line 6 - height: auto !important;):

img, video, .wp-caption {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    height: auto !important;
}

These CSS rules are applied to all images on your web page, including those in your Juicebox gallery. Juicebox has no option but to inherit such generalized CSS rules.

Try removing this code (or applying the CSS rules to only those elements on your web page which require them through use of CSS selectors) and your Juicebox gallery's imageScaleMode should work as expected.

3,422

(9 replies, posted in Juicebox-Pro Support)

Your gallery's code and files remain constant and in an ideal world, everyone should be able to see exactly the same thing when they view your web page.
If certain users are unable to see certain images in your gallery (in an unpredictable manner), then it sounds like their browsers may be timing out before being able to complete the loading of an image. The variables in the equation are the web server the gallery is hosted on, the user's internet connection and the route that the data takes to get from one place to another.
The only thing you may have any control over in such a scenario is your own web server so perhaps you could increase the server timeout values to see if this helps. Your web host might be able to help you with this if it is at all possible.
Also, try setting imagePreloading="NEXT" (rather than PAGE) to reduce the load on the user's browser when the gallery is initially loaded. (You may already be using this value but I cannot currently log in to see your galleries and check.)

3,423

(1 replies, posted in Juicebox-Pro Support)

Elements within a gallery cannot be selected. This is by design to prevent areas of the gallery being highlighted with a blue overlay by the browser when a user clicks throughout the gallery.

One possible solution to the problem might be to display the current image's title and/or caption in a container outside the gallery using the Juicebox-Pro API (specifically the onImageChange() event and the getImageInfo() method). Here is an example. Just create a sample gallery with JuiceboxBuilder-Pro and use the code below as the gallery's HTML index page.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '600',
        galleryHeight: '400'
    });
    jb.onImageChange = function(e) {
        var index = e.id;
        var info = jb.getImageInfo(index);
        var title = info.title;
        var caption = info.caption;
        document.getElementById('text').innerHTML = title + '<br />' + caption;
    };
    </script>
    <div id="juicebox-container"></div>
    <div id="text"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

The current image's title and caption are displayed in a container below the gallery (as well as within the gallery itself) and can be selected from this container.

3,424

(2 replies, posted in Juicebox-Pro Support)

As you have noticed, this will not work when you use a baseUrl.
The linkURLs were designed to be genuine URLs and Juicebox was not designed to run JavaScript instead.
This takes advantage of the ability to run Javascript from a hyperlink as follows:

<a href="javascript: run_function();">Content</a>

If you use a baseUrl, Juicebox will prepend it to the 'href' attribute in the dynamically generated hyperlink resulting in a broken JavaScript call.
There is nothing that can be done to circumvent this behavior. The only way it will work is if you do not use a baseUrl.

3,425

(3 replies, posted in Juicebox-Pro Support)

it seems like since they are creating them they would have some way

Unfortunately, this is not always the case. Not all features of Flickr are available via their API.
However, although there is no indication on the page I linked to in my post above that their API supports the Large 1600 and Large 2048 sizes, I have entered a Photo Id into the flickr.photos.getSizes Flickr API Explorer and it returns the two new sizes with size identifiers '_h' (for Large 1600) and '_k' (for Large 2048) so it looks like it might be possible to request these sizes via their API. (The current size identifiers of Medium, Large and Original are '_m', '_l' and '_o' respectively.)

Perhaps you could suggest this for a future version of Juicebox in the Feature Requests forum thread.
I do not know for sure if it is possible and whether or not the developers will incorporate it into a future version but posting there keeps all the feature requests together and ensures that they are not overlooked.

Thank you.