troubleshooting JavaScript gallery

[matsushima]

Hello, smallweb!

I'm hoping you can help me out with this. I use Juicebox [free version] for gallery pages and I've never had much trouble with it… until now. The gallery appeared normal on my old layout but on my new layout, it's oddly squished down.

I've looked through the gallery code and my CSS and I don't see anything that would compress the gallery like that but…?

I would appreciate any suggestions on how to fix it or alternate gallery templates. (I don't want to create a new page for each image so I would prefer something JavaScript-based like I'm currently using.)

Thank you!

Comments

[taichara]

I don't know if this would do the trick as an alternate or not but I just came across it this weekend --

Melon's Gallery Maker

[rabbitpiedreams]

Hi! I tested this out in my browser and some weird stuff happened, but I did get it working.

looks like this is an issue with the embedding height. They have a solution here, asking you to set the height of the containing element: https://www.juicebox.net/support/embedding/#percentage-heights .

so your code currently looks like this: <div id="juicebox-container"></div>. what you need to do is put it inside another element, like this: <div class="juicebox-parent"><div id="juicebox-container"></div></div>

And then give juicebox-parent the height you want. eg. put .juicebox-parent {height: 80vh} in your css.

Strangely, I found vh and em units didn't work as inline styles, but px did. so <div class="juicebox-parent" style="height:500px"> worked, but <div class="juicebox-parent" style="height:80vh"> didn't. Good luck!

[matsushima]

Thank you so much!