Responsive Galleria

Question

I'm trying to use this plugin Galleria in its responsive mode, which basically means it will re draw itself based on its container size as the window re-sizes. The demo on the link I've provided shows a really good example. You can see that, as you resize your window, the whole gallery adjusts accordingly. Now my issue is, the plugin won't let me initialize the gallery unless a height has been specified for the DOM element that is used as its container. This means, I've had to write a whole lot of javascript code to respond window resizes - it destroys the point of it having a responsive mode quite a bit - but in the website above, nowhere can I find an explicit height specified. Can someone explain to me where I'm going wrong?

Campion

im having the same problem. If i provide a height, it will not be responsive. If i dont provide a height, it will crash telling me that it cant read the height from CSS. The developer in the example, is adding all the html dynamically via javascript. If you View Page Source, u'll see the gallery div is actually empty and then a G.init() function is called, which does all the work. Can anyone provide a solution? – Pallor

@Pallor - I've added an answer for your benefit - let me know if you find it useful – Campion

trying this solution instead https://mcmap.net/q/1314162/-resize-script-for-galleria – Pallor

Answer 1

I figured it out by myself. Posting my answer -

When initializing the gallery - specify your height in percentages - as below. I'm guessing it takes 50% of window height as its value in this case. This way, you don't need to explicitly specify heights anywhere and it works as advertised

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

Campion

I did figure that one out, however its not behaving exactly as i wanted it, so i assumed i was doing something wrong. oh well atleast one of us is happy – Pallor

height, as you declared, corresponds to the aspect ratio you wish to follow. cf. galleria.io/docs/options/height – Agonistic

Answer 2

Galleria needs a height to initialise correctly. You can do this either via CSS or JS.

If you would like it to fill the width and height of the screen, I would recommend setting a width and height of 100% via CSS. And its parent container needs to 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%;
}

Humoresque

Answer 3

The height option ( if it's < 2.0) is relative to the width of the container. So height:0.5 would have a height that is half the width of the container (w=2, h=1).

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

To keep it responsive you can use max-width rather than width when styling the container.

If the height option is set to 2.0 or more, it is interpreted as pixels. So height:2.0 will only be 2px tall.

Wellwisher