Page 1 of 1

[PHPBB 3.2.x] Gallery

Posted: Mon Jun 17, 2019 7:19 am
by Autumn Shade
I've tried to do this for my own purpose out of curiosity and inspired by the request here, Netflix Slider. Here, using Swiper(the js library), I've managed to do a fully responsive gallery with n-count of slides. The thing is really basic and it is highly customizable. If you want to add more slides per view or customize the effects, having paginations, etc - visit the API.

Gallery

BBCode:
[gallery]{TEXT}[/gallery]

HTML:

Code: Select all

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<style>
    .swiper-container {
        width: 100%;
        height: auto;
    }
    .swiper-slide {
        width: 100%;
        height: auto;
        text-align: center;
        background: transparent;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-container img {
        max-width:100%;
        height:auto;
    }
  </style>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
       {TEXT}
    </div>
  </div>

  <!-- Initialize Swiper -->
  <script>
   var swiper = new Swiper('.swiper-container', {
      autoHeight: true, //enable auto height
      spaceBetween: 350,
      effect: 'coverflow',
      calculateHeight: true,
    });

  </script>
  
Slide

BBCode:
[slide]{URL}[/slide]

HTML:
<div class="swiper-slide"><img src="{URL}"></div>

Hope you like it!

Re: [PHPBB 3.2.x] Gallery

Posted: Thu Jun 20, 2019 4:09 am
by Mellx1
I can't get this to work.

Any output screenshot?

Re: [PHPBB 3.2.x] Gallery

Posted: Thu Jun 20, 2019 6:21 am
by Autumn Shade
You use it as it follows:

Create gallery out of slides. Example:

Code: Select all

[gallery]
[slide]https://via.placeholder.com/150[/slide]
[slide]https://via.placeholder.com/350[/slide]
[slide]https://via.placeholder.com/1050[/slide]
[/gallery]
Here are some images, because right now I am unable to record a video. The sequence is as it follows with the cursor. You swipe the cursor to the left if you have more slides. It's like drag and drop.
Image
Image
Image
Image

Re: [PHPBB 3.2.x] Gallery

Posted: Fri Jun 21, 2019 1:26 am
by Mellx1
This is perfect man, thanks! :D :lol: