jQuery Photo Wall a 3D Image Gallery Plugin

May 20, 2019 admin Gallery 0

The wall.js (jQuery Photo Wall) is a 3D wall gallery plugin for jQuery to display images in creative way. Simply, the plugin get given DOM images and show them with CSS3 based perspective transformation. Further, if you clicked the image, it will show in a basic lightbox. Users can navigate next and previous images through buttons.

Plugin Preview

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin: wall.js
Author: Michael Braun
Licence: MIT Licence
Published: May 20, 2019
Repository: Fork on GitHub
Dependencies: jQuery 2.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 171 KB
Demo Download

How to Use jQuery Photo Wall 3D Gallery

1. Load the jQuery JavaScript library and 3D wall gallery CSS and JS into your webpage.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- 3D Wall Gallery CSS -->
<link rel="stylesheet" href="css/wall.css">

<!-- 3D Wall Gallery Js -->
<script src="js/wall.js"></script>

2. Create HTML structure for gallery images as follows. 

<div class="photo-wall">
	<article>
		<img src="path/to/your-image.jpg">
	</article>
	 
	<article>
		<img src="path/to/your-image.jpg">
	</article>
	<article>
		<img src="path/to/your-image.jpg">
	</article>
	<article>
		<img src="path/to/your-image.jpg">
	</article>

      ----------------------------------

      ----------------------------------

	<article>
		<img src="path/to/your-image.jpg">
	</article>
</div>

3. Finally, initialize the plugin in jQuery document ready function to active the gallery. 

$(document).ready(function(){
   $('.photo-wall').wall();
});

Advance Configuration Options for Photo Wall

The following are some advance configuration options to create / customize “3D Gallery”.

Option Description, Default, Type
selector

DOM element from where images for gallery will be taken. Default: “article”, Type: String | Object. 

$('.photo-wall').wall({
   selector: 'article',
});
size

Size of longest side in pixels. Default: 180, Type: Number. 

$('.photo-wall').wall({
   size: 200, 
});
rows

Define the number of rows in gallery. Default: 3, Type: Number. 

$('.photo-wall').wall({
   rows: 4,
});
angle

Define the angle in degree between elements. Default: 10, Type: Number. 

$('.photo-wall').wall({
   angle: 15,
});
scale

Scale for the active image. Default: 1.1, Type: Number/float. 

$('.photo-wall').wall({
   scale: 1.3,
});
variationX & variationY

Define the vertical and horizontal angle respectively on mouse movement. Default: 0.15 and 2.0 respectively. Type: Number/Float. 

$('.photo-wall').wall({
   variationY  : 0.15,
   variationX  : 2.0,
});
depth

Distance to the virtual center point. Default: -1200, Type: Number. 

$('.photo-wall').wall({
   depth: -1200,
});
perspective

The camera distance. Default: 2000, Type: Number. 

$('.photo-wall').wall({
   perspective : 2000,
});
transition

Define the transition duration in seconds. Default: 0, Type: Number. 

$('.photo-wall').wall({
   transition: 0,
});
lightbox

It define the background color for lightbox. Default: “rgba(0, 0, 0, 0.1)”, Type: String.

Available Option: Put any HTML color value (hex, rgb, rgba) in string. 

$('.photo-wall').wall({
   lightbox: 'rgba(0,0,0,0.1)',
});
btnnext & btnback

Text for the next and previous buttons. Default: “>” and “<” respectively. Type: String. 

$('.photo-wall').wall({
    btnback     : '<',
    btnnext     : '>'   
});
threshold

Define the center threshold. Default: 0, Type: Number. 

$('.photo-wall').wall({
    threshold: 0,
});

Related jQuery Plugins: