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
Prepare files
Start with copy all files to your root direction:
src - your application root path
less - your less direction
formir
core
mixins - less mixins
display.less
flex.less
functions.less
plugins
room.less - all style and settings for room plugin
formir-room.less - your root file that imports all of other files
img
plugins
room
floor.jpg
Include Style
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
Setup 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 %
... more
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 %
... more
Colors of your room
Set up your background wall color, ceil, floor, and colors and shape of buttons.
You can use less mixing to quick change the whole parts of the style.
.room-floor() {
// style for floor
}
.room-wall() {
// style for each wall
}
.room-ceil() {
// style of ceil of room
}
... more
Customize class HTML
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-wall: wall;
@room-ceil: ceil;
@room-floor: floor;
@room-item: item; // item to display on the wall
... more
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.
Zoom control
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.
Use this mockup:
<div class="room">
<input id="room-sample-1" type="checkbox" name="zoom"/> <!-- This input is used for switch zoom mode -->
<div class="room-body">
<input id="room-sample-1-1" type="radio" name="animate" checked="checked"/>
<input id="room-sample-1-2" type="radio" name="animate" checked="checked"/>
<input id="room-sample-1-3" type="radio" name="animate" checked="checked"/>
<input id="room-sample-1-4" type="radio" name="animate" checked="checked"/>
<!-- ... Inputs goes here -->
<div class="room-arena">
<div class="walls">
<div class="wall">
<div class="item">
<div class="item-image">
<img src="examples/img/room/JPEG/1.jpg" /> <!-- Put your image here -->
</div>
<p class="item-desc"> <!-- Description put inside -->
<!-- Descriptions goes here -->
</p>
</div>
<!-- Fifth item goes here -->
<!-- Rest of items well ordered to this wall goes here ... -->
</div>
<div class="wall">
<!-- Secound item goes here -->
<!-- Sixth item goes here -->
<!-- Rest of items well ordered to this wall goes here ... -->
</div>
<div class="wall">
<!-- Third item goes here -->
<!-- Seventh item goes here -->
<!-- Rest of items well ordered to this wall goes here ... -->
</div>
<div class="wall">
<!-- Fourth item goes here -->
<!-- Eighth item goes here and so on -->
<!-- Rest of items well ordered to this wall goes here ... -->
</div>
<div class="ceil"></div>
<div class="floor"></div>
</div>
</div>
<div class="navigations">
<label for="room-sample-1-1">1</label> <!-- Here is your UI element with arrow for first item, link it with his <input/> -->
<label for="room-sample-1-2">2</label> <!-- Here is your UI element with arrow for secound item, link it with his <input/> -->
<label for="room-sample-1-3">3</label> <!-- Here is your UI element with arrow for third item, link it with his <input/> -->
<label for="room-sample-1-4">4</label> <!-- Here is your UI element with arrow for fourth item, link it with his <input/> -->
<!-- ... Rest of navigations (prev and next arrows) labels goes here -->
</div>
<div class="paginations">
<label for="room-sample-1-1">1</label> <!-- Here is your UI element with number for first item, link it with his <input/> -->
<label for="room-sample-1-2">2</label> <!-- Here is your UI element with number for secound item, link it with his <input/> -->
<label for="room-sample-1-3">3</label> <!-- Here is your UI element with number for third item, link it with his <input/> -->
<label for="room-sample-1-4">4</label> <!-- Here is your UI element with number for fourth item, link it with his <input/> -->
<!-- ... Rest of paginations labels goes here -->
</div>
<label class="zoom" for="room-zoom">come over</label> <!-- Here is your UI element to enter zoom mode -->
<label for="room-zoom" class="exit">exit</label> <!-- Here is your UI element to exit zoom mode -->
</div>
</div>
Setpu less file
Go to file less/formir/plugins/room.less and change your config
HTML classes setup
You can specify class names for html elements, for example, to avoid name collisions in your app, remember to change classes also on your html:
/// CLASSES (name: defualt;)
@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-wall: wall;
@room-ceil: ceil;
@room-floor: floor;
@room-item: item; // item to display on the wall
@room-item-image: item-image; // image container
@room-item-desc: item-desc; // image drescription
@room-zoom: room-zoom; // zoom control input
@room-paginations: paginations; // pagination wrapper
@room-navigations: navigations;
@room-zoom-button: zoom; // button to zoom in
@room-exit-button: exit; // button to live zoom
@room-canvas: canvas; // class for border/canvas style
Core less variables:
/// CORE
@room-max-walls: 30; // number of max count of walls / items
@room-colors: true; // enable color of button dots/arrow
@room-desc-pre: false; // enable of room-desc as pre text
.room-floor() {
// style for floor
}
.room-wall() {
// style for each wall
}
.room-ceil() {
// style of ceil of room
}
.room-pagination-current() {
// style for current pagination of dot button
}
.room-button() {
// style for all buttons
}
.room-prev-button() {
// style for prev button
}
.room-next-button() {
// style for next button
}
.room-exit-button() {
// style for exit button
}
.room-zoom-button() {
// style for zoom button
}
Supported browsers and OS:
FF >= 20
Safari > 8
Chrome >= 35
Opera >= 22
Edge >= 12
Android >= 4.0
iOS > 8
Tested on the above-mentioned browsers.
To fully works browser need support 'perspecitive' and 'flex' CSS properties.
Get Started Today
With Over 25 Unique Finishes to choose from for your feature walls
There is a feature walls finish to compliment your decor whether it’s for your feature walls at home or your business,
PJ Bros will transform your surface into a feature wall masterpiece that your guests will be amazed with the results.