Topic: Can't get thumbnails to align left

Just bought Showkase pro and am customizing the Kosel theme. I can't get the thumbnails to align left and immediately below the main image.
Also, can't get the Gallery title position to move from the default - bottom left. Tried all the different positions in the General settings but it stays at the bottom left.

work.joecrockett.com/artsy/

Re: Can't get thumbnails to align left

I can't get the thumbnails to align left and immediately below the main image.

The default value for maxThumbColumns is 10 but your gallery has only 8 images so Juicebox will be reserving enough space for 10 thumbnails, leaving room for extra thumbnails which your gallery does not have. Try setting maxThumbColumbs="8" (in the 'Thumbnails' section).
It might be difficult to exactly align the thumbnails with the left-hand edge of the main image (Juicebox will reserve space for the thumbnail navigation buttons which will be required in a narrow browser window and thumbnail padding will also need to be taken into consideration) but you could perhaps use imagePadding to line them up and also set thumbNavPosition="BOTTOM" to position the thumbnail navigation buttons below the thumbnails, clearing some space to their left.

Also, can't get the Gallery title position to move from the default - bottom left.

The 'ARTSY' text below your gallery is actually the Showkase page title ('Page Content -> Page title') rather than the Juicebox Gallery Title.
If you want to move the page content (including the page title) from below the gallery to above the gallery, then it is not possible with the available interface options and you'll need to edit one of the Showkase source files.
Open the 'showkase/_themes/base/pagetypes/juicebox.tpl' in a plain text editor.
Cut lines 18-23 inclusive:

      <section class="page-body">
        <h2 class="page-title">{$ss_pageTitle}</h2>
        <div class="body-content {$pageBodyLayout}">
          {$ss_pageBody}
        </div>
      </section>

... and paste them to immediately below line 2:

{block "content"}

Please note that the line numbers refer to the current version of Showkase (v1.6.1).

Be sure to re-publish your site after making this change.

Re: Can't get thumbnails to align left

The thumb count was the problem. Thanks!

To fix the gap on the left side that is set aside for the nav icon, I added to the custom.css file the following to get it to align left with the image block:

.jb-idx-show-area {
left: 5px !important;
}

Now...
just want to get the thumbs bar to stick to the bottom of the image rather than float to the bottom of the page depending on page height.

Any ideas on how to get the thumbs to stay immediately below the image no matter what the height of the page is?

Re: Can't get thumbnails to align left

The thumb count was the problem. Thanks!

You're welcome!

To fix the gap on the left side that is set aside for the nav icon, I added to the custom.css file the following to get it to align left with the image block:

I'm glad you've been able to left-align the thumbnails to your liking. Thank you for sharing your solution.

Any ideas on how to get the thumbs to stay immediately below the image no matter what the height of the page is?

If you are looking to always have the top of the thumbnails flush against the bottom of the main image, then the only way to do this using the available configuration options would be to set imagePadding="0" and thumbPadding="0" and then either set imageScaleMode="FILL" (probably not appropriate for your gallery) or ensure that your images are large enough that they will always need to be dynamically scaled down slightly by Juicebox to fit within the gallery's image area when the gallery is displayed.

Otherwise, you could perhaps use some custom CSS such as the following to move the thumbnail container (and its navigation buttons) up slightly. (However, I would always recommend using the available configuration options where possible as Juicebox will not know of any custom CSS modifications that you make. Juicebox may expect certain elements to be in certain places and shifting them around via CSS may lead to unforeseen problems and unwanted knock-on effects.)

.jb-idx-thumbnail-container, .jbn-nav-button  {
    margin-top: -20px !important;
}

Again, this will work only if all your images are larger than the gallery's image area. If any of your images are smaller than the image area and are not dynamically scaled up (check your gallery's imageScaleMode value), then there may be a gap below your main images. (There is no easy way to always just attach the top of the thumbnails to the bottom of the main image.)

Re: Can't get thumbnails to align left

To keep the thumbs from floating on large screens, I attached it to the top. Seems to be the easiest solution.
Thanks for your help and appreciate your quick responses.

Re: Can't get thumbnails to align left

You're welcome.
I'm glad you've found a suitable compromise.
Thank you for letting me know.