3,176

(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,177

(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,178

(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,179

(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,182

(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,184

(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,186

(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,187

(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,189

(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,192

(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,193

(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,194

(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,195

(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?

You can get the image title and image caption within onImageChange as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container'
});
jb.onImageChange = function(e) {
    var imageTitle = jb.getImageInfo(e.id).title;
    var imageCaption = jb.getImageInfo(e.id).caption;
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Your baseUrl entry is in the wrong place. It needs to be inside the new juicebox({ ... }); section.
Change:

<!--START JUICEBOX EMBED-->
<script src="http://ciproweb.com/sadlerconstructionnc/gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(93,93,93,1)"
});
</script>
<div id="juicebox-container"></div>
baseUrl : 'http://ciproweb.com/sadlerconstructionnc/gallery/',
<!--END JUICEBOX EMBED-->

... to:

<!--START JUICEBOX EMBED-->
<script src="http://ciproweb.com/sadlerconstructionnc/gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl : 'http://ciproweb.com/sadlerconstructionnc/gallery/',
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(93,93,93,1)"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

3,198

(3 replies, posted in Juicebox-Lite Support)

The problem you are describing sounds like a known bug whereby main images may not display when selected in IE8 and IE9 when imageTransitionType="SLIDE" (which is the default value for imageTransitionType, used by Juicebox-Lite).
This bug has already been addressed and will be fixed in the next version of Juicebox.
If you were a Juicebox-Pro user, a workaround (until the bug is fixed) would be to set imageTransitionType to something other than SLIDE (e.g. FADE, CROSS_FADE, NONE).

The 'Active X' warning is not related to the problem (above) and should be displayed only when the gallery is run locally (from your hard drive) and not when the gallery is uploaded to and run from your web server.
You can disable this warning in Internet Explorer (so that you do not need to click 'Allow Blocked Content') by going to 'Tools -> Internet Options -> Advanced (Tab) -> Security' and selecting 'Allow active content to run in files on My Computer' and clicking 'OK'. (A browser restart will be required.)

3,199

(14 replies, posted in Juicebox-Pro Support)

If you wanted to start each imageURL with a certain string (to denote the start of an absolute path), then you could modify the template file that the Lightroom plugin uses to generate the gallery's 'config.xml' file.
Open the 'juicebox.lrwebengine/config.xml' file in a plain text editor and change the imageURL entry line 114 from:

imageURL="images/<%= getImage(index).exportFilename %>.jpg"

... to something like:

imageURL="http://cdn.ryansmithphotography.com/images/<%= getImage(index).exportFilename %>.jpg"

3,200

(5 replies, posted in Juicebox-Pro Support)

So the question is: is there an easy (i.e. via options) way to set the whole full-screen block, including image and image caption, so that it has ~90% viewport width, ~5% margin-left and right, and of course auto height to preserve image ratio?

As long as you are referring to the normal rather than fullscreen (expanded) gallery display, then you can set the gallery's width to be 90% in the embedding code and horizontally center the gallery's div in its parent container as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
    containerId: 'juicebox-container',
    galleryWidth: '90%'
});
</script>
<div id="parent">
    <div id="juicebox-container" style="margin: 0 auto;"></div>
</div>
<!--END JUICEBOX EMBED-->

No matter what the height of the gallery is, Juicebox will respect the aspect ratio of the main images as long as imageScaleMode is set to SCALE_DOWN or SCALE.

I hope this helps.