• Registered: 2022-09-02
  • Posts: 2

Topic: Unwanted black margins [SOLVED]

Fairly new to JB-Pro but all main galleries on christopherhensher.com are working fine. Now testing out an auto-play box with no user participation permitted in which I do not want the images to be cropped. The test is at https://christopherhensher.com/chboxtester.html. I think I have tried everything but can't seem to get rid of the black bands surrounding my images. Where am I going wrong please? These are the config settings:

    galleryTitle="Chris Hensher - Landscape"
    enableAutoPlay="true"
    showAutoPlayButton="false"
    showInfoButton="false"
    showNavButtons="false"
    showEmailButton="false"
    emailAddress="webrequest@christopherhensher.com"
    emailSubject="Enquiry"
    captionPosition="NONE"
    galleryTitlePosition="NONE"
    backButtonPosition="NONE"
    showSmallBackButton="true"
    backButtonUseIcon="true"
    backButtonUrl="https://www.christopherhensher.com/gallerymenu.html"
    flickrShowTitle="false"
    galleryTitleHAlign="CENTER"
    imageTransitionTime="2"
    buttonBarPosition="NONE"
    captionHAlign="CENTER"
    goNextOnAutoPlay="false"
    backButtonText="Albums"
    enableLooping="true"
    showExpandButton="true"
    showThumbsButton="true"
    useFullscreenExpand="true"
    maxImageWidth="560"
    imageClickMode="NONE"
    imageTransitionType="CROSS_FADE"
    showImageOverlay="NEVER"
    showImageNav="NEVER"
    showOverlayOnLoad="false"
    maxThumbRows="0"
    showThumbsOnLoad="false"
    showSmallThumbsOnLoad="false"
    showSmallThumbsButton="false"
    showSmallPagingText="false"
    autoPlayOnLoad="true"
    showAutoPlayStatus="false"
    autoPlayThumbs="false"
    backgroundColor="rgba(255,255,255,1)"
    imageFrameColor="rgba(255,255,255,1)"
    expandedBackgroundColor="rgba(255,255,255,1)"
    imageShadowColor="rgba(255,255,255,1)"
    captionBackColor="rgba(255,255,255,1)"
    captionBackTopColor="rgba(255,255,255,1)"
    buttonBarBackColor="rgba(255,255,255,1)"
    topBackColor="rgba(255,255,255,1)"
    textShadowColor="rgba(255,255,255,1)"
    thumbShadowColor="rgba(255,255,255,1)"
    thumbDotColor="rgba(255,255,255,1)"
    navButtonBackColor="rgba(255,255,255,0.4)"
    showSplashPage="NEVER"
    backgroundScale="NONE"

Hope you can help!

Chris

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

Re: Unwanted black margins [SOLVED]

The problem occurs because your gallery has a fixed size and shape (a fixed aspect ratio) but your images are of different shapes and sizes and, when using the default imageScaleMode (SCALE_DOWN), the images are scaled to fit within the gallery without cropping but if the images do not have exactly the same aspect ratio as that of the gallery itself, then there will be some space surrounding the images in the gallery (either to the left and right or the top and bottom, depending on the image's aspect ratio). The space surrounding the images will show up as the gallery's background color.

The solution would be to give your gallery a fully transparent background color (rather than the default grey color) so that the space surrounding the images is not visible.

In your gallery's embedding code on your 'chboxtester.html' page, change:

backgroundColor: 'rgba(34,34,34,1)'

... to

backgroundColor: 'rgba(0, 0, 0, 0)'

This should hopefully resolve your problem.

Incidentally, I notice that you do have a solid white backgroundColor set in your gallery's 'config.xml' file (which would also work as as it would invisibly blend in with your embedding page's background color which is also white) but configuration options set in the gallery's embedding code take precedence over configuration options set in the 'config.xml' file (as noted in the short Setting Config Options support section) and you still have the default grey backgroundColor set in the embedding code.

  • Registered: 2022-09-02
  • Posts: 2

Re: Unwanted black margins [SOLVED]

Yes, that has resolved the problem. Thanks very much for your prompt response. It's also woken me up to the possibilities for using the same gallery in different ways in different locations and circumstances by over-riding object properties in the embed code.

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

Re: Unwanted black margins [SOLVED]

That's great! Thanks for letting me know.