Simba Grid

Infinite grid scroll.

View Online Demo

Table of Contents

• Installation
• Implementation
  • Method 1
  • Method 2
  • Method 3
• Options
• License

Installation

[A] Download

• simba-grid.min.js - Minified
• simba-grid.js - Unminified

[B] Package

• Install with npm: npm install simba-grid

• Install with yarn: yarn add simba-grid

• 

[C] Get a local working copy of the development repository (Optional)
git clone https://github.com/Rodgath/simba-grid.git

Implementation

There are several methods you can use to add Simba Grid into your project.

Method 1

Initializing with simbaGrid function. View Demo

Your HTML code with images

<div class="my-simba-grid">
  <img src="./images/01.jpg" alt="Image 01">
  <img src="./images/02.jpg" alt="Image 02">

  <!-- More Images Here -->
  
  <img src="./images/20.jpg" alt="Image 20">
  <img src="./images/21.jpg" alt="Image 21">
</div>

Call the simbaGrid() function with two arguments.

...1) The element 'class' or 'id' holding the images

...2) The 'options' object

document.addEventListener('DOMContentLoaded', function () {
  simbaGrid('.my-simba-grid', {
    animationStyle : 'rotate'
  });
});

Enqueue the simbaGrid script at the bottom of your markup

• Using local script file.

<script src="simba-grid.min.js"></script>
<!-- OR -->
<script src="./node_modules/simba-grid/dist/js/simba-grid.min.js"></script>

• Using CDN file. (Optional)

<script src="https://cdn.jsdelivr.net/npm/simba-grid@latest/dist/js/simba-grid.min.js"></script>

↑ TOP ↑

---

Method 2

Using data-simba-grid attribute. View Demo

Your HTML code with images

<div data-simba-grid='{ "animationStyle": "zoomRotate", "cols": "4" }'>
  <img src="./images/01.jpg" alt="Image 01">
  <img src="./images/02.jpg" alt="Image 02">

  <!-- More Images Here -->
  
  <img src="./images/20.jpg" alt="Image 20">
  <img src="./images/21.jpg" alt="Image 21">
</div>

Enqueue the simbaGrid script at the bottom of your markup

• Using local script file.

<script src="simba-grid.min.js"></script>
<!-- OR -->
<script src="./node_modules/simba-grid/dist/js/simba-grid.min.js"></script>

• Using CDN file. (Optional)

<script src="https://cdn.jsdelivr.net/npm/simba-grid@latest/dist/js/simba-grid.min.js"></script>

↑ TOP ↑

---

Method 3

Using JSON object of images

...[A] - Adding the JSON object inside the data-simba-grid attribute. View Demo

<div data-simba-grid='{ "animationStyle": "zoom", 
    "cols": "4", 
    "rows": "4", 
    "gap": "4", 
    "rowHeight": "150", 
    "images": [
      { "src": "./images/01.jpg", "title": "Image 01" },
      { "src": "./images/02.jpg", "title": "Image 02" },
      
      // More Images Here

      { "src": "./images/20.jpg", "title": "Image 20" },
      { "src": "./images/21.jpg", "title": "Image 21" }
    ]
  }'></div>

...[B] - Add the JSON object inside the simbaGrid function. View Demo

HTML code.

<div class="image-rotation-box image-spin-demo"></div>

JavaScript code

document.addEventListener('DOMContentLoaded', function() {
   simbaGrid('.image-rotation-box', {
        animationStyle: 'zoom', 
        width: 1300, 
        cols: 6, 
        rows: 4, 
        gap: 10, 
        rowHeight: 200, 
        images: [
          { "src": "./images/01.jpg", "title": "Image 01" },
          { "src": "./images/02.jpg", "title": "Image 02" },
        
        // More Images Here

          { "src": "./images/20.jpg", "title": "Image 20" },
          { "src": "./images/21.jpg", "title": "Image 21" }
        ]
    });
});

↑ TOP ↑

---

Options

Name	Type	Default	Description
width	number	1200	Width of each grid group.
cols	number	3	Grid columns for each grid group.
rows	number	3	Grid rows for each grid group.
rowHeight	number	280	Grid row height.
gap	number	0	Space between grid items.
scrollSpeed	number	1	Grid scrolling speed. Min is 1.
scrollDirection	string	'left'	Scroll direction. Possible values: 'left' or 'right'.
pauseOnHover	boolean	true	Whether to pause scrolling movement when grid is hovered on.
shuffle	boolean	false	Whether to shuffle grid items when grid is loaded.
animationStyle	string	'zoom'	Grid items entry animations. Possible values: 'zoom', 'rotate', 'zoomRotate'

License

simbaGrid is an open-source project released under the MIT license.

---

Crafted by Rodgath

↑ TOP ↑