photogallery 1

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 5

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 3

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 4

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 2

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 6

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 7

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 12

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 8

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 9

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 15

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 11

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 10

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 14

PJ Bros Natural Materials | Limited Only by Imagination

photogallery 13

PJ Bros Natural Materials | Limited Only by Imagination

Examples

Room with lights off

photogallery 1

1st. element

photogallery 5

5th. element

photogallery 4

2st. element

photogallery 6

6th. element

photogallery 3

3st. element

photogallery 7

7th. element

photogallery 2

4st. element

photogallery 8

8th. element

Setup your own style set with less variables.

All you need is HTML:

            
              
<head> <link rel="stylesheet" type="text/css" href="css/formir-room.min.css" /> </head>
<div class="room"> <input class="room-zoom" id="room-zoom-1" type="checkbox" name="zoom-1"/> <div class="room-body"> <input id="room-sample-1-1" type="radio" name="animate-1" checked="checked"/> <input id="room-sample-1-2" type="radio" name="animate-1"/> <input id="room-sample-1-3" type="radio" name="animate-1"/> <input id="room-sample-1-4" type="radio" name="animate-1"/> <input id="room-sample-1-5" type="radio" name="animate-1"/> <input id="room-sample-1-6" type="radio" name="animate-1"/> <input id="room-sample-1-7" type="radio" name="animate-1"/> <input id="room-sample-1-8" type="radio" name="animate-1"/> <div class="room-arena"> <div class="walls"> <div class="wall"> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/1.jpg" /> </a> <p class="item-desc"> 1st. element </p> </div> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/5.jpg" /> </a> <p class="item-desc"> 5th. element </p> </div> </div> <div class="wall"> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/4.jpg" /> </a> <p class="item-desc"> 2st. element </p> </div> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/6.jpg" /> </a> <p class="item-desc"> 6th. element </p> </div> </div> <div class="wall"> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/3.jpg" /> </a> <p class="item-desc"> 3st. element </p> </div> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/7.jpg" /> </a> <p class="item-desc"> 7th. element </p> </div> </div> <div class="wall"> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/2.jpg" /> </a> <p class="item-desc"> 4st. element </p> </div> <div class="item"> <a class="item-image"> <img src="https://feature-walls.com.au/wp-content/themes/featurewalls/photogallery-page/examples/img/room/JPEG/8.jpg" /> </a> <p class="item-desc"> 8th. element </p> </div> </div> <div class="ceil"></div> <div class="floor"></div> </div> </div> <div class="navigations"> <label for="room-sample-1-1">1</label> <label for="room-sample-1-2">2</label> <label for="room-sample-1-3">3</label> <label for="room-sample-1-4">4</label> <label for="room-sample-1-5">5</label> <label for="room-sample-1-6" class="yellow">6</label> <label for="room-sample-1-7" class="red">7</label> <label for="room-sample-1-8" class="blue">8</label> </div> <div class="paginations"> <label for="room-sample-1-1">1</label> <label for="room-sample-1-2">2</label> <label for="room-sample-1-3">3</label> <label for="room-sample-1-4">4</label> <label for="room-sample-1-5">5</label> <label for="room-sample-1-6" class="yellow">6</label> <label for="room-sample-1-7" class="red">7</label> <label for="room-sample-1-8" class="blue">8</label> </div> <label class="zoom" for="room-zoom-1">come over</label> <label for="room-zoom-1" class="exit">exit</label> </div> </div>

Documentation

Room v1.2.1

What it the Room is?

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.

Quick start

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.

          
            
<head> <link rel="stylesheet" type="text/css" href="css/formir-room.min.css" /> </head>

Copy gallery code below and paste into your site body and modify wall items and images.

            
              
<div class="room"> <input class="room-zoom" id="room-zoom-1" type="checkbox" name="zoom-1"/> <div class="room-body"> <input id="room-sample-1-1" type="radio" name="animate-1" checked="checked"/> <input id="room-sample-1-2" type="radio" name="animate-1"/> <input id="room-sample-1-3" type="radio" name="animate-1"/> <input id="room-sample-1-4" type="radio" name="animate-1"/> <input id="room-sample-1-5" type="radio" name="animate-1"/> <input id="room-sample-1-6" type="radio" name="animate-1"/> <input id="room-sample-1-7" type="radio" name="animate-1"/> <input id="room-sample-1-8" type="radio" name="animate-1"/> <div class="room-arena"> <div class="walls"> <div class="wall"> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/1.jpg" /> </a> <p class="item-desc"> 1st. element </p> </div> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/5.jpg" /> </a> <p class="item-desc"> 5th. element </p> </div> </div> <div class="wall"> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/4.jpg" /> </a> <p class="item-desc"> 2st. element </p> </div> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/6.jpg" /> </a> <p class="item-desc"> 6th. element </p> </div> </div> <div class="wall"> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/3.jpg" /> </a> <p class="item-desc"> 3st. element </p> </div> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/7.jpg" /> </a> <p class="item-desc"> 7th. element </p> </div> </div> <div class="wall"> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/2.jpg" /> </a> <p class="item-desc"> 4st. element </p> </div> <div class="item"> <a class="item-image"> <img src="examples/img/room/JPEG/8.jpg" /> </a> <p class="item-desc"> 8th. element </p> </div> </div> <div class="ceil"></div> <div class="floor"></div> </div> </div> <div class="navigations"> <label for="room-sample-1-1">1</label> <label for="room-sample-1-2">2</label> <label for="room-sample-1-3">3</label> <label for="room-sample-1-4">4</label> <label for="room-sample-1-5">5</label> <label for="room-sample-1-6" class="yellow">6</label> <label for="room-sample-1-7" class="red">7</label> <label for="room-sample-1-8" class="blue">8</label> </div> <div class="paginations"> <label for="room-sample-1-1">1</label> <label for="room-sample-1-2">2</label> <label for="room-sample-1-3">3</label> <label for="room-sample-1-4">4</label> <label for="room-sample-1-5">5</label> <label for="room-sample-1-6" class="yellow">6</label> <label for="room-sample-1-7" class="red">7</label> <label for="room-sample-1-8" class="blue">8</label> </div> <label class="zoom" for="room-zoom-1">come over</label> <label for="room-zoom-1" class="exit">exit</label> </div> </div>

