[nodebb-plugin-makesmart-gallery] - Image Slider for topics

dogs

Hey! Today I want to share my newest plugin with you guys.
Its called makesmart-image-gallery.

Live Demo

https://nodebb.development.fail/topic/3/image-gallery-made-easy

How to use

Just add [[gallery]] on top of your image-collection, followed by the images which should be displayed in the slider:

[[gallery]]
![fun](https://media.tenor.com/images/11fc14bb1b8dc3efbf7aa496432601d4/tenor.gif)
![dance](https://media.tenor.com/images/82f7d090429ddc3e5ae33d7244d369c2/tenor.gif)
![happy](https://media.tenor.com/images/a12ac6302bccc01652b7f4b33a034777/tenor.gif)

This simple syntax creates a slim and nice image-gallery:

It uses Swiper as slider. You can look trough the examples to customize your slider if you want. To change behaviour edit static/lib/main.js.

require(["swiper"], function (Swiper) {
  var swiper = new Swiper(".makesmart-image-gallery", {
    autoHeight: true,
    loop: true,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });
});

Installation

So far I dont know, how to use npm so this plugin is currently only available via GitHub.

Clone the repo with
git clone https://github.com/me-cooper/nodebb-plugin-makesmart-gallery
Open the downloaded folder via console and link the folder with
sudo npm link
Go into your nodebb installation folder and type
npm link nodebb-plugin-makesmart-gallery
Activate the plugin via cli ./nodebb activate makesmart-gallery or via ACP

Installation via NPM

Here is the way @Spin0us installed it :

npm install git+https://github.com/me-cooper/nodebb-plugin-makesmart-gallery.git

Reply

It's my first plugin but I hope you enjoy it.

GitHub - me-cooper/nodebb-plugin-makesmart-gallery: Nice and simple image collection as slider

Nice and simple image collection as slider. Contribute to me-cooper/nodebb-plugin-makesmart-gallery development by creating an account on GitHub.

GitHub (github.com)

To-Do:

Display Image-Slider in the composer preview as well

TaLoche

Great idea! Can't wait to try it out and thanks for the video.

omega

Nice and very slick looking.

psychobunny

awesome! managed to grab the first star on your GH repo as well ;D

crazycells

@dogs this is great! thanks

Spin0us

@dogs thank for this plugin
Here is the way i installed it :

npm install git+https://github.com/me-cooper/nodebb-plugin-makesmart-gallery.git

Hope this help.