Responsive Galleria

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?

Answers


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});

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%;
}

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.


Need Your Help

Add a new element to an array without specifying the index in Bash

bash arrays

Is there a way to do something like PHPs $array[] = 'foo'; in bash vs doing:

Fetch set of images joining tables inside a while loop

php html mysql

I just register to Stack Overflow, I looked for a post like this one but what I found was a group of different posts but I'm not smart enough(yet!) to put them together to answer my question.