simba-grid v1.0.2

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

License

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

Crafted by Rodgath

↑ TOP ↑