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

gallery preview

YouTube (www.youtube.com)

Live Demo

503 Service Unavailable

(nodebb.development.fail)

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 - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Swiper (swiperjs.com)

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.