[PHPBB 3.2.x] Gallery

Get help developing custom BBCodes or request one.
Post Reply
User avatar
Autumn Shade
Registered User
Posts: 29
Joined: Thu May 30, 2019 12:38 pm

[PHPBB 3.2.x] Gallery

Post by Autumn Shade » Mon Jun 17, 2019 7:19 am

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!

Mellx1
Registered User
Posts: 15
Joined: Fri Feb 08, 2019 7:45 am

Re: [PHPBB 3.2.x] Gallery

Post by Mellx1 » Thu Jun 20, 2019 4:09 am

I can't get this to work.

Any output screenshot?

User avatar
Autumn Shade
Registered User
Posts: 29
Joined: Thu May 30, 2019 12:38 pm

Re: [PHPBB 3.2.x] Gallery

Post by Autumn Shade » Thu Jun 20, 2019 6:21 am

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

Mellx1
Registered User
Posts: 15
Joined: Fri Feb 08, 2019 7:45 am

Re: [PHPBB 3.2.x] Gallery

Post by Mellx1 » Fri Jun 21, 2019 1:26 am

This is perfect man, thanks! :D :lol:

Post Reply

Return to “Custom BBCode Development and Requests”