• Registered: 2023-12-10
  • Posts: 1

Topic: Mobile: Long titles + thumbnail column/rows

Hi,

Love this product! Been using it since Simpleviewer SWF way back and now refreshed with Juicebox and having some minor issues:

1) For galleries that have longer titles, is there a way to have the title scroll across the top instead of static & truncated? I tried toying with jb-idx-title and jb-idx-ssm-title-wrapper but without much luck.

2) When clicking through to a gallery, (i.e. index.php#expanded URL in browser) it shows thumbnails as 4 columns and 6 rows - where to change that? maxThumbColumns, maxThumbRows only works on Desktop

Thanks

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

Re: Mobile: Long titles + thumbnail column/rows

(1) As you have discovered, there's no built-in functionality for auto-scrolling long gallery titles. You'd need to implement a solution manually using CSS and/or JavaScript (as you have been trying) but, unfortunately, I have no greater insight as to where to start than yourself. Try a web search for "scrolling text css". There are many web pages with instructions and examples which might help. The classes you might need to target are. .jb-area-large-mode-title (for Large Screen Mode) and .jb-idx-ssm-title-wrapper (for Small Screen Mode).

Here's some CSS code (add it to your gallery's embedding page) which might point you in the right direction and get you started. (The code allows for different animations for Large Screen Mode and Small Screen mode. You might need to change the values to suit your own needs.)

<style>

    .jb-area-large-mode-title {
        animation: custom-animation-large 10s linear infinite;
    }

    .jb-idx-ssm-title-wrapper {
        animation: custom-animation-small 10s linear infinite;
    }

    @keyframes custom-animation-large {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(-100%);
        }
    }
        
    @keyframes custom-animation-small {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(-100%);
        }
    }

</style>

(2) In Small Screen Mode, Juicebox automatically fills the gallery with thumbnails according to the thumbnail dimensions and the available space. There's no way to specify the thumbnail grid size for Small Screen Mode, I'm afraid.

I'm sorry that there are no easy solutions to your two queries but I hope you can work with the available options (and perhaps my CSS code above) to create suitable galleries for your website.

  • Registered: 2024-11-05
  • Posts: 2

Re: Mobile: Long titles + thumbnail column/rows

Swamper wrote:

Hi, fall guys

Love this product! Been using it since Simpleviewer SWF way back and now refreshed with Juicebox and having some minor issues:

1) For galleries that have longer titles, is there a way to have the title scroll across the top instead of static & truncated? I tried toying with jb-idx-title and jb-idx-ssm-title-wrapper but without much luck.

2) When clicking through to a gallery, (i.e. index.php#expanded URL in browser) it shows thumbnails as 4 columns and 6 rows - where to change that? maxThumbColumns, maxThumbRows only works on Desktop

Thanks

/* Apply this to the title wrapper */
#jb-container .jb-idx-title-wrapper {
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

/* Make the title scroll */
#jb-container .jb-idx-title {
    display: inline-block;
    animation: scrollTitle 10s linear infinite;
}

/* Scroll animation for the title */
@keyframes scrollTitle {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

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

Re: Mobile: Long titles + thumbnail column/rows

@ClemensKris

Thank you for your contribution but it does not seem to work (at least not for my test gallery using all default settings except for adding a Gallery Title).

Do you have a link to a gallery that demonstrates this working?