Installation - full process

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:

          
            
<head> <link rel="stylesheet/less" type="text/css" href="less/formir-room.less" /> <script src="js/less.min.js"></script> </head>

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.

See all configurations of less file.

Setup core less variables

Maximum number of items

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.

          
            
@room-floor-background: url('http://formir.foreground.pl/plugins/img/plugins/room/floor.jpg') repeat 110px 50px; @room-floor-shadow: 0 0 100px rgba(0, 0, 0, 0.1), 0 0 150px rgba(0, 0, 0, 0.2) inset; @room-wall-background: @room-body-background; @room-wall-shadow: 0 0 50px rgba(0, 0, 0, 0.1), 0 0 100px rgba(0, 0, 0, 0.2) inset; @room-ceil-background: @room-body-background; @room-ceil-shadow: 0 0 100px rgba(0, 0, 0, 0.1), 0 0 150px rgba(0, 0, 0, 0.2) inset; ... more

Use our mixing to style your elements

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

Setup HTML

Input's controls

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

All less variables:

            
              
/// VARIABLES @room-rotate-speed: 2s; // speed of room rotation @room-rotate-timing: ease-in-out; // function of rotation speed animation @room-font-family: Arial, Helvetica, sans-serif; // font family @room-mobile-media-width: 945px; // not use % unit or calc(), you can use px, rem, cm, vh, vw etc @room-size-width: 100vmax; // size of room @room-size-height: 100vmin; @room-perspective: @room-size-width; @room-mobile-size-width: 100vw; // not use % unit or calc(), you can use px, rem, cm, vh, vw etc - recommend 100vw @room-mobile-size-height: 100vh; // recomment 100vh @room-mobile-perspective: @room-mobile-size-width; @room-scale: 1.1; @room-scale-zoom: 1.5; @room-offset-y: 0; // use % @room-body-background: #fff; @room-item-height: 90%; @room-item-width: 90%; @room-zindex: 1000; @room-text-color: #2d2d2d; @room-text-font-size: 14px; @room-text-font-size-mobile: 2vmin; @room-font-line-height: 1.3em; @room-text-margin-top: 1.5rem; @room-floor-background: url('http://formir.foreground.pl/plugins/img/plugins/room/floor.jpg') repeat 110px 50px; @room-floor-shadow: 0 0 100px rgba(0, 0, 0, 0.1), 0 0 150px rgba(0, 0, 0, 0.2) inset; @room-wall-background: @room-body-background; @room-wall-shadow: 0 0 50px rgba(0, 0, 0, 0.1), 0 0 100px rgba(0, 0, 0, 0.2) inset; @room-ceil-background: @room-body-background; @room-ceil-shadow: 0 0 100px rgba(0, 0, 0, 0.1), 0 0 150px rgba(0, 0, 0, 0.2) inset; @room-navigations-margin: 20px; @room-button-size: 30px; @room-pagination-button-size: 20px; @room-pagination-buttons-space: 3px; @room-button-border: 0 none; @room-button-background: #747474; @room-button-color: #fff; @room-button-shadow: 0 0 2px rgba(0, 0, 0, 0.5); @room-button-current-background: #fff; @room-button-current-border: 1px solid @room-button-background; @room-button-current-color: @room-button-background; @room-buttons-position: 5%; // horizontally (y) @room-button-zoom-position: 10%; @room-button-zoom-width: 120px; @room-button-exit-width: 60px; @room-pagination-position: 5%; @room-button-opacity: 0.5; @room-button-red-background: #A6131D; @room-button-blue-background: #0E2D63; @room-button-yellow-background: #f9f381; @room-button-green-background: #0F6331; @room-button-orange-background: #F69256; @room-button-pink-background: #EC5B94; @room-button-black-background: #000; @room-button-white-background: #fff; @room-button-red-color: #fff; @room-button-blue-color: #fff; @room-button-yellow-color: @room-text-color; @room-button-green-color: #fff; @room-button-orange-color: #fff; @room-button-pink-color: #fff; @room-button-black-color: #fff; @room-button-white-color: @room-text-color; @room-button-transition: opacity 0.5s linear; @room-canvas-border: 10px solid @room-button-background; @room-canvas-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);

Mixings

              
                
.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.