[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.

1. Clone the repo with
   git clone https://github.com/me-cooper/nodebb-plugin-makesmart-gallery
2. Open the downloaded folder via console and link the folder with
   sudo npm link
3. Go into your nodebb installation folder and type
   npm link nodebb-plugin-makesmart-gallery
4. 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.