You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
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.
@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.
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.
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.
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.
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).
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>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.
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-->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.)
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"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.
Thank you for clarifying the problem.
Please try this version of the plugin. [Link removed.] Hopefully it will resolve the issue.
Thank you for reporting this problem. I will ensure that it is fixed in the next version of the Lightroom plugin.
The default metadataExportMode value has changed from 'All' to 'Copyright Only' but all you need to do to change it to 'All' is scroll down to the 'Metadata' field in the 'Output Settings' section, click on the 'Copyright Only' label (to reveal the drop-down menu) and select 'All'.
The code you posted will give the gallery (the 'juicebox-container' div) a z-index value of 9999 (via the 'menu_devant' class) which will force the gallery in front of all elements with a lower z-index value.
Remove the following code from your style-menu2.css file:
.menu_devant {
position:absolute;
z-index:9999;
}... and change line 49 (in the 'menu' class section) from:
z-index : 1;... to:
z-index : 9999;My own tests with your gallery files show that this should work fine.
I'm glad you've been able to resolve your problem.
Thank you for posting back to let me know.
Incidentally, you would have a Transaction Id only if you purchased Juicebox-Pro via PayPal. (You would not have a Transaction Id if you paid with a credit card via Gumroad.)
I'm glad you've been able to resolve your problem.
Thanks for posting back to let me know.
The 'full.html' file should find the gallery's XML file as specified by your configUrl.
Please make sure that that your gallery uses the current version of Juicebox-Pro (v1.4.2) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, instructions to download the current version and upgrade existing galleries can be found on the Upgrading Juicebox support page.
If this does not help (or is not relevant), then please post the URL to your gallery's web page so that I can take a look and help further.
I'm glad that you have found a solution to your problem.
However, please be aware that shifting gallery elements via CSS can sometimes have unexpected results.
Juicebox will not be aware of such modifications and will expect the gallery elements to be elsewhere. This can sometimes cause problems when resizing a gallery window or when an animation or transition is carried out of the elements which have been shifted.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.