No problem at all.
I'm just glad to hear that you've ben able to resolve your problem.
Thank you for taking the time to post back to let me know.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
No problem at all.
I'm just glad to hear that you've ben able to resolve your problem.
Thank you for taking the time to post back to let me know.
@gfs
The issue reported above was addressed by the developers, confirmed as fixed (via email) by the original poster (robertcoldwell) and the bugfix was included in Juicebox v1.5.0 (which was released on 24 May 2016).
It certainly seems strange (though not impossible) that the problem would crop up again over a year later in a different version.
One thing I notice which could be causing layout problems is that there are several HTML errors on your web pages, including stray and unclosed <p> and <span> tags (and extra double-quotes alongside certain <div> attributes). Also, your gallery <div> containers are inside <p> tags. (A <p> element should not contain another block-level element such as a <div>.)
Try validating your gallery web pages with the W3C Markup Validation Service and fix the errors reported.
Once the code on your web pages validates correctly, the web pages should be rendered with greater consistency and predictability across different browsers and devices.
Unfortunately, I do not have access to an iPad Pro so cannot check your web pages in such a device myself.
If, after fixing the HTML errors on your web pages, you still see the problem, then I'll happily compile a report for the developers who will investigate further but it would help to have as much information about the problem as possible so please let me know the following (if you can).
(1) What version of iOS was the iPad Pro running?
(2) What browser or browsers (Mobile Safari, Mobile Chrome or any others) did you see the problem in?
(3) If you can gain access to the iPad Pro again, please provide a screenshot of the problem (and let me know which of your galleries it is from) so that we can see exactly what you are seeing.
(4) Also, if possible, please let me know if the problem occurs in any of our demo galleries here.
Thank you.
So there’s no way to remove that folder from my Documents folder and prevent it from reappearing?
That is correct.
If you delete the 'presets' folder from the 'Documents/JuiceboxBuilder-Pro/' location, JuiceboxBuilder-Pro will reinstate it (complete with all the default preset files) when the application is next started.
If you just delete the contents of the 'presets' folder, then JuiceboxBuilder-Pro will detect that a 'presets' folder is present and will leave it alone. (It will not populate the folder with the preset files that you have deleted.) However, you will still be left with an empty 'JuiceboxBuilder-Pro/' folder in your 'Documents' location.
Can I make a feature request for a way to change that?
Yes, certainly.
Please post suggestions for future versions in the Feature Requests forum thread:
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any suggestions being implemented but this is certainly the best place for all ideas.
Thank you.
It is not possible to change where JuiceboxBuilder initially puts its own presets folder when the application is installed but you can copy the default preset files (and save your own) to anywhere you like.
You can then load a preset from the new location via 'Presets -> Load Preset...' from the drop-down menu at the top.
Likewise, you can save a custom preset to anywhere you like via 'Presets -> Save Preset...'.
The dialog window for loading and saving presets should remember the last used location each time it is opened.
Please note that the 'Load Preset' combobox (just above the 'Lite' configuration options) will always read the preset files from the original installed 'Documents' location. This cannot be changed.
If you want to store presets in a different location, then you'll need to use the 'Load Preset...' and 'Save Preset...' options from the drop-down menu at the top.
I'm glad you've been able to resolve your problem.
Thank you for letting me know.
According to your gallery's 'config.xml' file, the 1st image in your gallery should be located here:
http://www.zw-g.de/slides/zeiterfassung … modell.jpg
However, going directly to that location in a browser (bypassing Juicebox) just redirects to your home page, suggesting that the image is not present on your web server (or at least in the correct location).
Please check that your gallery's 'images' and 'thumbs' folders have been uploaded to your '/slides/zeiterfassung-module/' directory.
If the images are in their correct location on your web server, then please check their permissions to ensure that they are not too restrictive. Default file permissions of 644 should be fine. You should be able to check and change permissions using either a dedicated FTP program such as Filezilla or via your web hosting account's online File Manager.
I hope this points you in the right direction.
You're welcome.
I'm glad you've been able to get it working. Thank you for letting me know.
I'm glad you've been able to resolve your problem.
Thank you for letting me know.
For anyone else encountering the "The application cannot be installed due to a certificate problem." message whilst installing JuiceboxBuilder, the solution is usually to completely uninstall the existing version of JuiceboxBuilder first before installing the new version. (For reference, this is noted in the 'Installation Issues' section of the JuiceboxBuilder User Guide.)
I'm not sure why this did not work for you when you first tried it but I'm happy to hear that all is well.
It sounds like you might be using Safari 11 as your default browser.
Unfortunately, Safari 11 (released 19 September 2017) has introduced a new security restriction which now prevents the local viewing of Juicebox galleries by default.
Please see this forum post for a full explanation and a workaround.
Selecting 'Disable Local File Restrictions' from Safari 11's 'Develop' menu (full instructions in the link above) should, once again, allow you to view your galleries locally in Safari.
thanx for answering so quickly!
You're welcome!
But isn't it a suggestion to think about for further updates? ;-)
Please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.
I'm going to implement a solution which you, Steven, proposed.
Therefore I'm using a PHP/Ajax livesearch variant.
I'm glad you've found a suitable workaround for your problem.
Thank you for letting me know.
Unfortunately, it is not possible to customize Juicebox error messages or to hook into the error handling to intercept the error messages and redirect the site visitor to a custom page or run your own code.
As your gallery shows your own Flickr images, you know in advance what Flickr tags are in use so perhaps the best course of action would be to validate the tags entered by the site visitor (check what the user enters against a known array of valid tags) before loading the gallery (i.e. only load the gallery if the tags entered are valid).
I hope this suggestion helps.
Unfortunately, there is no automated method for converting multiple SimpleViewer galleries to Juicebox galleries in bulk.
You can swap each gallery's 'svcore' folder for a jbcore' folder (which shouldn't take too long) and Juicebox can read a SimpleViewer gallery's 'gallery.xml' file so you wouldn't need to alter the contents of the configuration file (although you'd need to rename it to 'config.xml' or add a configUrl to the Juicebox embedding code) but actually changing the embedding code in your web pages is likely to take up most of the time in the conversion process.
Depending on how your website is structured (and whether or not you use a baseUrl for your galleries), swapping the embedding code over for all your galleries could be a relatively easy process of copying and pasting (but, admittedly, if you have many galleries, it could be quite time consuming).
Also, please bear in mind that although Juicebox can read a SimpleViewer gallery's 'gallery.xml' file, Juicebox was written from the ground up (and is not just a HTML 5 translation of SimpleViewer). As such, Juicebox has a different feature set to SimpleViewer and not all SimpleViewer configuration options have direct equivalents in Juicebox. With this in mind, you might like to use JuiceboxBuilder to convert your SimpleViewer galleries (as documented in the Converting a SimpleViewer Gallery support section) as you could tweak your galleries via the JuiceboxBuilder interface during the conversion process.
Thank you very much for all the testing that you have done (with regard to changing configuration options) and additional information that you have provided (your Safari version number and the link to your own gallery).
I will pass all this on to the developers and I'm sure it will help greatly in their investigations.
Also, I'm very happy to hear that setting imageTransitionType to FADE seems to be a suitable workaround.
Thank you, once again, for reporting the problem and for helping us troubleshoot it.
On the web page where the gallery does not appear, there is the following line of code:
<script src="/plan-a-visit/washed-ashore/globalassets/juiceboxgalleries/NewWashedAshoreTest/jbcore/juicebox.js"></script>
However, there is no 'juicebox.js' file in that location.
If you change the line above to the following, then the gallery should appear:
<script src="/globalassets/juiceboxgalleries/NewWashedAshoreTest/jbcore/juicebox.js"></script>
When a gallery is expanded on an iOS device (for example, from the Splash Page), the gallery is expanded on a new page instead of on top of the embedding page (please see the Expand Gallery Behavior support section) and Juicebox uses the 'full.html' file inside the gallery's 'jbcore' folder to display the gallery.
First of all, please check that the 'full.html' file is actually present inside your gallery's 'jbcore' folder on your web server.
If the file is there, then please check that its permissions are not too restrictive. Default file permissions of 644 should be fine. You should be able to check and change file permissions using a FTP program or via your web hosting account's online file manager.
Also, please ensure that your gallery uses the current version of Juicebox-Pro (v1.5.1) to be sure that any bugs from previous versions (but which have since been fixed) are not contributing to your problem.
If necessary, full instructions for downloading the latest version and upgrading existing galleries can be found on the Upgrading Juicebox support page.
Hopefully this will help.
However, if you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
Thank you.
In order to help troubleshoot this issue, could you please post the link to your test gallery on your own web server (just in case the problem is somehow server-related)? Many thanks!
Thank you for reporting this problem and for providing the video and sample gallery.
For now, this problem only occurs in Safari running on MacOS.
There is no problem with Chrome and Firefox.
It certainly seems to affect only Safari on MacOS as I cannot replicate the problem (using the gallery you provided) in Chrome 61, Edge, Firefox 56.0, IE11 or Opera 48.0 on a Windows 10 PC.
Please let me know exactly what version number of Safari you use (I expect it is likely to be 11.0 but I would like to be sure) and, if you have any browser extensions installed, then please try temporarily disabling them to see if this makes a difference.
I have notified the developers who will certainly investigate further.
Unfortunately, I do not have access to a Mac and cannot replicate the problem myself so I am unable to try out different workarounds but maybe the following suggestions will help.
(1) Try changing the imageTransitionTime from the current value you use (0.55) to something else (maybe try the default value of 0.3 or something larger like 0.1).
(2) Try changing imageTransitionType from SLIDE to a different value (FADE, CROSS_FADE or NONE).
(3) Try changing the captionPosition from BELOW_IMAGE to something different, such as OVERLAY, OVERLAY_IMAGE, BOTTOM or BELOW_THUMBS (at least for testing purposes), to see if this makes a difference.
If you find any combination of configuration options that helps to workaround the problem, please let me know so that I can pass the information on to the developers. Thank you.
You're welcome!
I'm glad I was able to help.
Thank you for providing the video.
Unfortunately, this is not something that Juicebox was designed to do (to allow custom functional icons to be positioned on top of the main image, relative to a corner) and it would appear to be very difficult to achieve.
As you have discovered, there seems to be some kind of stacking context preventing you from appending a custom icon to the .jb-dt-main-image class and then just assigning a high z-index value to it.
I've tried to achieve what you are looking to do myself but have not found a nice clean solution.
It looks like you would have to append the custom icon to a different container (one already stacked above the main image) but then you'd need to calculate the correct position for it (using the display dimensions of the current image) as it would no longer be relative to the main image and you would likely run into complications (i.e. the need to reposition the custom icon) if the main image changes its size (e.g. if the browser window is resized or the thumbnails are toggled on or off) which would require additional listeners (perhaps using jQuery's .resize() and the Juicebox-Pro API's onToggleThumbs()). (Your current scenario might already be affected by such resizing issues.)
I really cannot think of a quick and easy solution (although maybe my notes here will point you in the right direction).
Putting the whole bar over the image isn't going to work for the client.
Not even with auto-hide (setting showImageOverlay="AUTO" and an inactivityTimeout value)? It would certainly be an easier option.
Could you maybe position your custom icon somewhere else on your web page? It looks like the top-right corner of the main image in the gallery is going to be a problem.
Here's the best I've been able to come up with at the moment.
It's overly complicated, imperfect (to say the least) and only works under certain conditions.
Still, it might be useful as a starting point (or give you some ideas).
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
imageClickMode: 'NONE'
});
function set_icon() {
$('#custom-icon').remove();
window.setTimeout(function() {
var index = jb.getImageIndex()
var image = index - 1;
var image_width = $('.jb-dt-main-image-' + image + ' .jb-dt-main-image').width();
var image_height = $('.jb-dt-main-image-' + image + ' .jb-dt-main-image').height();
var image_area_height = $('.jb-panel-detail').height();
var top_position = Math.floor((image_area_height - image_height) / 2) ;
var left_position = (Math.floor(image_width / 2)) - 50; // Subtract width of custom icon
$('.jbn-nav-right-touch-area').append('<img id="custom-icon" style="cursor: pointer; display: block; left: ' + left_position + 'px; opacity: 1; position: absolute; top: ' + top_position + 'px; z-index: 9999;" src="custom_icon.png" width="50" height="50" alt="custom icon" />');
}, 750);
}
jb.onImageChange = function() {
set_icon();
};
jb.onShowThumbs = function() {
set_icon();
};
$(window).resize(function() {
set_icon();
});
$(document).ready(function() {
$('body').on('click', '#custom-icon', function() {
jb.toggleExpand();
});
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
Notes:
(1) The custom icon is appended to the right navigation hit area (rather than the main image itself) to avoid z-index issues.
(2) The setTimeout() delay is required for the repositioning of the custom icon when the thumbnails are toggled on and off and when the gallery is closed from its expanded state.
(3) The code above works only when imageClickMode="NONE". If using imageClickMode="NAVIGATE", then you'll need to add onclick="jb.toggleExpand()" as an attribute to the dynamically added <img> tag due to click handler binding issues (not ideal but the only workaround I've found so far.).
(4) Hooking into the onShowThumbs() and onImageChange() Juicebox-Pro API methods, the custom icon does not disappear as quickly as it should before being repositioned (but this may not be a problem if all your images are the same shape and size and you do not allow the thumbnails to be toggled on and off).
I realise that this is far from ideal but it's the only functional solution I've been able to come up with so far.
(I'd still recommend working with the available configuration options within the design parameters to ensure a problem-free solution.)
You're welcome.
I hope you get on OK with the information in the forum post.
It sounds like your own custom elements may somehow be overlapping the navigation buttons (and that you might need to raise the z-index of the navigation buttons). However, one problem seems to be leading to another and things seem to be escalating quite quickly.
It might not be your ideal solution but it would be much easier to compromise and use the gallery's own Expand Button (on the Button Bar). You can have the Button Bar be positioned in the top-right of the main image (rather than the top-right of the gallery) by setting buttonBarPosition="OVERLAY_IMAGE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section).
Rather than apply z-index values to many elements (both your own custom elements and gallery elements), you might like to try changing the value of imageClickMode ('Customize -> Main Image') from its default value of NAVIGATE (where clicking anywhere on the left or right side of a main image will navigate to the previous or next image respectively) to NONE (where clicking only on the navigation buttons will navigate through the images).
This might help.
If you like, please post back with the URL to your gallery so that I can take a look at the problem for myself and hopefully help further.
I would expect it to be possible to attach a click handler to a custom icon overlaid on top of a gallery image (although I've not tried it myself).
The problem might be that there are transparent layers on top of the main image (the hit areas for navigation) which are invisibly obscuring your custom icon.
Try giving your custom icon a high z-index value (such as 9999) via CSS to ensure that it is stacked on top of all other gallery elements.
Hopefully this will work.
You can set showThumbsOnLoad="FALSE" (for when the gallery is displayed in Large Screen Mode) and showSmallThumbsOnLoad="FALSE" (for Small Screen Mode) to hide the thumbnails when the gallery is initially loaded.
Please note that both of these configuration options are Juicebox-Pro configuration options only which, unfortunately, are not supported by Juicebox-Lite (the free version).
If you are using Juicebox-Pro, then these configuration options can be found in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section and, if you are using the Drupal module, then Pro configuration options can be entered entered into the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').
If you're looking to have a responsive gallery (whose size changes depending on the size of the browser window), then maybe this forum post will help.
https://juicebox.net/forum/viewtopic.php?pid=8305#p8305
Both of the methods in the forum post above simply resize the gallery as required (rather than reloading it).
I hope this points you in the right direction.
I'm glad that you've been able to adapt my example.
Thank you for sharing your own solution for Drupal.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.