1,951

(3 replies, posted in Juicebox-Pro Support)

Sorry for hijacking this thread. I could not see where I could start a new one.

No problem. I've split your post into a new thread.
The 'Post new topic' link is just above the second blue bar at the right-hand side of the page (once you've selected the 'Juicebox-Pro Support' or 'Juicebox-Lite Support' forum).

I need to build an index of galleries page.

(1) On Showkase's 'Pages' tab, click 'New Page', create a Gallery Index Page and click 'Save'.
(2) Now, still on the 'Pages' tab, just drag and drop your Juicebox Gallery Pages (drag and drop the page names in the tree on the left hand side) onto the Gallery Index Page (in the order you want their thumbnails to be displayed).
(3) Click 'Save' and 'Publish'.

Each Juicebox Gallery Page listed under the Gallery Index Page will be represented by a thumbnail image.
By default, the thumbnail image will be the first image in the gallery. If you like, you can change this to be any other image from the gallery by editing the Juicebox Gallery Page, going to the 'Images' tab and selecting a new image in the 'Index' column. Be sure to republish your site after making this change.

Incidentally, I notice that you have a large logo that is taking up a little more that the regular header height and is pushing your Juicebox galleries down their respective pages.
You can compensate for this by going to 'Site -> Customize Theme -> Gallery Pages' and entering a negative pixel value (e.g. "-100") in the 'External fit px' input field.
This will reduce the height of each gallery by the amount you enter and all your galleries will be able to be seen in full (without the need for vertical scrolling) regardless of the height of the user's browser window.

I hope this helps.

1,952

(1 replies, posted in Juicebox-Pro Support)

It would not be possible to automatically remove the preceding number and period before the filename in JuiceboxBuilder-Pro.
You'd need to go to 'Images -> Titles -> Use File Name' (or 'Images -> Captions -> Use File Name') and then manually edit each image title or caption (on the 'Images' tab).

It would be much easier to create the gallery (with the full filenames in use as the image titles or captions) and then edit the gallery's 'config.xml' file in a text editor which supports regular expression search and replace, like Notepad++. You could then remove the preceding number and period from all image titles and captions in a single search and replace action. You could even load up several 'config.xml' files and run the search and replace throughout multiple files at once.

If using Notepad++, here's what you could do.

(1) Open your gallery's 'config.xml' file(s).
(2) Go to 'Search -> Replace...' from the drop down menu at the top (Ctrl+H).
(3) Select 'Regular expression' as the 'Search Mode'.
(4) Enter CDATA\[[0-9]+\. in the 'Find what' input field.
(5) Enter CDATA[ in the 'Replace with' input field.
(6) Click the 'Replace All in All Opened Documents' button.

Including 'CDATA' in the search will handle both image titles and captions, ensuring that the imageURL and thumbURL entries are left unmodified.

Please note that using Notepad++ is just a suggestion (not a recommendation).
Notepad++ is free and I use it myself but other text editors are available.
However, if you use a different text editor, it may use a different regular expression engine and the syntax may differ from the search string in #4 above.

Also, be sure to make a backup of your gallery's 'config.xml' file before you edit it (just in case something goes wrong and you need to reinstate it at a later date).

1,953

(1 replies, posted in Juicebox-Pro Support)

I get an error with a character ø in the name of a folder

Are you referring to a folder that you are trying to save the gallery to (or a folder that a source image is in)?
What error are you getting?

You should be able to use the ø character in a gallery (although it might not be wise to do so).

As a test, I've just successfully created a gallery with JuiceboxBuilder-Pro v1.5.0 (on a Windows 10 PC) using an image with a ø character in its filename (from a folder with a ø character in its name) and saving the gallery to a new folder with a ø character in its name. The gallery is saved correctly, uploads to my web server correctly (via Filezilla), displays correctly and the the ø character also appears in the image caption correctly.

However, as image filenames and gallery folder names form parts of URLs when uploaded to a web server, it would be safer to use only web-safe characters. Please see section 2.3 of this document for details: https://tools.ietf.org/html/rfc3986#section-2.3

Characters that are allowed in a URI but do not have a reserved purpose are called unreserved.  These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.

You should have no problems (with JuiceboxBuilder-Pro, your web server, FTP software or browsers) when using any or all of these unreserved characters.

I'd stick with web-safe characters for file and folder names and keep accented and special characters for image titles and captions.

1,954

(7 replies, posted in Juicebox-Pro Support)

That's great!
Thank you for letting me know.

I notice that your web pages now start correctly with a Doctype Declaration so it certainly looks like your cookie plugin was responsible for inserting the <head> and <link> tags at the top of your web pages (which seems to have been the root of the problem.).

I'm glad to hear that everything's working as it should now.

I notice that your gallery has a height of 88%. I think it would be difficult to get a clean working solution (with either CSS or JavaScript) using such a gallery height. The suggestions below use a gallery height of 100% so that the gallery fills its container and when JavaScript is used to determine the height of the container, you know that the gallery is the same height.

Take a look at the Using a Resizable Gallery with a Header support section.
The View Resizable Gallery with Top Menu Example has a header and a footer (both with fixed heights) and the gallery takes up the remainder of the available space (no matter what size the browser window is) without any scrollbars.
You can view the source of the web page in your browser and copy/modify the code to suit your own needs (removing the footer, changing the header content and swapping the sample gallery with your own).
The example also switches between galleries (something you might not need) and uses an external CSS file.
Here is a single file solution that you might like to use. (The code should be fairly easy to follow.)
To see it in action, create a sample gallery with JuiceboxBuilder-Pro (just use all default settings) and use the following code as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                background-color: #222222;
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                height: 50px;
                padding: 10px 0px;
                text-align: center;
                width: 100%;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            function doLayout() {
                var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height());
                var headerHeight = parseInt($('#header').outerHeight(true));
                var galleryHeight = windowHeight - headerHeight;
                $('#wrap').height(galleryHeight);
                if (jb) {
                    var galleryWidth = parseInt($('#wrap').innerWidth());
                    jb.setGallerySize(galleryWidth, galleryHeight);
                }
            }
            $(document).ready(function() {
                doLayout();
                $(window).resize(doLayout);
                jb = new juicebox({
                    containerId: "juicebox-container"
                });
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="header">
            <span>Header</span>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

1,956

(5 replies, posted in Juicebox-Pro Support)

For anyone else reading this thread and experiencing similar issues, the problem was caused by custom rewrite rules in an .htaccess file on the original poster's web server.
The solution was to create a new .htaccess file inside the gallery folder that turned off all redirects using the following code:

<IfModule mod_rewrite.c>

#Disable rewriting
RewriteEngine Off

</IfModule>

You're welcome!
I'm glad you've got it working.
Thank you for letting me know.

1,958

(8 replies, posted in Juicebox-Pro Support)

OK, I understand. This issue has now been officially logged as a bug and it will be addressed by the developers in due course.
Thank you for your patience.

By default (using the regular embedding code), Juicebox will look for a file named 'config.xml' in the same directory as the page containing the gallery's embedding code. (Your gallery structure does not have a 'config.xml' file in this location.)

If you move or rename this file, then you can point towards it using a configUrl option in your embedding code.
When using a configUrl, all paths in the 'config.xml' file will still be relative to the embedding code page.

As you have uploaded an entire Juicebox gallery (your 'Juicebox' folder) to your web server, you can point towards this folder using a baseUrl option. Please see here for details.
When using a baseUrl, all paths in the 'config.xml' file will be relative to the baseUrl so there is no need to make any modifications to any gallery files.

Just change your gallery's embedding code to the following (add the baseUrl entry pointing towards the gallery folder) and all should be well.

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

Short descriptions of configUrl and baseUrl can be found in the Embed Options section of the Config Options page.

1,960

(8 replies, posted in Juicebox-Pro Support)

Thank you for reporting this problem.
I have notified the developers.

It might help if you were to change useFullscreenExpand="TRUE" to useFullscreenExpand="FALSE".
I realise that this is not ideal (as it disables the fullscreen expand experience) but it might be a suitable workaround until the issue is addressed.

1,961

(5 replies, posted in Juicebox-Pro Support)

Please check your email. I have sent you a message.
Once I am able to see your gallery, I should hopefully be able to help further.
Thank you.

1,962

(6 replies, posted in Juicebox-Pro Support)

Thank you for reporting this problem.
I have logged a bug report with the developers and hopefully it will be fixed in the next version.
Unfortunately, there's no workaround for this issue (the Email Button's 'body' content is not use-changeable and cannot be altered to something that Edge and IE11 will accept) and we might need to just wait until the bug is fixed.

1,963

(7 replies, posted in Juicebox-Pro Support)

On my PC I found the older versions of my galleries, also there the failure is present:
http://www.reisedampfer.de/app595898963 … uegge-2011

This web page also has the code:

<head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

... before the Doctype Declaration:

<!DOCTYPE html>

... (and two opening <head> tags).

I have not been able to exactly replicate your problem but when I remove the Doctype Declaration from a test gallery page of my own, the gallery does not expand correctly (when useFulscreenExpand="TRUE") so it certainly looks like the incorrect location of the Doctype Declaration on your own page may be the cause of your problem.

1,964

(1 replies, posted in Juicebox-Pro Support)

Ordinarily, configuration options can be set in either the gallery's XML configuration file or the embedding code.
Options set in the embedding code take precedence over options set in the XML configuration file. (Please see the Setting Config Options support section for details.)

However, galleryWidth and galleryHeight should be set in the embedding code so that the gallery can be sized correctly in the web page as soon as possible (before the configuration file is parsed).
It is noted (in their descriptions in the Configuration Options page) that these options "Must be specified in the embed code.".

They are also included in the XML configuration file so that if the gallery is opened in JuiceboxBuilder for editing, the application can set the correct values in the interface. JuiceboxBuilder reads the gallery's XML configuration file (rather than the embedding code) to find out all the current gallery settings.

1,965

(5 replies, posted in Juicebox-Pro Support)

Please post the URL to your gallery's web page so that I can take a look at the problem for myself.
Once I am able to see the problem live on your web server, I should hopefully be able to determine the cause of the problem and propose a solution.
Thank you.

In the meantime, please check that:
(1) You are using the latest version of Juicebox-Pro (v.1.5.0) to ensure that any bugs from previous versions are not contributing to your problem. If necessary, please see the Upgrading Juicebox support page.
(2) You have uploaded the complete 'jbcore' folder (including the 'full.html' file) to your web server.
(3) The permissions of all the gallery files and folders on your web server are not too restrictive. Default permissions of 644 for files and 755 for folders should be fine. You should be able to check and change permissions using an FTP program such as Filezilla or via your web hosting account's online file manager.

1,966

(1 replies, posted in Juicebox-Pro Support)

When you first view your gallery on a mobile device, what you are seeing is the Splash Page.

The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window) and may may too small to be usable.
When the user clicks or taps the Splash Page, the gallery is expanded to fill the user's browser window (giving the images more space to be displayed).
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.

You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Alternatively, you can force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').

If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.

By default, the Splash Page uses the first image in the gallery and the image is resized to fill the Splash Page (cropping may occur).
As the Splash Page image can be though of as representing the gallery as a whole, you could create and use an image specifically for the Splash Page (it does not need to be used in the gallery itself). You can set an image for the Splash Page using the splashImageUrl configuration option.
As your gallery is responsive (its size will depend on the size of the user's browser window) and the Splash Page image is cropped to fill the gallery area, you might like to choose an image which would work well when dynamically cropped to different sizes.

1,967

(6 replies, posted in Juicebox-Lite Support)

That's really strange. I don't think I've ever heard of anyone being able to use the Open Gallery button but not the New Gallery button. I'm really not sure what could be causing your problem.
Maybe there is an issue with the functionality of just the button on your system. Try going to 'Gallery -> New...' from the drop down menu at the top or use the keyboard shortcut 'Ctrl+N'. These are alternate ways to start generating a new gallery.

... can you send me a file or folder to click on that will allow me to customize it?

If the Open Button seems to be working, then you should hopefully be able to open the sample 'web' gallery from the Juicebox-Pro zip file.

The 'web' gallery is a sample gallery with all default settings that you can hopefully use as a template to start creating your own gallery. (Just delete the two sample images and add your own on the 'Images' tab, customize the gallery with the available configuration options on the 'Customize' tab and save the gallery on the 'Publish' tab.)

Unzip the 'juicebox_pro_1.5.0.zip' file and you will find the 'web' gallery in the 'juicebox_pro_1.5.0/web/' location.
This is the folder that you should navigate to and select after clicking the Open Gallery button.

1,968

(7 replies, posted in Juicebox-Pro Support)

The solution expandInNewPage="TRUE" would be ok for me, but the gallery did not open in full screen.

This will expand the gallery to fill the browser window rather than the entire screen but because the gallery is expanded on a page of its own, it will not be affected by any custom CSS and should, therefore, display correctly.

Where can I get the older version 1.4.4.2? I have deleted this version on my laptop, perhaps I got it still on my PC.

Unfortunately, older versions of Juicebox-Pro are not available. Download links always point towards the current version.

Your problem is almost certainly due to either HTML errors on your web page or custom CSS which the gallery might be inheriting.

Please try the following:

(1) Make sure that your web page has a valid Doctyle Declaration at the very top of your web page (with nothing, not even any whitespace, above it). Currently, there are a <head> and a <link> tag above your Doctype Declaration (<!DOCTYPE html>). Without a valid Doctype Declaraion in the correct place, browsers will not know what set of standards the code on your web page should conform to and this can cause unpredictable results.

(2) With a valid Doctype Declaration in place, check your web page for any other HTML errors using the W3C Markup Validation Service and fix any errors reported.

(3) Check your web page's CSS for any rules which apply to all instances of certain HTML tags (such as <div>, <img> or <p>) to be sure that your gallery is not inheriting any of your custom CSS. If you find any such generalized CSS rules, target only those elements on your web page which require them using CSS id or class selectors.

(4) Also, I notice that you are embedding your gallery into a container with an id of '1'.
The HTML 4 specifications state that an id should begin with a letter (a-z or A-Z) rather than a digit.
The HTML 5 specifications are more relaxed but as you do not currently have a Doctype Declaration at the very top of your web page (you have a <head> and a <link> tag above it), browsers may not know what set of standards the code on your web page should conform to and using a single digit as an id might be causing a problem. Try embedding your gallery into a container named 'juicebox-container' instead.
Change:

containerId: "1",

.. and:

<div id="1">

... to:

containerId: "juicebox-container",

... and:

<div id="juicebox-container">

The best solution to #4 would be to fix #1 (ensure that the HTML 5 Doctype Declaration is the very first line of code on your web page with nothing above it).

You've welcome!
I've glad you've been able to resolve your problem.

There are no configuration options available to change the font size of image titles and captions.

However, you can style individual image titles and captions using HTML formatting as noted in this FAQ:
How do I add HTML formatting to image captions and titles?

Otherwise, you can change the size of all image titles and/or captions at once using CSS such as:

/* IMAGE TITLE */
.jb-caption .jb-caption-title {
    font-size: 20px !important;
}

/* IMAGE CAPTION */
.jb-caption .jb-caption-desc {
    font-size: 18px !important;
}

/* IMAGE NUMBER */
.jb-cap-frame .jbac-number {
    font-size: 12px !important;
}

You could add this CSS to the end of your gallery's 'jbcore/classic/theme.css' file or wrap it in <style type="text/css"> ... </style> tags and add it to the end of your gallery web page's <head> section.

1,971

(7 replies, posted in Juicebox-Pro Support)

First of all, try fixing the HTML errors on your web page. HTML errors can cause problems when web pages are rendered and some browsers can be more tolerant towards errors than others.
Your web page starts with the following code:

<head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><!DOCTYPE html>
<!-- jsn_boot_pro 3.0.2 -->
<html lang="de-de" dir="ltr">
<head>

The Doctype Declaration (<!DOCTYPE html>) should be at the very top of the document (before anything else) and there should be only one opening <head> tag.
Try changing the code above for:

<!DOCTYPE html>
<html lang="de-de" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Next, check your web page for any other HTML errors using 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.

Hopefully this will help. If not, then the problem may be due to custom CSS on your page conflicting with the gallery's own CSS. If this is the case, then it might help to expand the gallery on a page of its own (where it will not be affected by any custom CSS) by setting expandInNewPage="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

The code above just took a minute to come up with as an alternative to my previous suggestion.
As long as you've been able to resolve your problem with a solution that you're happy with, that's great.

Unfortunately, the glitch with JuiceboxBuilder (whereby an error can be generated if the resize image dimensions are too large) has not yet been fixed but it has been logged as a bug and should be addressed by the developers in due course.
In the meantime, if you need to have large images in your gallery and find that JuiceboxBuilder is unable to resize them as required, then you could perhaps manually resize your images in an imaging program such as Adobe Photoshop before feeding them to JuiceboxBuilder and deselect the 'Resize Images' checkbox on the 'Images' tab (so that JuiceboxBuilder simply copies the images across to the output gallery folder).

1,973

(1 replies, posted in Juicebox-Pro Support)

Is there a way to have two different juicebox layouts on the same website?

Yes. Please see the Embedding Multiple Galleries support section for details on embedding multiple galleries on separate HTML pages or on one HTML page. (Each gallery can have a unique layout.)

Is there a way to add the juicebox gallery in to a CSS background div?

You would just need to embed a gallery into a web page as normal (following the instructions here) and overlay whatever content you like on top of the gallery using CSS (to position the custom content and stack it on top of the gallery using a high enough z-index).
Please note that Juicebox was not designed with this in mind so you might run into problems that need to be tackled as you encounter them.
However, something like the following might work. To see it in action, create a sample gallery with JuiceboxBuilder-Pro (just add a few images, don't worry about the configuration options) and use the following as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #wrap {
        position: relative;
    }
    #juicebox-container {
        position: absolute;
        top: 10px;
        left: 10px;
    }
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 600px;
        height: 400px;
        z-index: 9999;
        color: #ff0000;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '600',
        galleryHeight: '400',
        autoPlayOnLoad: 'TRUE',
        buttonBarPosition: 'NONE',
        enableLooping: 'TRUE',
        screenMode: 'LARGE',
        showAutoPlayStatus: 'FALSE',
        showImageNav: 'NEVER',
        showImageOverlay: 'NEVER',
        showThumbsOnLoad: 'FALSE'
    });
    </script>
    <div id="wrap">
        <div id="juicebox-container"></div>
        <div id="overlay">Custom content goes here.</div>
    </div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

