3,226

(27 replies, posted in Juicebox-Pro Support)

Juicebox generates valid HTML 5 code so if you are getting errors on your web page relating to Juicebox code, please try using the HTML 5 Doctype Declaration on your web page (and ensure that the other code on your web page is HTML 5 compliant).

<!DOCTYPE HTML>

I do not see the problem in any browsers on my PC.
Please take a look to see if the problem occurs in this test gallery. It uses the same configuration options that your own test gallery uses but the web page itself uses the HTML 5 DTD and is created by JuiceboxBuilder-Pro with no custom code on it.
If you still see the problem in this gallery, then it may be due to an incompatibility between certain configuration options and Safari 8 (perhaps imageTransitionType="CROSS_FADE" or imageTransitionTime="1.5"). Try using the default values of imageTransitionType="SLIDE" and imageTransitionTime="0.5" to see if this makes a difference.
Please let me know how you get on so that I can log a bug report with the developers if necessary. Thank you.

3,227

(4 replies, posted in Juicebox-Pro Support)

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

3,228

(27 replies, posted in Juicebox-Pro Support)

@gfs

Can you confirm if possible, that this is NOT a Juicebox issue?

Do you see the problem with any of our demo galleries on this web page?
If so, then please let me know.
If not, then it is possible that your problem is unique to your own web page (and the code within it).

Using W3C validation service throws up a LOT of errors with my code ... most of which seem to be in Juicebox's embed code.

Juicebox generates valid HTML 5 code and your embedding code looks OK. The problem you are seeing probably originates from putting your embedding code inside <p> and <span> tags, some of which also seem to have no closing </p> tag. (Inline elements such as <p> and <span> tags not contain block elements such as <div> tags.)

I would start by fixing the errors on your web page. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.
Even if this does not solve your problem, we can at least then eliminate HTML errors from being the cause of your problem.

Most of the errors on your web page seem to be due to stray end tags and unclosed elements.
Unfortunately, not being familiar with your web page's layout and with your web page's code not being indented, it is hard (at a glance) to see where containers should be opened and closed.

Try not to be overwhelmed by the errors on your web page. (There are not actually that many but most of them seem to be related to the layout rather than syntax errors or typos.) Just go through them one by one. Each one you fix is a step closer to a valid web page. If you see an error such as "Stray end tag.", then it is possible that there may be no corresponding opening tag and the stray end tag can just be removed. If you see an error such as " Unclosed element.", then try to figure out what it is you want within the tag and that should lead you to where the closing tag should be.

I hope this helps.

3,229

(4 replies, posted in Juicebox-Pro Support)

First of all, please ensure that you are viewing your web site over a wi-fi connection and not 3G/4G.
If using 3G/4G, then please see this FAQ which offers a solution.
Why can't I view my gallery on a 3G mobile connection?

Also, your gallery uses the Juicebox-Pro v1.4.2 JavaScript file but the Juicebox v1.2.0 CSS file.
Try replacing your gallery's current 'jbcore' folder with a fresh version from your Juicebox-Pro download zip file ('juicebox_pro_1.4.2/web/jbcore/') to ensure that all files are from the same version of Juicebox-Pro.

3,230

(7 replies, posted in Juicebox-Lite Support)

That is correct. imageScaleMode is a Pro configuration option. I should have made that clear in my post above. Sorry for any confusion.
For reference, all Lite configuration options can be found here. (All configuration options on the Config Options page are supported by Juicebox-Pro.)

3,231

(7 replies, posted in Juicebox-Lite Support)

BUT what I don't unterstand is the relation of the gallery and the picture measures to each other. What's the logic behind it and how can I calculate the perfect gallery size according to my already converted pictures?

Within a gallery, Juicebox reserves space for the thumbnails and the remainder is used for the image area. This is true no matter what the dimensions of the gallery are.
By default, Juicebox then scales the main image to fit within the image area as large as possible without cropping but whilst respecting the image's aspect ratio.

In your test gallery, image #4 is a different shape to image #3.

If the image has a different aspect ratio to the image area, then the only way for Juicebox to fill the image area with the image would be to set imageScaleMode="FILL" (although, for image #4 in your gallery, this would result in the left and right edges of the image being cropped).

Another possible solution to reduce the space above and below image #4 in your gallery would be to reduce the gallery's height so that the aspect ratio of the image area within the gallery matches the aspect ratio of your images.

Please see this FAQ for further information.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

3,232

(7 replies, posted in Juicebox-Lite Support)

Then I published it and now it covers parts of my navigation.

It looks like your gallery's embedding code should be within your <div id="content" class="vier"> ... </div> container. If you move the entire embedding code to within this container, then the gallery should be positioned to the right of your side menu. However, you may need to change the dimensions and/or the position of your <div id="content" class="vier"> ... </div> container in your 'ruthhahn.css' file. At the moment, the div may be too low down on your web page and have a limited width. Check (and change, if necessary) the following code in your 'ruthhahn.css' file.

div#content {
    position: absolute;
    top: 156px;
    left: 270px;
    height: 400px;
}

