hob-gallery web component

hob-gallery is a web-component build with Vue.js. Currently it's only purpose is to display one predefined categroy from holz-objekte.org.

How to use

To get things working you need to:

A) Load the css file:

<link rel="stylesheet" href="https://cdn.holz-objekte.org/css/HobGallery.css" />

You can use your own CSS to overwrite specific parts of the prepared styles or create a copy of the file and use this.

Almost every bit of the component can be reached through classes starting with: hob-gallery--

Other classes come from 3rd party libraries used for this component. (vue2-perfect-scrollbar; vue-agile) It is important that those styles are present for the component to work.

To make it easy to change the styles of this component it doesn't use shadow-dom. This freedom comes with the risk of style definitions bleeding in or out of the component. (We tried to be very specific with class names to minimize risks.)

B) Load the js file (end of body):

<script src="https://cdn.holz-objekte.org/js/HobGallery.js"></script>

To make things work on lesser capable browsers you have to polyfill:

<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>

C) Finally put the component somewhere into your content:

<hob-gallery id="hob-gallery-alpha" category="chh|vgq|top" lang="de|fr|it"></hob-gallery>

There are three languages available (de, fr, it). The default and fallback language is (de). If you don't specify the lang-property the, component looks for a language in the uri-path segments. If you specify the lang-property it takes precedence.