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 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 |
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. $('.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, }); |
Leave a Reply