1 Topic by gfs (edited by gfs 2014-11-16 13:12:42)

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Topic: Caption position

I would like to lower the vertical position of the caption and page number.  (I'd also like them to be level!)

I'm using some CSS already for the font, so I know that is working.  Any help would be much appreciated. :)

This is a screen-grab of how I would like to alter the caption position.

http://www.grantsymon.com/Grabs/JBx-Format.png

As you'll see in the grab, I also circle the bottom of the thumbs.  Is there a way to have the thumbs extend lower?

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Caption position

None of what you are looking to achieve can be done with the available configuration options and using CSS to tweak the position of gallery elements can often involve some trial and error. Doing so can also sometimes cause unpredictable results as Juicebox will not know of any changes you make. For example, if you move an element within the gallery via CSS, Juicebox will expect it to be elsewhere and this may cause problems and/or unwanted knock-on effects (perhaps when the browser window is resized). As such, CSS modifications to shift gallery elements around are not officially supported and you do so at your own risk. That said, I hope you find the notes below helpful.

I would like to lower the vertical position of the caption and page number.

Try adding CSS code such as the following to your gallery's web page:

/* Image number */
.jb-cap-frame .jbac-number {
    margin-top: 20px !important;
}

/* Image Title */
.jb-caption .jb-caption-title {
    margin-top: 20px !important;
}

/* Image Caption */
.jb-caption p {
    margin-top: 20px !important;
}

(I'd also like them to be level!)

Some trial and error may be required but tweaking the margins (as above) should work.

Is there a way to have the thumbs extend lower?

Other than changing the thumbsVAlign setting (TOP, CENTER, BOTTOM), you could try using the following CSS code:

/* Thumbnails */
.jb-idx-thumbnail-container {
    margin-top: 20px !important;
}

/* Thumbnail Navigation Arrows */
.index-navigation.jb-navigation {
    margin-top: 20px !important;
}

3 Reply by gfs (edited by gfs 2014-11-16 22:04:56)

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Caption position

Thanks Steven!  Code for shifting the caption / numbers down works brilliantly.  (I shall add a feature request for more control over font/captions, as searching the forum for answers showed that there is a fair demand).

For the thumbs, I was meaning if there was a way to increase the number of *visible* thumbnails with regard to the percentage area of the page.

I have them set to left/left/top.  I found that if I set them to top/left/top, then they extend down the page, but as a result the main image is no longer displayed when I click or mouse-over the thumbnails, so in effect, the page is broken. (I guess this is a bug).

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Caption position

For the thumbs, I was meaning if there was a way to increase the number of *visible* thumbnails with regard to the percentage area of the page.

Juicebox determines the actual number of thumbnails displayed on the page depending on the size of the thumbnails and the amount of space available within the gallery. You can set only the maximum number of columns and rows using the maxThumbColumns and maxThumbRows configuration options respectively

I found that if I set them to top/left/top, then they extend down the page, but as a result the main image is no longer displayed when I click or mouse-over the thumbnails, so in effect, the page is broken.

This certainly sounds like a bug but I have been unable to replicate it in a test gallery of my own (using Juicebox-Pro v1.4.2).
First of all, please ensure that you are using the current version of Juicebox-Pro (v1.4.2) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, instructions to download the current version and upgrade existing galleries can be found on the Upgrading Juicebox support page.
Also, please try using the stock 'jbcore' folder (with no modifications) and display the gallery on a page of its own to see if any custom CSS code is conflicting with the gallery and causing the problem.
If the problem persists, then please post the URL to your gallery so that I can take a look and investigate further. Thank you.

  • gfs
  • Member
  • Offline
  • Registered: 2012-05-08
  • Posts: 131

Re: Caption position

Thanks Steven.  I have the thumbs set accordingly, but they don't extend very far down the stage.  Ho hum.

I made a quick screen-movie-grab to show the issue with the non-functioning thumbs (which do extend!) and I uploaded a test gallery for you to look at.

http://www.grantsymon.com/Grabs/JBx-thumbBug.mov

http://test-1.grantsymon.com/JBx-thumbBug/index.html

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Caption position

When using thumbsPosition="TOP", the thumbnail area will be above the main image area. Because your column of thumbnails extends beyond the height of the browser window, the main image will be outside the browser window (the top of the main image will be below the last thumbnail in your column) and will never be visible.
Using thumbsPosition="LEFT" instead (or reducing maxThumbRows from 100 to something much smaller) should hopefully be a suitable solution.