jQuery Photo Wall a 3D Image Gallery Plugin

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

jQuery Photo Wall a 3D Image Gallery Plugin

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. EXAMPLE $('.photo-wall').wall({ selector: 'article', });
`size`	Size of longest side in pixels. Default: 180, Type: Number. EXAMPLE $('.photo-wall').wall({ size: 200, });
`rows`	Define the number of rows in gallery. Default: 3, Type: Number. EXAMPLE $('.photo-wall').wall({ rows: 4, });
`angle`	Define the angle in degree between elements. Default: 10, Type: Number. EXAMPLE $('.photo-wall').wall({ angle: 15, });
`scale`	Scale for the active image. Default: 1.1, Type: Number/float. EXAMPLE $('.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. EXAMPLE $('.photo-wall').wall({ variationY : 0.15, variationX : 2.0, });
`depth`	Distance to the virtual center point. Default: -1200, Type: Number. EXAMPLE $('.photo-wall').wall({ depth: -1200, });
`perspective`	The camera distance. Default: 2000, Type: Number. EXAMPLE $('.photo-wall').wall({ perspective : 2000, });
`transition`	Define the transition duration in seconds. Default: 0, Type: Number. EXAMPLE $('.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. EXAMPLE $('.photo-wall').wall({ lightbox: 'rgba(0,0,0,0.1)', });
`btnnext` & `btnback`	Text for the next and previous buttons. Default: “>” and “<” respectively. Type: String. EXAMPLE $('.photo-wall').wall({ btnback : '<', btnnext : '>' });
`threshold`	Define the center threshold. Default: 0, Type: Number. EXAMPLE $('.photo-wall').wall({ threshold: 0, });