div#content.vier {
    width: 528px;
}

There is also an example of using a side menu in the Using a Resizable Gallery with a Header support section. You could perhaps copy the sample web page's code (view the source of the page in your browser) and swap the content of the side menu for your own navigation menu.

What I look to achieve is exactly "Juicebox Lite Embedded Example".

It you really want to exactly replicate the layout of the Juicebox Lite Embedded Example, you can copy the HTML code of the page (view the source of the page in your browser) and swap the sample gallery's embedding code for that of your own gallery.

3,233

(4 replies, posted in Juicebox-Pro Support)

The most likely way to have a third-party editor installed would be through the use of a plugin (or, less likely, through a theme).
It seems unlikely that WP-Juicebox would detect CKEditor or FCKeditor unless such an editor was being used. If you have tried any third-party editors in the past, then perhaps they have not been fully deactivated and uninstalled, resulting in some files begin left behind that WP-Juicebox is detecting.

If you have already checked your plugins and would like me to investigate further, then I would be happy to do so but I would need access to your WordPress installation and web server. If you are agreeable to this, then please let me know and I will send you an email address where you can forward your WordPress and FTP login details on to me. Thank you.

3,234

(7 replies, posted in Juicebox-Lite Support)

The Juicebox Lite Embedded Example uses all default settings (except for changing the gallery's dimensions, background color and setting a Gallery Title and Splash Page Description).

If you let me know exactly what you are looking to achieve (and what you currently have), then perhaps I can help further.
Please post a URL to your gallery's web page so that I can see what your gallery currently looks like. Thank you.

The sort argument within the Flickr API (which is what Juicebox uses to fetch the images from Flickr's servers) supports only the values I mentioned above (and listed on the Flickr API support page).
One way to order Flickr images alphabetically would be to display a Flickr Set (via the Juicebox-Pro flickrSetId configuration option) and to order the images within the set alphabetically within Flickr itself (following the instructions here).

I'm glad that you have been able to resolve your problem.
Thank you for posting back to let me know.

FYI, the flickrSort option within Juicebox-Pro supports all possible values of the Flick API's sort argument (as noted on this Flickr web page), namely date-posted-asc, date-posted-desc, date-taken-asc, date-taken-desc, interestingness-desc, interestingness-asc, and relevance.

3,237

(4 replies, posted in Juicebox-Pro Support)

This error message should be displayed only if a variant of CKEditor or FCKeditor is detected (and WYSIWYG mode is not selected). (It should not be displayed when using the defautl TinyMCE editor.)
Please check that you do not have any plugins installed and activated which use CKEditor or FCKeditor.

If you are creating or editing your gallery in JuiceboxBuilder-Pro, try the following (selecting a different value before going back to select 'NONE').

(1) Go to 'Images -> Titles -> Use IPTC Title'
(2) Now go to 'Images -> Titles -> Use None'

(3) Go to 'Images -> Captions -> Use IPTC Caption'
(4) Now go to 'Images -> Captions -> Use None'

If you just want to disable all image titles and captions, then set captionPosition="NONE" in JuiceboxBuilder-Pro's 'Customize -> Caption' section.

3,239

(6 replies, posted in Juicebox-Pro Support)

@kilooloogung

Just in case you are not aware, Juicebox-Pro has built-in support for a Back Button (without the need for any manual coding) which can be either text or an icon.
Please see here for the available Back Button configuration options.

@wspollack

Unfortunately, what I think max wants is to add a button to the upper-right group of buttons, which I gather isn't possible.

That's right. It is much easier to overlay an HTML element on top of a gallery (which will always be in exactly the same place on the web page), as kilooloogung has done, than to try to introduce a new custom button within the gallery's own Button Bar (which would be fraught with problems, especially without access to the Juicebox source code).

Any options you enter into a gallery's Pro Options text area are written to the gallery's XML file and used by Juicebox when the gallery is displayed. The problem may be with either the flickrSort entry or with Flickr itself but without seeing the exact code you use and your gallery, it will be hard to tell.

Please check the following.
(1) In your email, you say you have tried:

flickrSort = “DATE-POSTED-ACS”

Try using this instead:

flickrSort="DATE-POSTED-ASC"

... using standard double-quotes around the value, no spaces around the '=' character and using ASC instead of ACS.

(2) Make sure that you are not using/displaying a Flickr Set or Group. flickrSort does not work for set and group searches which always use the Flickr set display order. To change the order of images in a Flickr set, check here.

(3) Make sure that your WP-Juicebox has successfully been upgraded to Juicebox-Pro. flickrSort is a Pro configuration only and will be ignored by Juicebox-Lite. Instructions for upgrading WP-Juicebox from Lite to Pro can be found here.

(4) Make sure that you do not also set randomizeImages="TRUE" in your gallery's Pro Options text area.

Hopefully one of the suggestions above will help.
If not, please post back with the URL to your gallery so that I can take a look for myself and help further.

3,241

(1 replies, posted in Juicebox-Pro Support)

It only displays the first image (slightly cropped). No small screen mode or splash page.

What you are describing actually sounds like the Splash Page (which is displayed by default on small screen devices).
For more information on Screen Modes and the Splash Page, please see here.

First of all, I would recommend using a fixed pixed height for your gallery. If you use a percentage height as you currently do (80%), you need to ensure that the parent container(s) of the gallery have heights specified via CSS, otherwise Juicebox may not be able to calculate its own height (it needs to know what its height should be 80% of). This can be difficult to control in a WordPress environment where the gallery's parent containers are generated by the theme. (This is why the default height for a gallery created by WP-Juicebox is 600px.) Please see this note regarding Using Percentage Heights.

Try setting showSplashPage="NEVER" in your gallery's Pro Options text area to embed the gallery directly into the page in Small Screen Mode instead of the Splash Page.
Alternatively, try setting screenMode="LARGE" to force the gallery to be displayed in Large Screen Mode in all browsers and on all devices. (By default, Large Screen Mode does not use the Splash Page. The Splash Page will be used in Large Screen Mode only if showSplashPage="ALWAYS".)

Also, after making any changes, please be sure to clear your browser's cache before reloading your gallery's web page to ensure that your browser is fetching and using the most recent versions of your gallery files from your web server.

3,242

(1 replies, posted in Juicebox-Pro Support)

The solution to your problem probably relies on knowing which image is currently being displayed (so that you can act upon it and display the relevant discussion elsewhere on the page).
You can do this using the Juicebox-Pro API as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
// Give your 'juicebox' object a variable name (in this example 'jb') so that you can refer to it later
var jb = new juicebox({
    containerId: 'juicebox-container'
});
// onImageChange is fired each time a new image is selected
jb.onImageChange = function(e) {
    // e.id is the  index number of the current image being displayed (index starts at 1 for first image)
    var imageIndex = e.id;
    // First image is selected
    if (imageIndex == 1) {
        // Do something...
    }
    // Second image is selected
    if (imageIndex == 2) {
        // Do something else...
    }
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps to get you started on your project.

@RajabNatash

I notice that you have copied your posts from your Drupal forum thread to this thread. Thank you for posting your findings in this forum.

The bug reported by the original poster (whereby scrolling down a page with an embedded gallery jumps to the top) has been addressed and will be fixed in the next version of Juicebox (although I do not know when it will be released).
If you would like to be notified when new versions are released, then please join the mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.

The developers are also aware that 'minimal-ui' has been removed from iOS 8 and this will be taken into account in the next version of Juicebox.

3,244

(6 replies, posted in Juicebox-Pro Support)

Juicebox-Pro is very flexible (with well over 100 configuration options, an API so that the embedding page can interact with the gallery and the ability to use custom icons, themes, fonts and preloader) but it is not possible to add a custom button to the gallery's own Button Bar.
One possible workaround would be to create a custom button on your web page (alongside your gallery) and use the API to fetch information about the currently displayed image (for example to be sent to a social media platform via a share URL).

I ask for refund then, what is the process for it?

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

No problem.
I'm glad it was an easy fix!

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

3,247

(14 replies, posted in Juicebox-Pro Support)

It makes it so the gallery can't be previewed in Lightroom but that really makes no difference at all.

Use the following code for the gallery to be displayed in the live preview window. The 'directory' value will be written to the gallery's 'config.xml' file only when the gallery is exported (and not in preview mode).

local dir = ""

for index, value in ipairs(pro_options) do
    if value ~= "" then
        local attrs = explode("=", trim(value), 2)
        if table_length(attrs) == 2 then
            local key = escape(attrs[1]:gsub("%s+", ""))
            local value = escape(trim(attrs[2]):gsub("^([`'\"])(.-)%1$", "%2"))
            if key:lower() == "directory" then
                if mode ~= "preview" then
                    dir = value:gsub("/*$", "") .. "/"
                end
            elseif not lite_options[key:lower()] then
                write("\n" .. key .. "=\"" .. value .. "\"")
            end
        end
    end
end %>
>

<% for index = 1, numImages do %>
    <image imageURL="<%= dir %>images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">
        <title><![CDATA[<%= strip_control_characters(getImage(index).metadata.title) %>]]></title>
        <caption><![CDATA[<%= strip_control_characters(getImage(index).metadata.caption) %>]]></caption>
    </image>
<% end %>

</juiceboxgallery>

If you added some more options to the Lightroom plugin I think that would be a much better alternative to Juicebox builder for most photographers.

You might like to know that we are currently working on a new Lightroom plugin which will feature all Pro configuration options in the interface (removing the need to type them into the 'Pro Options' text area).

3,248

(14 replies, posted in Juicebox-Pro Support)

The ideal solution would be to have a custom field within the interface where you could enter a directory name to be prepended to the image names in the imageURL entries.
What you could perhaps do is enter a value in the Pro Options text area that Juicebox itself does not use such as:

directory="http://cdn.ryansmithphotography.com/juicebox/weddings"

You could then modify the Lightroom plugin's 'config.xml' template file to use this value as the start of each imageURL.
You could also instruct the plugin to not write this value to the configuration options in the opening <juiceboxgallery> tag (although this would not actually make any difference to the gallery as Juicebox would just ignore the custom attribute).

Try the following, which will accept a key named 'directory' in the Pro Options text area.
If you entered:

directory="http://cdn.ryansmithphotography.com/juicebox/weddings"

... into the Pro Options text area, then it would result in an imageURL such as:

imageURL="http://cdn.ryansmithphotography.com/juicebox/weddings/images/image.jpg"

Open the 'juicebox.lrwebengine/config.xml' file in a plain text editor and change lines 89-120 to the following:

local dir = ""

for index, value in ipairs(pro_options) do
    if value ~= "" then
        local attrs = explode("=", trim(value), 2)
        if table_length(attrs) == 2 then
            local key = escape(attrs[1]:gsub("%s+", ""))
            local value = escape(trim(attrs[2]):gsub("^([`'\"])(.-)%1$", "%2"))
            if key:lower() == "directory" then
                dir = value
            elseif not lite_options[key:lower()] then
                write("\n" .. key .. "=\"" .. value .. "\"")
            end
        end
    end
end %>
>

<% for index = 1, numImages do %>
    <image imageURL="<%= dir %>/images/<%= getImage(index).exportFilename %>.jpg" thumbURL="thumbs/<%= getImage(index).exportFilename %>.jpg" linkURL="<%= getImage(index).metadata.linkURL %>" linkTarget="_blank">
        <title><![CDATA[<%= strip_control_characters(getImage(index).metadata.title) %>]]></title>
        <caption><![CDATA[<%= strip_control_characters(getImage(index).metadata.caption) %>]]></caption>
    </image>
<% end %>

</juiceboxgallery>

3,249

(5 replies, posted in Juicebox-Pro Support)

I was actually referring to expanded fullscreen

Thank you for clarifying.
As I'm sure you are aware, the Juicebox fullscreen gallery was designed to completely fill the browser window (or the entire screen if useFullscreenExpand="TRUE"). It was not designed with user modification in mind (for example to reduce its size).
Perhaps the following notes will be of interest.

Everything went smooth so far, but due to the presence of an absolutely positioned element on the left (ca. 50% from top), there's some odd overlapping between full-screen images and this element, which is basically a get-back link not positionable elsewhere.

Your original problem (with overlapping elements) may stem from 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.
With the expanded gallery no longer showing any elements from the embedding page, visitors to your web site could then use the Expand/Close Button within the gallery to close the expanded view (to return to the original embedding page) and you could also use the Back Button functionality to add a link within your gallery to whatever web page you like.
I hope this helps.

3,250

(6 replies, posted in Juicebox-Pro Support)

Juicebox was not designed to allow users to add custom buttons to the Button Bar.
Juicebox will expect the Button Bar to be a certain size and in a certain position (determined by the Button Bar configuration options set in the gallery).
If you change the size or position of the Button Bar (using CSS and JavaScrtipt), Juicebox will not know of such modifications and you will encounter problems (such as the one you have reported when resizing the browser window).

Unfortunately, there is no easy solution to your problem as the code controlling what you are looking to change is within the 'juicebox.js' file which is obfuscated and modifying the source code is not supported.
Please see this FAQ: Does Juicebox-Pro include the source code?