You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Could you perhaps post the URL to a web page which demonstrates this problem so that we can take a look for ourselves?
Also, please try viewing this web page to see if the problem occurs with it. [Web page deleted.]
It is a web page which loads the Foundation 5.2.2 CSS and JavaScript files and also contains a Juicebox-Lite v1.4.0 gallery and some sample text (to ensure that the page is long enough to require scrolling).
Thank you.
@wspollack
No. jAlbum has the ability to save a project's settings (very much like saving a preset in JuiceboxBuilder-Pro) which you can then apply to a future project.
However, there is no such functionality in the Juicebox plugin for Lightroom and you cannot load an existing Juicebox gallery in Lightroom to edit it (which, if it could be done, you would do to simply load the configuration options and ignore the images).
Modifying the plugin's 'config.xml' file is probably the easiest way to ensure that certain configuration options are applied to all galleries created by the plugin.
It is no longer possible to have the shared image's thumbnail displayed in the pop-up share window due to limitations imposed by Facebook on what data can be passed via their share URL. Only one thumbnail (the og:image) can be used per gallery. (The link will still point towards the correct image within your gallery.)
You should be able to use a plugin's own configuration options to set a particular image to use as the og:image on your web page. Facebook should then use this image as the gallery thumbnail in the pop-up sharing window.
However, many plugins automatically choose an image to use as the og:image (such as the featured image for the particular page or post) and may not allow you to override this.
Try the WP Facebook Open Graph protocol plugin.
Once activated, go to 'Settings -> Facebook OGP' (from the WordPress Dashboard), enter your 'Facebook User Account ID' and the URL of the image you want to use as the og:image in the 'Default Image URL to use' text field and select the 'Force Fallback Image as Default' checkbox (to ensure that this image is always used).
After doing so, you may need to clear Facebook's own cache of your web page by entering your web page's URL into Facebook's Debugger (otherwise, Facebook may continue to use an older image that was previously used for the shared thumbnail on your web page).
I notice that your gallery currently has a height of 100%. When using a percentage height, it is necessary to ensure that all parent container of the gallery (all divs that the gallery is nested within) have heights specified by CSS. Otherwise, Juicebox will not be able to determine what its actual height should be. It looks like this may be the case in your scenario and Juicebox may think that the gallery is simply taking up 100% of the browser window which is why the thumbnails are displayed rather than the Splash Page.
Try giving your gallery a fixed height (perhaps 600px) instead of 100%. You should then see the Splash Page on your main web page and when the Splash Page is tapped, the gallery should open on a page of its own.
For more information about the Splash Page, please see the Screen Modes section of the Gallery Tour support page.
Incidentally, your web page has a few HTML errors which should be fixed.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors reported.
You could try ensuring that all the elements stacked on top of the gallery have high z-index values (try values of 5000 and above). This should prevent the gallery from appearing in front of any other of your web page elements.
Also, it sounds like your gallery may not be very interactive so you might like to try loading your gallery's 'index.html' page into an iframe (which may be easier to load things on top of). There are certain drawbacks of using an iframe (such as the Expand Button being disabled) but it sounds like your gallery may not be affected by such issues. Please see Option #2 here for details.
I'm glad that you have been able to resolve your problem.
Thank you for posting back to let me know.
Not quite. What to do would be to modify the template file that Lightroom uses to create the gallery XML files.
Open the 'juicebox.lrwebengine\config.xml' file in a plain text editor and copy and paste the configuration options (the attributes to the opening <juiceboxbuilder> tag) from your own gallery's XML file into the Lightroom template file. (You can paste them starting on line 27 which is currently blank.)
Be sure not to include any Lite Options which will already be included via the plugin's interface.
Alternatively, you could copy and paste the Pro Options into the Pro Options text area in the plugin's interface (although you would need to do this for each gallery you create).
(Please note that the line number above refers to the current version of the Lightroom plugin (v1.4.0.0).
It can be difficult to scroll on top of a gallery as the initial tap may be identified as the start of a swipe gesture to navigate between images. (You should be able to scroll on top of a gallery but you just need to be very careful about it.)
I would recommend using a Splash Page for an embedded gallery (which should always be used in Juicebox-Lite in an embedded gallery anyway).
Please post the URL to your gallery's web page so that I can take a look and perhaps suggest something which may help.
I'm pretty sure it's your web page's footer overlapping the bottom of your gallery.
Try reducing the width of your browser window and you will see the gallery and the footer separate from each other.
Did you try my suggestion of adding the z-index CSS rule to your #footer_div?
I tried it (using my browser's developer tools) before posting the suggestion and it fixed the problem of the overlap being a different color to the rest of the footer bar.
The other option would be to change the layout of your page so that the gallery and footer never overlap.
It looks like the paths in your embedding code (the path to the 'juicebox.js' file and the baseUrl) are incorrect.
According to your embedding code, your gallery folder should be http://www.ptkmanila.com/newsite/latviagallery/ but your gallery files do not appear to be in there.
Also, according to your <script> tag, your 'juicebox.js' file should be located here: http://www.ptkmanila.com/newsite/latvia … uicebox.js
... but it does not seem to be here.
If you name your gallery folder 'latviagallery' and upload the entire folder (not just the contents) to your 'newsite' directory, then you can use the following embedding code:
<!--START JUICEBOX EMBED-->
<script src="latviagallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: 'latviagallery/',
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(255,255,255,1)'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->To see my example in action, create a test gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the code I posted.
This is not related to Juicebox or JuiceboxBuilder.
Juicebox does not use or require Java and JuiceboxBuilder is not a Java application.
(Juicebox uses JavaScript but Java and JavaScript are two very different things.)
If you are having trouble with the automatic Java updater on your computer, try downloading the installer file directly from the Java website.
There are several ways that a logo can be added to a Juicebox gallery.
Please see the Adding a Logo support section for details.
You are essentially currently using Option #4 from the link above. Try using either Option #2 or Option #3 instead. Either of these two options would include your logo within the gallery (rather than outside the gallery but on the same page).
I think what you are describing is your web page's footer overlapping the bottom of the gallery.
You could try changing the layout of your page so that the gallery and footer do not overlap each other.
Otherwise, you could perhaps give your footer a large z-index value via CSS so that it is always stacked on top of all gallery elements and appears consistent throughout its width.
Try adding the following CSS to your web page:
#footer_div {
z-index: 9999;
}Unfortunately, it is not possible to change which configuration options are affected by a preset.
The Gallery Title is part of a preset and will always be applied to the gallery when a preset is used.
If you remove the galleryTitle entry from your preset XML file, a blank Gallery Title will be used.
Thank you.
I do not know how likely it is that Juicebox will add such functionality as an additional layout option but your suggestion is in the right place and will be seen by the developers.
Is it possible to do the same thing also on the mobile platform?
No. In Touch Input Mode (which is used on mobile devices and cannot be overridden via configuration options), when imageClickMode="NAVIGATE", a tap on the screen toggles the display of the overlay and the navigation buttons (or a swipe gesture) must be used to navigate between images.
There is no way to increase the navigation button hit areas in Touch Input Mode.
A scrolling gallery of images (where all images are displayed on a single scrollable page at the same time) is not something Juicebox was designed to do and, as such, it is quite far removed from the design concept of displaying only one main image at a time.
However, if you would like to make any suggestions for future versions of Juicebox, please post them in the Feature Requests forum thread. This keeps them all together and ensures that they are not overlooked. Thank you.
Thank you for the additional information.
I have been able to replicate the problem you describe and have logged a bug report with the developers.
It should hopefully be fixed in the next version.
In the meantime, depending on how you are trying to sort the images, I notice that sometimes, the action you perform is executed OK but requires a click on the 'Images' tab label (or a click on 'Customize' and then back to 'Images') to refresh the page (and display the images in the new order).
The image used for the Facebook thumbnail is taken from the web page's Open Graph og:image meta tag.
When creating a gallery with JuiceboxBuilder-Pro, the application inserts an og:image meta tag into the gallery's 'index.html' page. However, this will not be present in a WordPress page. In order to insert an og:image meta tag into your WordPress pages, you can use a plugin such as one of the ones in this page of plugin search results.
What version of JuiceboxBuilder-Pro are you using ('Help -> About JuiceboxBuilder-Pro...')?
The current version is v1.4.0. If you are not already using v1.4.0, then please try upgrading following the instructions here.
If you are already using v1.4.0, then it certainly sounds like something is amiss. I cannot replicate the problem. Dragging and dropping images into a new order works fine for me, as do the 'Images -> Sort' options.
Try uninstalling and reinstalling JuiceboxBuilder-Pro to see if this helps.
Does this happen with all galleries (try creating a new sample gallery with a few images in JuiceboxBuilder-Pro) or just certain ones?
You could use use the API method toggleThumbs() when the API event onExpand() is fired as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: 'juicebox-container',
galleryHeight: '400',
galleryWidth: '600',
showExpandButton: 'TRUE',
showThumbsButton: 'TRUE',
showThumbsOnLoad: 'TRUE'
});
jb.onExpand = function(expanded) {
jb.toggleThumbs();
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>I'm surprised to not see my answer of yesterday
I'm not sure what might have happened. (I did not delete any of your posts.) Perhaps there was a timeout which resulted in your post not being entered.
because I had seen what you say now, had corrected my CSS file, and as I was entirely satisfied of the result
That is great to hear. I have now marked this query as SOLVED.
It would certainly be safe to change it back when the bug has been fixed and you upgrade your gallery to the next version of Juicebox.
However, whether you need or want to change it back depends on how you want your gallery to behave when it is expanded (ie. whether or not you actually want the gallery to expand in a new page or not).
For more information on the expandInNewPage configuration option, please see here.
Opening a gallery (created in Lightroom or by any other method) in JuiceboxBuilder-Pro should not change the order of the images (unless you change the order yourself by dragging and dropping thumbnails on the 'Images' tab or by using the 'Images -> Sort' options from the drop-down menu at the top).
JuiceboxBuilder-Pro should just read the list of images from the 'config.xml' file and initially display them in the order that they are listed in.
Any additional images you add to a gallery in JuiceboxBuilder-Pro are added to the end of the gallery. They are not automatically put into alphabetical (or any other) order. However, once you have added all the images for your gallery, you can re-order them using the 'Images -> Sort' options from the drop-down menu at the top.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.