I think I bought it, but if it does not work in the project, I get a refund?
If you run into any problems, I'll certainly do my best to help you out but, yes, we do offer a money-back guarantee, as noted in this FAQ:
Can I get a refund?
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
I think I bought it, but if it does not work in the project, I get a refund?
If you run into any problems, I'll certainly do my best to help you out but, yes, we do offer a money-back guarantee, as noted in this FAQ:
Can I get a refund?
when employing your code, it works well, except I have to switch it to AUTO screen size.
If should work for any value of screenMode. The code should be executed only if screenMode="SMALL" or if screenMode="AUTO" and Juicebox chooses to use Small Screen Mode.
However, the captions still show up in the expanded mode as well, even though you have code in their to hide it.
The code works when the gallery is expanded in the same page. However, on iOS devices, the gallery is expanded in a new page (the 'full.html' file within the 'jbcore' folder). Please see the Expand Gallery Behavior support section for more details.
Try the following (in addition to the code above in your main embedding web page).
Open your gallery's 'jbcore/full.html' file in a plain text editor and change:
<!--START JUICEBOX EMBED-->
<script>
var expanded_jb_gallery = true;
new juicebox({
containerid:'juicebox-container',
galleryHeight:'100%',
galleryWidth:'100%'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
... to:
<!--START JUICEBOX EMBED-->
<script>
var expanded_jb_gallery = true;
var jb = new juicebox({
containerid:'juicebox-container',
galleryHeight:'100%',
galleryWidth:'100%'
});
jb.onInitComplete = function() {
if (jb.getScreenMode() === 'SMALL') {
$('.jb-area-caption').remove();
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
(Further testing today suggests that you may also need to increase the timeout from 500ms to 1000ms in my original code for when the gallery is expanded in the same page.)
It certainly sounds like the problem is not directly related to Juicebox.
Perhaps you could post your query in the Lightroom forum.
Also, Lightroom has just been updated to v5.5 (on 18 June 2014) so it might be worth updating to see if this helps: https://blogs.adobe.com/lightroomjourna … lable.html
return mode is displayed when we click on the image and not the thumbnail page?
That is correct. In Small Screen Mode, the Back Button will be displayed only on main images pages and not on thumbnail pages.
On this post on Africa Gallery in mobile mode in the thumbnail page we see the icon back icon symbolizing the home? It is normal that it works?
The user has created his own 'home' button (using a custom image, CSS and HTML) and has overlaid it on top of his web page so that it displays on the thumbnail pages and covers Juicebox's own Back Button on the main image pages.
He has outlined the method he has used in this forum post.
So you're saying that if we displayed in full screen mode it will display the home button
No. In Small Screen Mode, the Back Button will be displayed only on main images pages and not on thumbnail pages (no matter whether the pages are displayed fullscreen or not).
Ah ok if I do that,
it will work you thinking?
backButtonUrl: 'javascript: onclick="Ti.App.fireEvent('closeWin');',
No. The correct format (if setting the configuration option in the embedding code like in my example above) would be:
backButtonUrl: 'javascript: Ti.App.fireEvent("closeWin");',
The best I've been able to come up with is the following. It might not be a very clean solution but you might find it to be suitable (or it might at least point you in the right direction). It uses several Juicebox-Pro API methods and events and also jQuery which you will need to include in your web page.
When the gallery is first loaded (onInitComplete), if Small Screen Mode is detected (getScreenMode), the .jb-area-caption container is removed from the Document Object Model (DOM).
This works fine but will only be of use if the Splash Page is not used. As soon as the gallery is expanded (from the Splash Page or from the Expand Button), the .jb-area-caption container gets reinstated but removing the container as before as soon as onExpand is fired does not work due to a timing issue. This is why I have introduced a small delay before removing the .jb-area-caption container again.
<!--START JUICEBOX EMBED-->
<script src="jquery-1.11.1.min.js"></script>
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
});
jb.onInitComplete = function() {
if (jb.getScreenMode() === 'SMALL') {
$('.jb-area-caption').remove();
jb.onExpand = function(expanded) {
if (expanded) {
setTimeout(function() { $('.jb-area-caption').remove(); }, 500);
}
};
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
I hope this helps.
There are no configuration options (or API methods) which would allow you to toggle the thumbnails without the main image resizing dynamically to fill the available space.
However, you could try the following which places a custom 'Toggle Thumbnails' button on the web page and uses jQuery to toggle the .jb-classifier-thumb-area (thumbnail) container.
You would need to include jQuery in your web page for this solution to work.
You could do this with pure JavaScript but the function would not be quite as concise.
Also, you could attach the click handler to whatever element on your web page you like (it does not have to be a custom <input> tag like in the example).
<!--START JUICEBOX EMBED-->
<script src="jquery-1.11.1.min.js"></script>
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '600px',
galleryHeight: '400px'
});
$(document).ready(function() {
$('#toggle-thumbnails').click(function() {
$('.jb-classifier-thumb-area').toggle();
});
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
<div>
<input id="toggle-thumbnails" type="button" value="Toggle Thumbnails" />
</div>
I'd like to know if you know the back button displayed on iphone / android?
Yes.
By default, Juicebox will display the gallery in Small Screen Mode on mobile devices and you can have the Back Button displayed in Small Screen Mode by setting showSmallBackButton="TRUE".
Please note that in Small Screen Mode, the Back Button will be displayed only on the main image pages (and not on the thumbnail pages).
Alternatively, you could force the gallery to be displayed in Large Screen Mode on all devices and in all browsers by setting screenMode="LARGE".
For more information about Screen Modes, please see here.
I can custom in your script?
Yes.
You can run custom JavaScript code on clicking the Back Button using configuration options such as the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
backButtonPosition: 'TOP',
backButtonUrl: 'javascript: alert("Back Button clicked.");',
backButtonUseIcon: 'TRUE'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
This Adobe Lightroom forum thread may help: https://forums.adobe.com/thread/1270848
The original poster uses a Dell U2713 monitor but the problem seems to be similar to yours.
The code presented in the Embed Code window is generated internally by JuiceboxBuilder-Pro and has nothing to do with the 'template/index.html' file. The 'template/index.html' file is used only to generate the output 'index.html' file (in the gallery folder). There is nothing you can do to change the code which appears in the Embed Code window.
You can modify the 'template/index.html' file, though, and any changes you make to this file will be reflected in the gallery's own 'index.html' file once you save the gallery.
On Mac, it looks like the 'template/index.html' can be found here: /Applications/JuiceboxBuilder-Pro.app/Contents/Resources/template/index.html (although I do not have a Mac to check this path)
On PC, it can be found here: C:\Program Files (x86)\JuiceboxBuilder-Pro\template\index.html
I hope this helps to clarify things.
As Squarespace is not a regular web host (which gives you FTP access to regular web space), you can embed a Juicebox gallery in a Squarespace web page by following the Embedding in a Web Template Site instructions.
When it comes to inserting the <iframe> code into your Squarespace web page, this Squarespace article should help.
It looks like something may have interrupted the upload of the images to your web server.
If you take a look at the first image in your gallery in isolation (outside the gallery), you will see that it is incomplete:
http://www.obpools.com/Pool_Landscape_P … ntYard.jpg
Try re-uploading the images to your web server. This should solve your problem.
As far as I am aware, the code used to populate the Embed Code window on the Publish tab of JuiceboxBuilder-Pro is not generated from any code within the 'template/index.html' file. This seems to have always been the case (at least since v1.3.3 on Windows).
However, any modifications you make to the 'template/index.html' file will be included in the gallery's output 'index.html' file.
It looks like your navigation bar may have a position assigned to it via CSS. There is currently 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 should hopefully be fixed in a future version of Juicebox. In the meantime, please try one of the two following suggestions:
(1) Set useFullscreenExpand="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section).
... or:
(2) Set expandInNewPage="TRUE" in (in JuiceboxBuilder-Pro's 'Customize -> General' section). When the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page.
Hopefully one (or both) of these suggestions will be a suitable solution to your problem until the bug is fixed.
When JuiceboxBuilder-Pro processes an image (whether to resize it or add a watermark), the new image will always be a .jpg (as you have discovered).
I would expect that the builder should keep the image type.
If you would like to suggest this for a future version of JuiceboxBuilder-Pro, then please post in the Feature Requests forum thread. This keeps all the suggestions together and ensures that they are not overlooked. Thank you.
If you want .png images in your output 'images' folder, you can deselect the 'Resize Images' checkbox (on the 'Images' tab) and your original .png files will be copied across to the gallery folder without being processed.
Please note that there is currently a known bug (which should hopefully be fixed in a future version) whereby a .png file being copied will end up in the 'images' folder with a .jpg file extension. However, the corresponding 'imageURL' entry in the 'config.xml' file matches and the images should be displayed OK in the gallery.
The double ;; is not really a problem (although I have notified the developers and the extra ; characters should hopefully be removed in the next version of Juicebox). The ; character is used to separate CSS rules and, although there is nothing between the two ; characters, the code is still technically valid and will not cause any problems.
The most likely reasons for seeing a blank page on a mobile device are either:
(1) JavaScript is disabled in the browser.
... or:
(2) The gallery is being displayed over a 3G connection rather than wi-fi.
Please check that JavaScript is enabled and if 3G is being used, please see this FAQ which has a solution to the problem.
Why can't I view my gallery on a 3G mobile connection?
(not tested on a Windows PC)
Your gallery displays and functions fine on a Windows PC.
It looks like you are using the 'View on the web' link as the 'src' of your iframe.
It also looks like you have not yet made your gallery folder public.
With Google Drive installed to your computer and your gallery folder copied to the Google Drive folder on your computer, you can make your gallery folder public by following steps 6, 7 and 8 in the instructions.
Once the gallery is public, when you go on to steps 9 and 10, you should see a 'Preview' button to the right of the two zoom magnifying glass icons which allows you to complete step 11 and find the URL that you need to use as the 'src' of your iframe.
Is there not some clever workaround?
It might be possible to change the size of the hit areas using CSS but it I expect it would not be as easy as it might seem at first glance. I have tried to reduce the size of the hit areas by modifying the height and width of the .jb-navigation .jbn-nav-touch-area contatiners and then applying suitable margin values to compensate for the new dimensions but this has the unwanted knock-on effect of shifting the navigation arrows from their correct positions.
Also, Juicebox takes into consideration other factors such as the position of the caption area (whether or not it is displayed on the image overlay) and whether or not there are links in the image titles or captions (which requires that the caption area is stacked on top of the hit areas, effectively reducing their size).
Juicebox was not designed to allow the hit areas to be resized or moved and there seems to be no quick and easy solution to do so manually.
If you were to set imageClickMode="NONE", you could perhaps set showNavButtons="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section) to add 'previous' and 'next' navigation buttons to the Button Bar.
This gives users a further method to navigate between images (and the function of the left and right arrows should be fairly self-explanatory).
Thank you for reporting the problem and for all your investigative work.
I have notified the developers of this and they will investigate further.
At least we know that you can use the mouse context menu as a suitable workaround.
It is not possible to change the size of the hit areas over the main image but you can turn off the default 'navigate-on-image-click' functionality by setting imageClickMode="NONE" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section). In Large Screen Mode, users will then have to click directly on the navigation buttons to navigate between images.
In Small Screen Mode, a tap on the main image in an area other than on a navigation button will toggle the overlay on and off (or will do nothing if the Info Button is displayed on the Button Bar).
When I view your gallery on an iPod Touch (whose display should be similar to that of an iPhone), the gallery is displayed in Small Screen Mode initially displaying the thumbnail page, from which a main image can be selected.
If you do not see this, then try clearing your browser's cache before reloading your web page to ensure that your browser is fetching and using the most recent gallery files from your web server.
If you would like your gallery to display a Splash Page (which, when clicked, would open the gallery on a page of its own), try embedding the gallery directly into your web page (rather than loading it into an iframe).
As you have already uploaded the complete gallery folder, you can use the baseUrl method of embedding as documented here.
Essentially, you could replace your current <iframe> code with the following embedding code:
<!--START JUICEBOX EMBED-->
<script src="/imgs/Juicebox Galleries/Water/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl : '/imgs/Juicebox Galleries/Water/',
containerId : 'juicebox-container',
galleryWidth : '945',
galleryHeight : '800',
backgroundColor: '#222222'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
For more information about Screen Modes and how Juicebox adapts to different devices and screen sizes, please see here.
I notice that your web page has several HTML errors (including several stray end </div> tags) which may be causing problems.
Try validating the code on your web page with the W3C Markup Validation Service and fix the errors that are reported.
Once the code on your web page validates correctly, the page should be rendered with greater predictability and consistency across different browsers.
It is not possible to password-protect a link. It is also not possible to password protect a Flickr Set. You could use a Guest Pass to share private photos with people but if the photos are made private, they would not be displayed in the gallery.
One possible solution would be to provide a link to a web page in a password-protected directory.
Once the correct password is entered, the web page would simply redirect the user's browser to the Flickr Set page.
The actual Flickr Set itself would not be password-protected but a user would have to hunt it down manually to find it.
The link within your gallery would essentially require a password in order for the Flickr Set page to be displayed via clicks alone.
The web page you would link to would look something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=https://www.flickr.com/photos/12345678@N01/sets/12345678901234567/" />
<title></title>
</head>
<body>
</body>
</html>
You would put the web page in a directory of its own on your web server and password-protect the directory using .htaccess and .htpasswd files.
These two web pages are a useful resource with instructions for setting up password-protection on a specific directory using .htaccess and .htpasswd.
http://www.javascriptkit.com/howto/htaccess3.shtml
http://www.tools.dynamicdrive.com/password/
I hope this helps.
Thank you for the additional information.
It certainly sounds like it has nothing to do with Photo Mechanic.
Here's what we know so far:
The text being pasted is not already in duplicate.
The problem occurs only in JuiceboxBuilder-Pro (and not other applications such as text editors).
The problem occurs only when pasting via the keyboard (Command+V) and not via the mouse context menu.
The problem is known to occur only on Mac (I cannot replicate it on PC).
It certainly sounds like an Adobe AIR/JuiceboxBuilder-Pro/Mac problem.
This may sound strange but, out of interest, when you hold down the Command key and then the V key, what happens if you release the Command key first (and what happens when you release the V key first)?
Also, do you have a different keyboard that you could plug in and test?
It is unlikely to make a difference but it is just about the only other variable in the equation which we have not yet tested and if it is possible to test, I guess we should. Thanks.
I have just updated Adobe AIR to the current version myself (v14.0) but cannot replicate the problem you describe in JuiceboxBuilder-Pro v1.4.1 (pasting information from any source by right-click 'Paste' or Ctrl+V).
What happens when you paste into a different text field in JuiceboxBuilder-Pro (such as the Gallery Title) or a different application (such as a plain text editor)?
Does anything different happen when you paste via mouse (right-click 'Paste') vs keyboard (Ctrl+V)?
Also, where are you copying the caption text from? Is it a metadata field (EXIF or IPTC) embedded in your image?
If so, please check that the data is not actually duplicated in the source.
If you continue to experience difficulties, perhaps you could upload one of your images that produces this problem (and provide a download link) and let me know what metadata field you use so that I can investigate further.
Is this a bug?
No. As I mentioned a couple of posts ago:
In Small Screen Mode, the Back Button is displayed only on the main image pages (and not on the thumbnail page).
This is by design to maximize the amount of space available for the thumbnail images. The only other gallery elements which may be displayed on the thumbnail page in Small Screen Mode are the Gallery Title, the Thumbnail Paging Text and the Thumbnail Navigation Buttons.
It looks like your own solution is, indeed, the best one for your required scenario.
Great! I'm glad that my sugestion was helpful.
Thank you for posting back to let me know.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.