Photo Gallery image direction once enlarged

General Discussions
1

I seem to be having an issue with the direction the photos stream in the gallery once enlarged. I’ve created a collage gallery and the photos are 4 wide and in 5 columns. If you enlarge by clicking the photo, then click the arrow to view the next photo, the next photo is the one below it in the gallery and not beside or next in line. I’m hoping there is a setting that I missing.
Thanks for all your help.
Here is the link to the temporary URL: http://668.779.myftpupload.com/commercial/
Jeff

1 Like
2

Hello Jeff,

Thanks for getting in touch! The collage layout on our Gallery Module works that way, it layouts your images in columns. You can use the thumbs layout, like you did on the bottom part of the page, so you can get the proper ordering. This sounds like a good idea though, being able to determine the order of your collage gallery. Feel free to add that as a Feature Request to our User Voice Forum and we’ll see how it goes!

Ben

3

Is this something that is able to be corrected. I currently have a client that is having a hard time accepting “this is the way it is”. Please advise, I see this becoming an issue for a few other sites I’m working on.

Thanks!

Jeff

4

Hey Jeff,

Did you have the chance to put it up on our User Voice Forums? It doesn’t need to have a lot of votes before we implement it, think of it as a place where we get our ideas for future improvements. :slight_smile:

Regarding your question, that really is the way it is. If you like, you could use a more robust plugin for your gallery. I did a quick search on Google and this plugin came up. I wish I had a better answer for you.

Ben

5

Hey Jeff,

I tried playing around with the CSS on your site and it seems we can manipulate the arrangement of the images. This probably only applies to this site because of the size of the images. Try adding this CSS snippet.

.fl-mosaicflow-content .fl-mosaicflow-col {
  width: 100% !important;
}
.fl-mosaicflow-content .fl-mosaicflow-item {
  width: 24%;
  float: left;
  margin: 0 0 1% 1%;
}

This works on the desktop view. You can probably figure out how to do the rest.

Hope this helps!

Ben

6

Thanks Ben!

I’m not as intelligent as your giving me credit for:))
Exactly where do I put this css snippet. I tried putting it in the css selectors but it didn’t make a difference. Please understand I purchased BB because I’m not good at any type of “code”, and I’m very much a beginner. You’ll need to hold my hand a little here. Also, how do I change it on the mobile platform as well.

Sorry to be a pain…
I really appreciate your help on this.

Have a great day!

Jeff Bausman
Tandem Marketing and Design

7

Hey Jeff,

Yes, that’s what the Beaver Builder is for! But what we’re doing here is modifying the way it originally does things. I checked the site again and I just realized, the code above causes more problems than it fixes, mobile responsiveness wise. I would suggest trying out the plugin I mentioned above or any other gallery plugins that might suit your needs.

Just in case you want to read up more on CSS and media queries, you can check this and this. You can change the number of things you can do with Beaver Builder from a lot to infinite. :slight_smile:

Ben