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!
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
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.
But I don't see any easy way to get to those other pages.
Set showSmallThumbNav="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section) and the thumbnail pages in Small Screen Mode will feature 'previous' and 'next' navigation arrows (to the left and right of the thumbnails) which you can click (or tap) to navigate through the thumbnail pages. (You will still be able to swipe between thumbnail pages on mobile devices.)
So, my feature request would be:
Many thanks for the feedback and suggestions.
It would be great if you could post your suggestions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.
You're welcome!
A Juicebox gallery is embedded into a <div> and, ordinarily, a <div>'s height will not be dependent on (or change with) the browser window's width.
However, you could have a Juicebox gallery maintain a constant aspect ratio with some custom JavaScript.
As an example, create a sample gallery with JuiceboxBuilder-Lite (following the instructions in the Getting Started Guide) and use the following code as the gallery's 'index.html' page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function doLayout() {
var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width(), 10);
var galleryWidth = parseInt(windowWidth * 0.8, 10);
var galleryHeight = parseInt(galleryWidth / 2, 10);
$('#wrap').width(galleryWidth);
$('#wrap').height(galleryHeight);
if (jb) {
jb.setGallerySize(galleryWidth, galleryHeight);
}
}
$(document).ready(function() {
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
doLayout();
});
</script>
<title>Test</title>
</head>
<body>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>The '0.8' value is just an arbitrary width for the gallery (80%) for this example. You can change this to whatever you like.
The aspect ratio for the gallery in the above example is 2:1, set by the '2' in the line:
var galleryHeight = parseInt(galleryWidth / 2, 10);Again, you can change this to whatever you like.
This works equally well for both Juicebox-Lite (the free version) and Juicebox-Pro.
You can download Juicebox-Lite (and then install JuiceboxBuilder-Lite and try out the example above) from the Download Page.
I hope this points you in the right direction and that you are able to implement a suitable solution into your own web page.
Using the native "extract" in Win10 did the trick
That's great! Thank you for letting me know.
Thank you for the quick response.
As always, great tech support from Juicebox-Pro!
You're welcome!
I upgraded to v1.5.1. It works perfectly!
That's great! Thank you for letting me know.
After I reload the projects I created in the previous version, and reprocess the images etc, then Publish, what files do I have to re-save to the server.
If you are not changing (adding/removing/resizing) any images or modifying any configuration options, then you can upgrade a gallery just by replacing its existing 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro v1.5.1 zip package ('juicebox_pro_1.5.1/web/jbcore'). (This is noted in the 'Upgrading Existing Galleries' section of the Upgrading Juicebox support page.) There is no need to re-upload your gallery's images or the gallery's 'config.xml' file (assuming that the audioUrlMp3 path has not changed).
Thanks again!
You're welcome!
@gfarrell002
The audio options within Juicebox-Pro have changed since the queries above were originally posted.
Since v1.5.1 (Version History) It is no longer necessary to provide an audioUrlOgg. (audioUrlOgg has been removed from the list of configuration options.) Only an audioUrlMp3 is now required. However, you will need to ensure that your gallery uses Juicebox-Pro v1.5.1 for this to work (otherwise Juicebox-Pro will still look for an audioUrlOgg in Firefox). If necessary, full instructions for downloading the latest version and for upgrading existing galleries van be found on the Upgrading Juicebox support page.
If upgrading your gallery to Juicebox-Pro v1.5.1 does not help (or if your gallery is already using Juicebox-Pro v1.5.1), then please check/try the following:
(1) Please check to see if the audio plays in this online demo gallery in your Firefox browser. (The audio in the demo gallery does not auto-play so please click the Audio Button in the Button Bar.) It plays fine in Firefox 55.0.3 under Windows 10 on my on PC.
(2) Please let me know what operating system and version number of Firefox you use.
(3) Please post the URL to your gallery so that I can check it out for myself and hopefully help further.
Thank you.
(Please note that the ability to automatically start the audio track playing as soon as the gallery is loaded is not supported in iOS or Android. On mobile devices, it is necessary for the user to click the Audio Button on the Button Bar to start the audio track playing. This is noted in the short description of playAudioOnLoad in the Audio Options section of the Config Options page.)
It sounds like the problem you are experiencing is due to the EXIF orientation flags (metadata) embedded within your images (and some devices, most notably phones rather than dedicated cameras, do not seem to set the EXIF orientation flag correctly).
Some imaging programs such as Adobe Photoshop have the ability to read the EXIF orientation flag and display the image in the orientation specified by the flag but other programs (such as JuiceboxBuilder-Pro) do not read EXIF information and just display the image as it is.
Unfortunately, there seems to be little consistency in how the EXIF orientation flag is handled in different programs.
No matter what decision is taken regarding EXIF orientation (whether or not to use it at all and, if using it, how to interpret it), there seems to be no single solution which will work for every scenario.
This link (whilst a little out of date now) certainly makes for interesting reading.
The only way to ensure that your images will be displayed as you expect in all programs would be to strip the EXIF information from the images (by re-saving the images in an imaging program and choosing not to keep the EXIF information) and then rotate your images until they visibly look correct.
JuiceboxBuilder-Pro has the ability to rotate images on the 'Images' tab (see the 'Rotate' arrow near the lower right of the screen in the first screenshot on this page) so you can rotate images within JuiceboxBuilder-Pro without the need to re-save them without the EXIF information first.
I hope this helps to clarify things a little.
I'm glad that you've been able to resolve your issue.
Thank you for posting back to let me know.
For anyone else encountering the "Config file not found." message, please see this FAQ:
When I view my gallery I see the message 'Config file not found'. How do I fix this?
Also, if anyone sees this message when viewing a gallery locally in Safari 11, please see this forum post for a full explanation and workaround.
... Local viewing of Galleries is now back.
I'm glad you've got local viewing back in Safari. Thank you for letting me know and for posting instructions. (I've incorporated the instructions into my post above so that I can point other users to the post and have all the relevant information in one place.)
Also, not sure by your reply if Juicebox plans to modify their programing to accommodate this new security protocol -- if that is even possible.
Unfortunately, there is nothing that can be done from within Juicebox to circumvent a browser's security restrictions. To allow local viewing in browsers which have this local file restriction (without changing any browser settings), Juicebox would need to change the way that it stores gallery data (and this would likely require some big changes).
With this small change to Safari 11, local viewing is, once again, possible (and Juicebox galleries can still be viewed locally in Edge and Firefox without any change of settings).
It certainly looks like your download of the 'juicebox_pro_1.5.1.zip' file is incomplete/corrupt and you'll need to download it again.
Once you have downloaded the file, you can check its integrity with the following properties:
Filename: juicebox_pro_1.5.1.zip
Size: 1,909,296 bytes
MD5: 650ec4e216ff1130d66e96c5ba361b64
SHA1: 7ce66e3822c37fce0f83df1bccf28528feb318f0
SHA256: bbe2c14e0625979a050d40c56c7ce89a398a761cc37d741f810071cd589dcbab
You can check a file's hashes with a program such as HashCalc (free) or HashTab (free for personal use).
If you have trouble downloading the file and you have any download accelerators or managers installed (or browser extensions which handle downloads), then try temporarily disabling them before attempting the download.
Also, you could try downloading the file using a different browser (Chrome, Edge, Firefox, Safari, Opera).
If your downloaded file has properties which match those above but WinZip still gives you an error message, then try unzipping the file using a different program. Windows (since XP) and Mac OS X both natively support zip files so you should be able to extract the file without any third-party software but, if you are a Windows user (by the look of your screenshot), you might like to try 7-Zip (free).
(I have reactivated your download link so it should not expire whilst you attempt to download the file again.)
I hope this helps.
Please let me know how you get on and if you need any further assistance.
Thank you.
Unfortunately, Safari 11 (released 19 September 2017) has introduced a new security restriction which now prevents the local viewing of Juicebox galleries by default.
Here is the relevant quote from the Apple support page detailing the issue:
Security and Privacy
Updated file restrictions to block cross origin access by default.
CORS and cross origin access from file:// are now blocked unless Disable Local File Restrictions is selected from the Develop menu.
Because this development with Safari has occurred after the most recent version of Juicebox was released, Juicebox displays the "Config file not found." message instead of the more descriptive "Juicebox can not display locally in this browser." message.
It looks like a suitable workaround should be to select 'Disable Local File Restrictions' from the 'Develop' menu.
Pull down the 'Safari' menu and choose 'Preferences'.
Click on the 'Advanced' tab.
Check the box next to 'Show Develop menu in menu bar'.
Close 'Preferences'. The 'Develop' menu will now be visible between Bookmarks and Window menus.
Pull down the 'Develop' menu and choose 'Disable Local File Restrictions'.
This should be no more of a security risk than running Safari 10 but please note that relaxing your browser's security settings should be done at your own risk.
I have notified the developers of this issue but I think there is little that can be done within Juicebox (other than to display a more descriptive error message).
As well as configuring Safari to disable local file restrictions, you should also be able to view Juicebox galleries locally in Firefox (Mac and PC) or Edge (Windows 10 users) with default settings.
Please note that this issue is specific to viewing galleries locally (from a computer's hard drive).
There is no such issue once the galleries have been uploaded to a web server where they can be viewed successfully in any modern browser (including Safari 11).
You're welcome.
I know its not the answer you were hoping for but I'm happy to comment and help to clarify things if I can.
Unfortunately, pinch-zooming within a gallery can cause of lot of problems so Juicebox does its best to lock the viewport in a full page or expanded gallery to avoid as many of these potential pitfalls as possible.
Pinch-zooming can actually be quite difficult to do as the start of a pinch-zoom gesture can often be misinterpreted as the start of a swipe (navigation) gesture and it can be quite frustrating to try to pinch-zoom only to find that the gallery has changed the image.
Also, if you were to zoom in successfully, you'd likely have the same trouble trying to zoom out again, possibly more so as you may have only part of the image visible and all of what is visible has a swipe gesture associated with it. (It might be easier to zoom out if there was a static part of the web page visible where the pinch-zoom gesture would not be mistaken for anything else.)
Additionally, there is a further problem whereby repeated zooming in and out can sometimes change the height of a full page or expanded gallery. (The developers are aware of this and are looking into possible solutions.)
In order to avoid these problems, Juicebox tries to lock the browser viewport to prevent pinch-zooming in a full page or expanded gallery.
If you have an gallery embedded in a web page whose viewport is not locked, then you might find that you are able to pinch-zoom an image but I would not recommend it. It is much safer, as you suggest, to just open the image in a new window where it can be pinch-zoomed with ease.
In an ideal world, the ability to pinch-zoom an image within a Juicebox gallery would be great but the reality is that it can be really troublesome so it's best avoided if possible.
Thank you for pointing this out. It is, indeed, an oversight.
The version number was updated in the 'readme.txt' file but not the 'wp-juicebox.php' file.
We will update the file on our servers as soon as possible.
However, please note that there was no change to the plugins's own files between v1.5.0.1 and v1.5.1 (the only difference being the bundled version of Juicebox-Lite) so, if your version reads v1.5.0.1 (whether it is actually v1.5.0.1 or v1.5.1 mislabelled) and you have upgraded the plugin with Juicebox-Pro, then you will have the latest files and full functionality.
Thanks again for letting me know.
Edit:
Updated 'wp-juicebox.zip' file now on server.
You can download it from the plugin's support page here.
I am pulling images from Flickr. That being said, it only shows 50 images.
As you have discovered, if you use Flickr as a source of images, you may need to increase the flickrImageCount from its default value of 50 to a higher value (such as its maximum value of 500). (Incidentally, this maximum value is imposed by Flickr rather than Juicebox.)
In a WP-Juicebox gallery within WordPress, set flickrImageCount="500" in the 'Pro Options' text area.
I also noticed that when I check out the version number for the plugin on wordpress that is displays the older version (Version 1.5.0.1).
It sounds like you may have updated the plugin's 'jbcore' folder but not the plugin itself.
You can download the latest version of the plugin (v1.5.1) from its support page here.
(The only difference between WP-Juicebox v1.5.0 and WP-Juicebox v1.5.1 is the version of Juicebox-Lite that it comes bundled with. There is no other difference so if your plugin version is v1.5.0.1 and it uses the Juicebox-Pro v1.5.1 'jbcore' folder, then it's actually as up-to-date as it can be.)
The other thing I notice is even though I have ordered my Gallery on Flickr the images don't seem to follow the order I have placed them in... Not sure why.
Please see this FAQ:
How do I change the order of images from Flickr?
Please also see the flickrSort configuration option in the Flickr Pro Options.
You could also create Flickr sets (pointing towards them using the flickrSetId configuration option in the 'Pro Options' text area), in which case this FAQ should be useful:
How do I change the order of images in a Flickr Photo Set?
Would you happen to know how I can hide the gallery title from being visible.
Set galleryTitlePosition="NONE" in the 'Pro Options' text area and your Gallery Title will not be displayed in the gallery.
I was trying: galleryTitle="" but it didn't seem to work. I think it is being overruled by the actual title I have entered... because it doesn't stay displayed in the Pro Options area.
galleryTitle disappears from the 'Pro Options' text area as it is a Lite option which has its own input field in the gallery settings window. (Only one galleryTitle can be entered per gallery and only the specific 'Gallery Title' input field is used.)
Sorry for all the questions.
No problem.
I hope I've been able to clarify a few things for you.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.