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

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

    Live Demo

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


    https://github.com/me-cooper/nodebb-plugin-makesmart-gallery

    To-Do:

    • Display Image-Slider in the composer preview as well
  • Great idea! Can't wait to try it out and thanks for the video.

  • Nice and very slick looking. 👍

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

  • @dogs this is great! 👍 thanks

  • @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.


Suggested Topics