Highlighted

Need help to set up an array of fixed-size thumbnails, but the array size is responsive

New Here ,
Mar 14, 2018

Copy link to clipboard

Copied

Hello guys, newbie here needs your help please 🙂

I have read and watched everything I can find, but still can't find a solution.

So, I need to make an array of thumbnails, the size of thumbnails stays the same. but when the browser size changes, the array changes its number of column, so as the number of rows, and everything below will move vertically accordingly, just like the old HTML. I will just need to modify the padding between the columns and rows. And when you click a thumbnail, a lightbox opens up.

This is so easy to do in HTML editor. Just a bunch of divs and simple CSS margins. But why is it so hard in Muse?

You will probably ask, why not just use the lightbox widget? I did try it, it does have the capability to auto-rearrange the thumbnails, but it has a few limits.

1. The thumbnail container and the thumbnails share the same resize option. It doesn't allow me to set the thumbnail to no resize and the container to responsive width and height. the result is, when the container shrinks, the thumbnail shrinks too.

2. Anything below the thumbnail container, including the footer, doesn't respond to the automatic height change of the thumbnail container.

I also tried to put images into a text block, but it lacks many padding and size controls.

Oh, an extra question. I was trying to add a scroll bar to the thumbnail array area, so when it reaches its longest height, instead of going super long, it gives you a scroll bar to scroll the array inside the container. Is that possible?

Any idea? Thank you so much! Deeply appreciated guys!

Views

97

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need help to set up an array of fixed-size thumbnails, but the array size is responsive

New Here ,
Mar 14, 2018

Copy link to clipboard

Copied

Hello guys, newbie here needs your help please 🙂

I have read and watched everything I can find, but still can't find a solution.

So, I need to make an array of thumbnails, the size of thumbnails stays the same. but when the browser size changes, the array changes its number of column, so as the number of rows, and everything below will move vertically accordingly, just like the old HTML. I will just need to modify the padding between the columns and rows. And when you click a thumbnail, a lightbox opens up.

This is so easy to do in HTML editor. Just a bunch of divs and simple CSS margins. But why is it so hard in Muse?

You will probably ask, why not just use the lightbox widget? I did try it, it does have the capability to auto-rearrange the thumbnails, but it has a few limits.

1. The thumbnail container and the thumbnails share the same resize option. It doesn't allow me to set the thumbnail to no resize and the container to responsive width and height. the result is, when the container shrinks, the thumbnail shrinks too.

2. Anything below the thumbnail container, including the footer, doesn't respond to the automatic height change of the thumbnail container.

I also tried to put images into a text block, but it lacks many padding and size controls.

Oh, an extra question. I was trying to add a scroll bar to the thumbnail array area, so when it reaches its longest height, instead of going super long, it gives you a scroll bar to scroll the array inside the container. Is that possible?

Any idea? Thank you so much! Deeply appreciated guys!

Views

98

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 14, 2018 0

Have something to add?

Join the conversation