1 Topic by herb875 (edited by herb875 2013-10-08 14:57:58)

  • From: Germany
  • Registered: 2013-06-07
  • Posts: 14

Topic: Thumbnails not centered vertically (in relation to mainimage)

Hello,

I'm trying to build with JB pro a layout like this: Main Image left, Thumbnails (2 columns, 4 rows) on right and verticaly centered next to the main picture (the classic simpleviewer layout).

I´ve put an example online here:
http://www.abresch-studio.de/0_test/test/test.html

The Problem: The thumbnails are indeed centered vertically ... But apparently in relation to the complete gallery height. But in relation to the main image, the thumbnails are positioned too low.

Is there the possibility to move the thumbnail area to (for example) 50 or 100 pixels up? I have been trying desperately to control that via CSS. But unfortunately in the theme.css I can´t find the corresponding rule :-(

Thank you for any advice

-kai

herb875's Website

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

Re: Thumbnails not centered vertically (in relation to mainimage)

The thumbsVAlign configuration option vertically aligns the thumbnails within the thumbnail area.
If you change your gallery's captionPosition from 'BELOW_IMAGE' to 'BOTTOM', this will bump the thumbnails up a bit as the thumbnail area will no longer extend to the bottom of the gallery but just to the top of the caption area.

I would not recommend trying to tweak the position of a gallery element using CSS as it is likely to have unwanted knock-on effects. For example, when the browser window is resized and elements need to be redrawn, Juicebox will not know of your manual modifications and will not be able to take them into account.
However, if you really want to try it (and as your gallery has fixed dimensions, it may work OK), you could try adding the following CSS to the <head> section of your web page:

<style type="text/css">
    .jb-flag-large-screen-mode .jb-idx-thumbnail-container {
        margin-top: -50px !important;
    }
    .jb-flag-large-screen-mode .jbn-nav-button.jbn-left-button.jbn-nav-button-icon {
        margin-top: -50px;
    }
    .jb-flag-large-screen-mode .jbn-nav-button.jbn-right-button.jbn-nav-button-icon {
        margin-top: -50px;
    }
</style>
  • From: Germany
  • Registered: 2013-06-07
  • Posts: 14

Re: Thumbnails not centered vertically (in relation to mainimage)

steven,
since i have a fixed layout, this works perfekt. Thank you so much!

One more litle thing: Is there a corresponding method to move the main-image-nav-buttons downwards?

herb875's Website

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

Re: Thumbnails not centered vertically (in relation to mainimage)

Try the following:

<style type="text/css">
    .jb-flag-large-screen-mode .jbn-nav-left-touch-area .jbn-left-button.jbn-nav-button-icon {
        margin-top: 50px;
    }
    .jb-flag-large-screen-mode .jbn-nav-right-touch-area .jbn-right-button.jbn-nav-button-icon {
        margin-top: 50px;
    }
</style>
  • From: Germany
  • Registered: 2013-06-07
  • Posts: 14

Re: Thumbnails not centered vertically (in relation to mainimage)

steven,

perfect, thank you so much!

herb875's Website

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

Re: Thumbnails not centered vertically (in relation to mainimage)

Please note that I have just edited the code above so that it should not interfere with the Small Screen Mode rendering of the gallery. (During testing, I noticed that the Splash Page text area was offset using the original code.)