Gallery info icon; jQuery

Hi all,

Site URL: https://www.brookebuilt.com/

The home page contains a gallery. 2 images have description.

On select images, there is a info icon at top right corner. When clicked, the image shrinks and description slides out.

Now I want to have the description showing up WITHOUT clicking the info icon.

I don't find any settings regarding the info icon behaviour.

I also tried to inject jQuery to simulate the click, but the debug console gave me this error:

Quote

$ is not defined

Thanks for your help in advance.

Have you declared the jquery library yet?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

I have included your line in the Page Header Code Injection area.

I thought the following will do the trick, but it does not.

Quote

$("a.icon-info").click();

What am I missing?

Hi @caseybrooke

In Design > Site Styles > Gallery Styles > Gallery Initial View - select 'Infoview'.

Magne

Thanks MagneM.

Exactly what I am trying to do.  😉

As a follow up, how do I make the description to show up on mobile view by default, like the desktop initial view?

Hi @caseybrooke

Sorry for the late reply.
I don't have a solution to the mobile issue (perhaps others who read this can help?)

If you can't figure it out you may consider change color/increase the size of the 'i'-button to make it more visible:

.ctrl-button.info {
                 top: 5% !important;
                 right: 1% !important;
}

.icon-info:before {
                  color: orange !important;
                  font-size: 40px !important;
}

An observation:
Because of the 'locked' adressbar your slideshow appears extremely narrow in landscape mode.
To enable full screen (at least in Chrome):

#fullscreenBrowser {         
         height: 100vh !important;
}
.slideshow {
          height: 100% !important;
          margin-top: 0 !important;
}

I hope this was helpful.

Magne