[Support request] Gallery help

[David]

Hello

I’ve set up some tabs and want to load a gallery in to each one – I’ve got it kind of working, but if you click on tab 2 or 3 the images don’t show the same as they do on the first tab…

https://www.wilstonsofavebury.co.uk/projects/galtemoore/

Any ideas why the other galleries aren’t loading properly?

I’m using this to change the standard WP gallery in to a masonry one…

https://en-gb.wordpress.org/plugins/photoswipe-masonry/

Thanks
Dave

GeneratePress 2.2.2

[David]

Hi there,

looks like its because the gallery gets ‘built’ on viewport load or screen size change. Which won’t be triggered by clicking a tab. So before that happens Gallery Container has no set height and therefore neither does the tab.

You might want to check with Photoslide to see if they have a solution.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Ok thanks David

[David]

You’re welcome.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Any other ideas how I can get the gallery to show massonry without using the plugin?

[David]

If you want to just add a normal gallery to the tab content then i may have some CSS that will do the trick

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

That would be great – would it be easy to add a lightbox?

[David]

Featherlight plugin is a really good and lightweight plugin

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Great, I’ll take a look – anymore help with the css would be great 🙂

[David]

If you can set up just a simple single column gallery on a test page i can take a look at the CSS required.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

How’s this…

https://www.wilstonsofavebury.co.uk/projects/galtemoore/

[David]

So it won’t do any clever re-ordering but try this which will apply to all single column galleries:

.gallery {
    column-count: 2;
    column-gap: 0px;
}

Or you can target each one with its unique ID like so:

#gallery-1 {
    column-count: 2;
    column-gap: 0px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Great, I’ll take a look at adding the lightbox too – thanks David

[Author]

Posts