The Room is an image slider written in pure CSS3 and HTML5. It is part of Formir Framework but can operate independently.
The room plugin will fully work only with CSS and HTML. All of the logic is based on CSS and <input/> tag elements, that are required.
The Room gallery have manualy (button control or class name control) and automatic function of dark mode, you can set your own colors for both mode.
Copy formir-room.min.css or formir-room-black.min.css file to your application direction.
Copy code below and paste into your HTML file at a <head> part.
Copy gallery code below and paste into your site body and modify wall items and images.
This plugin is written in less (and optional sass) dynamic preprocessor style sheet language (CSS).
It is part of Formir CSS Framework. Formir gives you an idea of how to neatly sort and attach style files before compiling them in your project during the development phase.
You can use this approach or attach the only source of room plugin formir-room.less.
Choice LESS or SASS
In documentation we fucos on less preprocessor, but the same file structure and mixin / variables is used for SASS (scss), to know how install & compile sass file go to Sass documentation
Start with copy all files to your root direction:
src - your application root path
less - your less or sass direction
mixins - less mixins
room.less - all style and settings for room plugin
formir-room.less - your root file that imports all of other files
font - icons for room
Include formir-room.less into your project.
In this step, you can include formir-room.less to your main less file, or move the content of formir-room.less to your main (manifest/root) less file.
Use developer mode of less library, or compile less using backend (ex. webpack).
To use .less file on your page look at less configuration page.
Add in your <head> tag with your HTML file on developer mode:
In production mode you can also use less npm package to compile your own min.css file. Use lessc command in bash, for example: $ npm install -g less $ lessc -x less/formir-room.less css/formir-room.min.css
Set up less
The Gallery is fully configurable, each of colors, borders etc. you can change in less file less/formir/plugins/room.less.
Pure CSS gives us some limits, before a start, please set up a maximum number of items in your gallery before compiling the project, remember The higher the number you choose, the more your CSS will weigh.
@room-max-walls: 30; // number of max count of walls / items
Dimensions of the room wall
You could set wall dimensions but not with % variables, you can use rem, px, we recommend variables of viewport vh / vw.
@room-size-width: 100vmax; // gallery wall width - do not use %
@room-size-height: 100vmin; // gallery wall height - do not use %
Set up your perspective, zoom, and scale, for the best-suited three-dimensional experience.
@room-perspective: @room-size-width; // gallery prespective - use room size for best perspective
@room-scale: 1.1; // scale of room
@room-scale-zoom: 1.5; // scale of room when zooming
@room-offset-y: 0; // room offset in vertical (y) - use %
Easy change class name of all elements to prevent name duplicate on your app.
@room: room; // main wrapper
@room-body: room-body; // body of room
@room-arena: room-arena; // next wrapper coled arena
@room-walls: walls; // walls in 3d
@room-item: item; // item to display on the wall
Plugin work without JS so we control your gallery with <input/> tag, each separate input for each item on the gallery.
Inputs and labels are related with id and for an attribute, so for each item, we will need one input, one label for navigating (next / prev), and one label for dot (for jump). That is all the logic that you need to know.
Good to know
If you put many gallery in one page use also unique ID for each <input/> tag in your gallery code, also group of <input/> must have unique NAME attribute.
Try to not include your gallery <input/> within <form> tag if you don't must, other wide you have to clean input element before sent form if you don't have any undesirable effects.
Some browsers save state of <input/> - if you do not want this future just set AUTOCOMPLETE="off" attribute to each <input/>.
Ordering items on the walls
A cube which is the room that has 6th wall, flor ceils and 4 walls. Every wall has own items to display. All you have to do is apply items <div class="item"> with your image to each wall <div class="wall"> with specify order.
First goes item from :first wall, next goes :first item from the second wall, then :first item from the third wall and :first item from the fourth wall. If you have more then 4 pictures, this process will continue, :secound item from the first wall and so on and on in the circle.
Gallery has a function to switch to zoom mode, in that case, you can switch to this mode by clicking the button. In zoom mode dots are hidden, and you see only the one front image, you can switch images by clicking the next / prev button.
Dark mode control
Gallery has a function to manualy switch to dark mode, you can switch to this mode by clicking the button. Dark mode will automoticly turn on when browser is using dark mode.
// style for floor
// style for each wall
// style of ceil of room
// style description below image
// style for current pagination of dot button
// style for all buttons
// style for prev button
// style for next button
// style for exit button
// style for zoom button
// style for dark mode button
// style for activated dark mode on button
Known Edge ( < 80 ) bug:
Many user repor us the same issue at Edge browser with cuting images after interaction with gallery. This is know issue of Edge browser (mixing rotate-3d and animation https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16452345/ unfortunately this page not exist), solution is to use JS short code and for example jquery (it will be not part of package):
Supported browsers and OS:
FF >= 20
Safari > 8
Chrome >= 35
Opera >= 22
Edge >= 12 (with JS fix)
Edge >= 80
Android >= 4.0
iOS > 8
Tested on the above-mentioned browsers.
To fully works browser need support 'perspecitive' and 'flex' CSS properties.