Steven @ Juicebox wrote:
I hope this at least helps to reassure you that Juicebox is still alive and well!
That's good to know :)
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by haggis999
I hope this at least helps to reassure you that Juicebox is still alive and well!
That's good to know :)
The 'Home' icon is the Back Button, displayed when backButtonPosition is set to either TOP or OVERLAY (and backButtonUseIcon is set to TRUE).
You can have the Back Button redirect to any web page you like by setting backButtonUrl (in JuiceboxBuilder-Pro's 'Customize -> Back Button' section).
The value for backButtonURL can be a relative path (relative to the web page containing the gallery's embedding code) or an absolute path (starting with either http:// or https://), for example:backButtonUrl="http://www.example.com/index.html"For reference, a list of all Back Button options can be found here.
I hope this helps.
Hi Steven,
Thanks for rapid response. I probably knew a couple of years ago that the Home icon was associated with the Back Button settings, but I had long forgotten this connection...
BTW, I'm getting a little worried about the lack of any updates to Juicebox since 2017. I would be happy to pay for Juicebox 2 to ensure that it keeps working in a safe and secure manner.
The Home icon on Juicebox galleries successfully takes the user back to the default home page, which has normally met my needs. However, I now have a couple of new galleries where I wish to direct the user to different pages. Is there a facility for defining the target 'Home' page for each gallery?
.... Such modifications (using internal CSS classes and custom JavaScript) are not officially supported (but you can use them at your own risk) .... I just have to rifle through the 'theme.css' file and use my browser's developer tools to try to figure out how to achieve something (like the code I've posted above) ....
I fully understand your position on this and am happy to take the risk of using code that is not officially supported by Juicebox. Such code is not really any different from all the other code on my website, for which I have sole responsibility.
The reality is that your 'unofficial' support is of a very high order and is much appreciated. I am extremely pleased to have chosen Juicebox and I can't think of another software supplier that offers such a prompt and detailed level of assistance. The company and its customers are both very lucky to have you on board!
Thanks for pointing out the existence of theme.css, though I really ought to have found that for myself.
I have since discovered that it is better to set enableLooping="TRUE" when autoplaying multiple galleries. This suppresses the 'AutoPlay OFF' message and thus makes it unnecessary to tweak the delay time. Your Javascript code for jumping to the next gallery takes precedence over looping back through the current gallery.
Further testing has shown that using enableLooping="TRUE" is also not a perfect solution. When Autoplay is in effect at the time of reaching the final image on Android and iOS devices, my auto-switch to the next gallery is preceded by a brief display of the first image in the current gallery. That's actually far worse than seeing the 'AutoPlay OFF' popup at the end of each gallery, so I have now reverted to using enableLooping="FALSE".
Once again, you have provided an excellent solution to my requirement :)
Given that the user has been operating in manual mode before clicking the Autoplay button there didn't seem much need for a serious delay before switching to the next gallery, so I reduced that from 5000ms to 500ms. Other than that, and replacing your alert with my window.location.href command, no other changes were needed.
Are such things as .jb-bb-btn-auto-play').click(function() and your CSS class details (e.g. .jb-bb-btn-auto-play').first().hasClass('jb-status-playing')) documented anywhere on the Juicebox website?
I'd recommend storing the configuration options in the 'config.xml' file, though (as JuiceboxBuilder does).
This means that if you edit a gallery in the future, you just need to upload the new version of the 'config.xml' file (generated by JuiceboxBuilder) rather than having to manually edit the HTML file that the gallery is embedded into.
I agree that using config.xml is the most convenient approach.
I have now added your Javascript code for autoplaying multiple galleries. It appears to work fine, after making one adjustment; I had to choose a delay time that was 200ms less than the gallery display time in order to stop the 'AutoPlay OFF' message from appearing on my Windows PC screen (though it still pops up on Android/iOS). Once again, many thanks for your help in making this possible.
I have since discovered that it is better to set enableLooping="TRUE" when autoplaying multiple galleries. This suppresses the 'AutoPlay OFF' message and thus makes it unnecessary to tweak the delay time. Your Javascript code for jumping to the next gallery takes precedence over looping back through the current gallery.
One further enhancement to this process would be for the autoplay of multiple galleries to be initiated by the user clicking the Autoplay button while on the last image of the current gallery. At present, clicking the button in that situation briefly turns on Autoplay, but it is then automatically turned off.
After manually stepping through a gallery, with enableLooping="FALSE", clicking the Autoplay button on the final image will have no useful effect. With enableLooping="TRUE", it will start to replay the current gallery. In both cases, I would really prefer it to trigger a jump to my next gallery, but after checking out the API options I doubt if this is possible, so I have taken the option of always jumping to the next gallery by removing the jb-status-playing condition from your Javascript code. Have I missed another way of handling this?
Note that my current set of six associated image galleries can now be found here:
http://www.southamptoninternationalexhi … index.html.
All is now clear. I'd never previously noticed that my embedding code also included a backgroundColor setting.
Up to now, all of my configuration tweaks have been done via the config.xml file. Are there any advantages to doing this via the embedding code instead?
I've tried playing with backgroundColor and expandedBackgroundColor settings in a config.xml file, but only the latter is having any effect. No matter what setting I choose for backgroundColor (such as "rgba(153,153,0,1)"), the background remains black. What might I be doing wrong?
EDIT: I have now added your Javascript code for autoplaying multiple galleries. It appears to work fine, after making one adjustment; I had to choose a delay time that was 200ms less than the gallery display time in order to stop the 'AutoPlay OFF' message from appearing on my Windows PC screen (though it still pops up on Android/iOS). Once again, many thanks for your help in making this possible.
One further enhancement to this process would be for the autoplay of multiple galleries to be initiated by the user clicking the Autoplay button while on the last image of the current gallery. At present, clicking the button in that situation briefly turns on Autoplay, but it is then automatically turned off.
I had previously ignored captionBackTopColor, as I just assumed (wrongly) that it referred to some option for placing the caption at the top of the screen. However, thanks to your explanation, I now understand that is actually associated with background gradient control. Juicebox is an impressively customisable application!
BTW, I still haven't got around to trying out your proposed solution for autoplaying multiple galleries, but I have been getting a little more acquainted with Javascript and the Juicebox Pro API. Using getScreenMode(), my custom gallery menu HTML code is now set differently for Large Screen Mode and Small Screen Mode (the SSM version is more compact and uses a smaller font).
Thanks, Steven. That fixes my problem in Small Screen Mode.
My previous (default) setting was captionBackColor="rgba(34,34,34,0.3)", whose effect was much less obvious in Large Screen Mode, where the caption background graduates upwards to full transparency (I didn't even see this background until I looked for it). In Small Screen Mode, this graduated effect does not appear to be present, thus creating a clearly obvious caption bar background.
Is there any way to turn off the translucent horizontal background of the caption bar that can partially obscure the main image in Small Screen Mode?
I would prefer it if only the caption and title text overlaid the image, which is what happens in Large Screen Mode.
Thanks as always, Steven, for a very useful response. I will give that solution a try as soon as I get some free time.
EDIT: That was actually a very quick fix, which worked perfectly :)
Your suggestion specifically addresses my stated preference for configurable tooltip text, but my original point still stands. The default text of 'Close Gallery' is simply wrong and should be corrected.
Misleading tool tip text for Gallery Expand/Contract button
In my own Juicebox Pro galleries, the Gallery Expand button doesn't actually expand anything. It just hides any text I have added via my HTML markup, though I am willing to believe that expansion might occur where the configuration allows. I therefore don't have a problem with the tool tip text of 'Expand Gallery' that appears when you hover over the button.
However, I do have a problem with the tool tip text of 'Close Gallery' that applies to the button that contracts an expanded gallery. That text is incorrect. The gallery is not closed. It simply shrinks (where applicable) and displays the text that was hidden by the Expand Gallery process.
The opposite of Close is Open. The opposite of Expand is a word such as Shrink or Contract. However, I would actually prefer the tool tip text to be configurable. In my own case, 'Show Menu' / 'Hide Menu' would make far more sense.
Thanks for that, Steven. I hadn't previously been aware of the maxCaptionHeight setting. That should fix any truncation problem.
Please allow both Home icon and gallery title to be left-oriented
Another layout issue emerged when I added a back button Home icon to the top left of my gallery page. This overlapped my existing left-oriented gallery title setting.
Retaining the left orientation of both items is a good way to leave the centre of the page for the main image (especially on small screens). I would therefore appreciate a Juicebox coding change to automatically move a left-oriented gallery title just enough to the right to allow coexistence with a left-oriented Home icon.
Many thanks for that detailed reply, Steven. At present, my Javascript skills are rather limited and it's been a few years since I messed with any Javascript coding, but I will have a go at this once I have reminded myself of some of the basics.
I have just noticed a quirk when my current set of galleries (ref link on post #23) is viewed on an iPhone. When the splash screen is first displayed, I am given a default 'VIEW GALLERY' option to view the first gallery. It also shows my menu for selecting any one of my six galleries. If I take the default option, it opens up in slideshow mode with AutoPlay turned on, as per the setting in all my config.xml files. However, if I select the same or any other gallery from my menu then 'VIEW GALLERY' opens up a matrix of thumbnails, leaving the user to guess how to start the slideshow. Tapping the first thumb takes you to the slideshow display, but with AutoPlay turned off.
That raises two questions.
Why does the default 'VIEW GALLERY' option (shown via my jbgallery.html page) generate a different result than my menu selections when they all invoke the same set of index.html files?
Why is my AutoPlay setting frequently being ignored in small screen mode?
When I configure Juicebox Pro to place my titles, captions and main image in the centre I expect them to be aligned horizontally in the middle of the gallery window. This is exactly how it works if image numbering is turned off. However, as soon as I specify the use of image numbering, the titles and captions are moved to the left and out of alignment with the main image. The result is untidy and might even be the result of a coding error. I can't see any reason for the image numbers to have any effect on the location of titles and captions (unless they are competing for the same space on a very small screen).
Can we get this fixed please?
Excessive wrapping and truncation of caption
Another issue in this area appears on small screen devices, such as mobile phones, especially in portrait mode. Here the title, caption and main image are often all confined to the width of the screen. The title and image number are on the same row and some text wrapping of the title can be unavoidable. That's fine, but the handling of the caption below is poorly implemented. The caption is subjected to the same width constraint as the title, despite not having to fight for space with the image number.
The result is that many of my captions are being unnecessarily wrapped to four lines, made much worse by the fact that Juicebox only shows three of those lines!
I would appreciate a fix to this bug as soon as possible.
EDIT: Please ignore my claim that there is a bug causing unnecessary wrapping of captions!
I am no longer seeing this unnecessary wrapping and it looks like I mistakenly blamed Juicebox for the previously observed behaviour. There were line breaks buried in the caption text that I imported from a database. These line breaks were subsequently removed, but I strongly suspect that they were still in place when I reported the wrapping issue. Sorry about that!
Thanks for that link showing how few users disable Javascript. I will stop worrying about them!
I now need only one more thing to make my Juicebox Pro gallery match the capabilities of my old Flash-based gallery. This is a way to make a set of six galleries automatically display one after the other on a permanent loop, assuming that Autoplay is in effect. At present, the user has to manually select each gallery in turn, as you can see via the link I provided in an earlier post (#23).
Can you point me towards any existing solutions for this requirement?
If displaying the image number, then space is reserved for it at the right hand side of the caption area.
The caption text is then centered (if captionHAlign="CENTER") in the remaining area.
I think this is probably a design choice rather than a coding error but, if you like, you can post feedback and suggestions in the Feature Requests forum thread where they will be seen by the developers.
I hve done as you suggested and made a post on that other forum thread.
I've just tried entering a string of entries at the beginning of an image title and and an image caption in JuiceboxBuilder-Pro and it seems to work as expected for me (displaying spaces before the text).
Please provide a link to a gallery which demonstrates this problem so that I can investigate further. Thank you.
Sorry, it looks like I might have made a typing error the first time I tried this. I've just tested this again and it all works fine. However, I'm not sure that I have the patience to correct the alignment of all my titles and captions with loads of entries!
The code you are referring to is the SEO Content Code, intended to help with Search Engine Optimization. It also allows gallery images to be seen in browsers which do not have JavaScript enabled (but this is not the code's primary purpose).
I hadn't realised this code was primarily there for SEO purposes. With any luck, most users will view my galleries with Javascript enabled...
Misaligned image titles and captions
When I configure Juicebox Pro to place my titles, captions and main image in the centre I expect them to be aligned horizontally in the middle of the gallery window. This is exactly how it works if image numbering is turned off. However, as soon as I specify the use of image numbering, the titles and captions are moved to the left and out of alignment with the main image. The result is untidy and might even be the result of a coding error. I can't see any reason for the image numbers to have any effect on the location of titles and captions (unless they are competing for the same space on a very small screen).
Can we get this fixed please?
This problem becomes worse when you choose to have the gallery title placed in the horizontal centre of the screen. The mismatch between the gallery title and the image title is starkly obvious, and gives a rather amateur appearance to the layout.
I noted that Juiceboxbuilder generated html code in the index.html files to present a gallery in the absence of Javascript support. However, when I tested this by disabling Javascript in Firefox, the layout was a real mess. Is that all that I can expect without Javascript or have I screwed something up?
You can view my current gallery here:
Stripping out the EXIF properties from that image does indeed make it appear in the wrong orientation. As you suggested earlier, all the software I had previously used to view it must have used that EXIF data to orient it correctly (though this must been done using PixelXDimension and PixelYDimension, as there was no orientation tag present). Thanks for clarifying this topic. That issue is now fully understood and no longer poses any problem for me.
================================================================
My original problem with the various multiple gallery options was that I had failed to see the advice to read the page source, as this is only mentioned on a limited number of the demo pages. On the other hand, as I'm not a newcomer to web design, I ought to have worked that out for myself!
The following demo page contains the advice "Do a 'View Source' on this page to see the required code".
https://www.juicebox.net/demos/support/ … witch.html
However, plenty of other demo pages, like the following, contain no such advice. That omission might be worth rectifying.
https://www.juicebox.net/demos/support/ … /gallery1/
================================================================
I can't see any option for scaling the thumbnails. Have I missed something? When I shrink the window for my Juicebox Gallery the main image reduces in size but the thumbs remain unchanged. You can even reach the point where the thumb is actually bigger than the main image (though obviously this would prompt the user to turn off the thumbnail display).
================================================================
Unfortunately, taking the option to centre the title and caption doesn't quite work correctly if you also opt for image numbering. The title and caption are pushed a little to the left and not centred on the image position. In this situation, the image number is on the far right of the screen in OVERLAY mode (or the right edge of the image if you are using OVERLAY_IMAGE) and should have no effect on the title and caption positioning. To my eyes, that clearly looks like a coding error.
I experimented with trying to correct the horizontal alignment of my titles and captions by prefixing them with a string of entries, but rather oddly these were converted by Juicebox into visible colon characters!
I guess it's possible that you've not actually seen the image in its native orientation. Maybe all the programs you've used to view the image up until now have read the image's EXIF orientation flag and have dynamically rotated it. I can't say for sure but it's certainly possible and might explain what is happening.
What exactly do you mean by 'native orientation'? Where is this specified? I've just opened the original version of the affected image in Photoshop and had a look at the Exif data. There is no orientation tag present, but it does have values for PixelXDimension and PixelYDimension that imply a specific orientation (which is correct).
The only other suggestion I can make is to perhaps reduce the font size of your caption text slightly to minimize the amount of wrapping required. If you'd like to try this, then please see this forum post for details.
I had wondered if there was a way to modify the default text size, so thanks for that useful link.
I'll get back to you later on the multiple gallery topic when I've had more time to experiment. I uploaded my current version of multiple galleries yesterday and saw it working for the first time on Android and iOS tablets and phones (impossible with my previous Flash-based gallery). Juicebox Pro is certainly well on the way to being my new image gallery solution! Thanks again for all your help :)
If you encode the ' character as %27 in the imageURL, thumbURL and linkURL entries in the gallery's 'config.xml' file, the images should hopefully display OK.
I will have a look at trying to automate that solution in the database report that generates my config.xml files, but if that's tricky to achieve then it will be easier to manually delete the apostrophes from Juicebox's copies of the images and from the filenames in config.xml.
... as I have mentioned previously, if you use only web-safe characters for image filenames, then you will have no problems in either JuiceboxBuilder or on a web server.
Using only 'web-safe' characters in my image filenames would require a major redesign of a large and complex website. Given that I have never had any web server issues caused by apostrophes, it is not viable for me to make such an effort simply to keep Juicebox happy. It is easier for me to delete the apostrophes.
JuiceboxBuilder does not ... dynamically rotate the image. It just displays the image as is.
I can't see how that statement can be true when JuiceboxBuilder has clearly changed the normal rotation of one of my images. It's easy enough to fix, but it would be nice to know what is causing this behaviour.
If you have trouble figuring out where the problem is in a manually edited 'config.xml' file, then try opening the file directly in a web browser. The browser will usually tell you what and where the problem is in the file.
Thanks for that useful suggestion.
Please take a look at the Embedding Multiple Galleries support section (specifically the View Multiple Galleries on One HTML Page Example) ... With Juicebox-Pro, you can create as many individual galleries as you like. However, if you would like to link them all together (with a navigation menu), then you would need to do so manually following the examples in the Embedding Multiple Galleries support section.
I had already checked all those sources of guidance, but it wasn't made clear that you had to write your own html code. There was a reference to the use of Javascript, but I couldn't see any sample code.
I'm using baseURLs and created my own html code for navigating to multiple galleries, though they are links to individual index.html pages, so not really a case of 'Multiple Galleries on One HTML Page'. Have you any sample code for keeping everything on a single page or is that only available via Showkase? Apologies in advance if I've missed something on one of your links!
If you set captionPosition to OVERLAY or BOTTOM (or possibly even BELOW_THUMBS, depending on where your thumbnails are positioned), then the caption area will span the entire gallery rather than just the image.
captionPosition can be found in JuiceboxBuilder-Pro's 'Customize -> Caption' section.You can also give the captions a little more horizontal room by removing the image number from the caption area (by setting showImageNumber="FALSE") as space is normally reserved at the right hand side of the caption area for the image number (e.g. "2/50").
I like having the image numbers and removing them still doesn't resolve most of my wrapping problems. Your suggestion to set captions to OVERLAY, in conjunction with horizontal centring, provides the best available solution for me. However, I still don't like it very much, as it places the text just above the thumbnails on larger screens, when I really want it just under the main image. I can understand why the caption position of OVERLAY_IMAGE should be constrained to the width of the image, but fail to see why this also applies to BELOW_IMAGE.
Juicebox Support Forum → Posts by haggis999
Powered by PunBB, supported by Informer Technologies, Inc.