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 a creative way. Simply, the plugin gets given DOM images and shows them with CSS3 based perspective transformation. Further, if you clicked the image, it will show in a basic lightbox. Users can navigate the next and previous images through buttons.

How to Create 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 an 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 the jQuery document ready function to activate the gallery.

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

Advanced Configuration Options for Photo Wall

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

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

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

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

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

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

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

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

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

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

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

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

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

That’s all! hopefully, you have successfully created a photo wall gallery. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.