My solution works OK but it is not as efficient as it could be.
As you've noticed, on a retina display, both images are loaded (and the the high resolution image can be seen to load after the low resolution image).

If would be more efficient to always load only one image (depending on the device pixel ratio) and from a visual standpoint, you would not see one image being loaded on top of another.
You could initially set backButtonText="" and use something like the following:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        backButtonPosition: 'TOP',
        backButtonText: '',
        backButtonURL: 'http://www.example.com/index.html'
    });
    jb.onInitComplete = function() {
        var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
        $('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Just a small tweak to make things a little more streamlined.

1,975

(6 replies, posted in Juicebox-Lite Support)

Please try the following:

(1) Uninstall JuiceboxBuilder-Lite.
(Delete the 'JuiceboxBuilder-Lite' file from the Applications folder and empty your Trash.)

(2) Manually delete the following folder from your hard drive:
/Users/your_username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Lite

(3) Search your hard drive for the term 'JuiceboxBuilder-Lite' and delete all entries found.

(4) Reinstall JuiceboxBuilder-Lite following the instructions here.

I know you said that you have already uninstalled and reinstalled the application and deleted files from the Library but I do not know if you have deleted the 'ELS' folder noted in Step #2 above (and manually removing this folder has been known to help certain users who have experienced similar issues).

Hopefully this will help.