Topic: Black area below the caption
Hi again, Steven. Newbie Bob here again. Can you please tell me how to get rid of the black area below the caption? It was not there in my previous gallery exported from Lightroom.
bobsgallery.digido.com
Re: Black area below the caption
First of all, it looks like you might need to increase the maxCaptionHeight (from its current value of 20) to allow the whole caption to be displayed. When captionPosition="BELOW_IMAGE" (as in your gallery), the maxCaptionHeight is used as the actual caption height (rather than a maximum). This is noted in the description of maxCaptionHeight in the Caption Options section of the Config Options page.
If you see too much space above and below the main images in your gallery, then please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?
Hopefully this will help.
3 2015-02-08 05:27:25 (edited by bobkatz 2015-02-08 05:28:40)
Re: Black area below the caption
OK, I'm learning by doing. Thanks for your patience. By putting the button bar in the overlay and setting the timeout to 2 seconds the button bar will disappear after any mouse inactivity. So now I can vertically align the image to top. Is there any way to have instant keyboard focus so the user can use the arrow keys to change slides without first having to click on an image?
All that's left now is to see if I can get the thumbs just below the image instead of anchored all the way at the bottom of the page! Would be nice, for smaller screens, etc. To avoid vertical scrolling.
4 2015-02-08 06:17:28 (edited by bobkatz 2015-02-08 06:22:46)
Re: Black area below the caption
Hi again! By editing Gallery height in index.html I can get the thumbs sufficiently close to the bottom of the image, but the copyright footer will disappear when expanding the window (by dragging). I find if I edit the page parameters in Showkase the thumbs will revert to the bottom of a big window. I then have to edit index.html's height parameter and just refresh the screen and the thumbs will move back up. It's as if index.html is not inspected all the time.
Steven, please visit bobsgallery.digido.com on a big screen (27") and drag the window large and small and watch how the copyright line disappears off the bottom when stretching big. In Sarah Lee's page http://showkase.net/demos/sarahlee/ocean-2/
the copyright is always on screen. But she's not using such large images and they don't expand much compared to mine. But still it seems that the gallery is using a lot more blank space than necessary.
5 2015-02-08 15:28:52 (edited by bobkatz 2015-02-08 15:36:49)
Re: Black area below the caption
There's a conflict between the "Publish" button, the site subhead and the gallery height (in the embed options). Here's the sequence of the "bug":
1) Change site subhead to read "Like Cinemascope? Mouseover image, click on Expand Icon --> full screen. Arrow keys change slides."
2) Update, publish
3) Subhead reads correctly
4) Tweak gallery height in embed options to fix the thumbs which migrated to the bottom of the page
5) Subhead loses the words "Mouseover image". Strange... this was a previous subhead I had a while back. Is this a database issue?
6) Try again... the sequence is a Catch-22. Sorry....
Yes, I can confirm that changing the gallery height also changes the text of the site subhead....
6 2015-02-08 15:49:01 (edited by bobkatz 2015-02-08 15:51:57)
Re: Black area below the caption
Doing landscapes and panoramas, I'm looking for my users to be able to see giant images if they have a large screen and drag the browser window size larger. The image expansion effect when dragging the window larger is quite impressive. If I use gallery height small enough (e.g. 800 px) to move the thumbs close to the bottom of the image, then the image will not expand to the full size of the browser. Only by setting gallery height to 100% can I get that wonderful effect of "infinite image expand". The footer is currently a lost cause in these conditions as the footer seems to be affected by the image size, whether the gallery is in percent height mode or pixel height mode. And the thumbs staying locked to the bottom of the image is a lost cause in this mode, too. I'm now considering putting thumbs at right side of image until we figure out a solution to this issue.
Note also that by setting gallery height to 100% then the site subhead text seems to remain undisturbed through an update/publish cycle.
Re: Black area below the caption
Is there any way to have instant keyboard focus so the user can use the arrow keys to change slides without first having to click on an image?
As noted in the short description for enableKeyboardControls in the Config Options page:
The gallery must be clicked on by the user to enable keyboard controls.
Having said that, you might like to try the following suggestion.
Open the '_themes/kosel/js/custom.js' file in a plain text editor and add the following code:
jb.onInitComplete = function() {
$('#juicebox-container').find(':first-child').focus();
};The code uses jQuery but Showkase already loads jQuery into web pages so there is no need to manually add jQuery to your site.
The code also relies on the juicebox object having been assigned the variable name 'jb'. This is already the case for all Juicebox galleries created within or inported into Showkase. However, if you embed your gallery manually, you will need to ensure that you use var jb = new juicebox({ instead of just new juicebox({.
The key to your other problem is to always leave the gallery's height at 100% in the embedding code. (Under normal circumstances, there should be no need to manually edit an HTML page created by Showkase.)
Showkase has its own gallery fitting routine to best display the gallery on the page (and always sets a gallery's height to be 100% when you create or import a gallery within the Showkase interface).
Showkase pages are responsive and change depending on the size of the user's browser window.
Manually setting a fixed height for a gallery by editing an HTML page directly is going to cause problems. (Showkase has no knowledge of any manual editing you may do and expects the height to be 100%.)
With default settings, the bottom of a gallery will rest on the bottom of the browser window (no matter what the height of the browser window is) and the user can vertically scroll down to see the page's footer below the gallery.
If you want to increase the height of your gallery, edit your Juicebox gallery page in Showkase, scroll down to the 'Override Theme Settings' section and entering a positive number for 'External fit px'. (Be sure to click 'Update' and 'Publish' afterwards.)
Re: Black area below the caption
Steven wrote: "Having said that, you might like to try the following suggestion.
Open the '_themes/kosel/js/custom.js' file in a plain text editor and add the following code:"
That's fantastic! It worked right away the first time. I'm really psyched as I definitely prefer arrow keys to the mouse for navigation.
Re: Black area below the caption
I tried external fit px a zillion times and it did not work and suddenly it does. Negative values move the footer up on the page! Why didn't it work before? I get instant response after hitting publish on this without having to redo the browser cache. Things are looking up. I'm going to try thumbs at bottom again.
Re: Black area below the caption
Why didn't it work before?
Possibly due to caching problems.
However, I'm glad you're now seeing what you should be seeing.