Responsive Gallery

Question

I am trying to use this Galleria plugin in its flexible mode, which basically means that it will loop in its container size as window size. The demo on the link I provided shows a really good example. You can see that when you resize the window, the entire gallery is configured accordingly. Now my problem is that the plugin will not allow me to initialize the gallery unless height is specified for the DOM element that is used as its container. This means that I had to write a lot of javascript code to respond to window resizing - it completely destroys the dot with high-speed mode - but on the website above I can not find the explicit height anywhere. Can someone explain to me where I'm wrong?

Answer 1

I figured it out myself. Sending my answer -

When initializing the gallery, indicate your height in percent - as shown below. I assume that in this case it occupies 50% of the window height. This way you do not need to explicitly indicate heights anywhere, and it works as advertised

Galleria.run('#gallery', {responsive:true, height:0.5, debug:false}); 

Answer 2

The height option (if it is <2.0) matches the width of the container. Thus, height:0.5 will have a height that is half the width of the container (w = 2, h = 1).

height:1.5 will result in (w = 2, h = 3)

To maintain responsiveness, you can use max-width rather than width when styling a container.

If the height parameter is set to 2.0 or more, it is interpreted as pixels. Thus, height:2.0 will only be 2px high.

Answer 3

Galleria needs a height for proper initialization. You can do this via CSS or JS.

If you want to fill the width and height of the screen, I would recommend setting the width and height to 100% via CSS. And its parent container should be 100%. See below.

 **JS:** Galleria.run('#galleria', { responsive:true, showCounter:true, thumbnails:false, trueFullscreen:true, }); **CSS:** #galleria{ width:100%; height: 100%; position: fixed; z-index: 9999; top:0px; bottom: 0px; } body,html{ height:100%; width:100%; }