1 (edited by PunBB 2017.02.11 15:19)

Topic: Pan Carousels - Динамический логотип для форума PunBB

В сети интернет можно найти много плагинов исполняющих функцию карусели, т.е. меняющихся фотографий в качестве логотипа.

Pan Carousels (тестирование) - позволяет добавлять фотографии загружая их прямо из админки. На момент написания расширения, в наборе имеется 3 плагина:

1 - Логотип имеет всего одно изображение.

Pan Carousels - Динамический логотип для форума PunBB

2 - Неограниченное количество фото загруженных на сервер и меняющихся цепочкой по 4 штуки.

Pan Carousels - Динамический логотип для форума PunBB

3 - Неограниченное число фото. Смена фотографий сопровождается прекрасными спецэффектами.

Pan Carousels - Динамический логотип для форума PunBB

Я не стал добавлять все подряд, а выбрал самые распространенные. Если вы знаете какие либо интересные плагины от других CMS, я буду рад добавить их в расширение. На самом деле в расширению можно подключить практически любой плагин.

Pan Carousels - скачать

Если вам долго не отвечают, пишите автору темы в личку или на Email.

2

Re: Pan Carousels - Динамический логотип для форума PunBB

PunBB wrote:

Если вы знаете какие либо интересные плагины от других CMS, я буду рад добавить их в расширение

Спасибо за расширение. Жаль фотки нельзя загружать группой по нескоко штук и обрезать их перед загрузкой. А так оч даж не плохо PunBB_INFO_ICQ/smile

Еще оч полезной фичей былоб вставлять произвольный хтмл, думаю многим пригодится вставлять лого по ссылке.

3

Re: Pan Carousels - Динамический логотип для форума PunBB

Yurka.Belov wrote:

Еще оч полезной фичей былоб вставлять произвольный хтмл, думаю многим пригодится вставлять лого по ссылке

HTML добавить можно, а в остальном пока так.

Если вам долго не отвечают, пишите автору темы в личку или на Email.

4

Re: Pan Carousels - Динамический логотип для форума PunBB

Hello ! Is it possible to make the carroussel responsive ? I had a similar plugin on a website, but it was cut on smaller screens and I had to replace it with CSSslider, which is not free.

5

Re: Pan Carousels - Динамический логотип для форума PunBB

MaraKat wrote:

Is it possible to make the carroussel responsive ?

Is there an example of a slider? Where can I see?

Если вам долго не отвечают, пишите автору темы в личку или на Email.

6

Re: Pan Carousels - Динамический логотип для форума PunBB

http://gabandjo.legtux.org/

2 sliders on this page. I added the top slider, only to show you, normally, only the second one is displayed.

On top, the original slider, not responsive. (a module for cms adHoc, GNU GPL)
Below, the cssslider, responsive, but not a free license

7 (edited by PunBB 2016.07.04 09:42)

Re: Pan Carousels - Динамический логотип для форума PunBB

MaraKat wrote:

Below, the cssslider, responsive, but not a free license

Do you want us to add to the extension of such a slider at the bottom?

Если вам долго не отвечают, пишите автору темы в личку или на Email.

8

Re: Pan Carousels - Динамический логотип для форума PunBB

Well, I want (please) everything at a time : responsive slider with effects, free license and easy administration ...

9

Re: Pan Carousels - Динамический логотип для форума PunBB

Good. But if you have a ready-made scripts or plug-in, it will accelerate the process.

Если вам долго не отвечают, пишите автору темы в личку или на Email.

10

Re: Pan Carousels - Динамический логотип для форума PunBB

I do not know what to give you.

  • CSSslider is a software installed on the computer and it produces proprietary source under a no-free license. The result is responsive (the slideshow shrinks when the screen is smaller)

  • Slideshow is a module developed for adHoc (a cms still in alpha release) under a gnu gpl license. The result is not responsive (only a part of it is displayed on smaller screens, same way as the Carrousel, from what I can see in the example)

11

Re: Pan Carousels - Динамический логотип для форума PunBB

Maybe make enough carousel adaptive?

But if you want a slide show of Example No. 3  it is best to look for analog.

We can not use paid software for free.

I'm sure a lot of free analogues in the internet. But for their testing and research required no little time.

These may be individual scripts or plug-ins from other CMS. Connect is not difficult.

Если вам долго не отвечают, пишите автору темы в личку или на Email.

12 (edited by PunBB 2016.07.29 10:11)

Re: Pan Carousels - Динамический логотип для форума PunBB

Example Nr 1 or 2 would satisfy me completely, if they can be responsive.

I tried to implement a  slideshow in the Announcement area (since I do not know how to do it in the header).
It is pure CSS3 (with 5 images, because I find it difficult to modify the original code). One can change the speed, but there is only one effect.

There is an extra css file : keyframes.css and I had to add some css (see below) to PunBB style to make it responsive

img{width:auto;height:auto;max-width:100%;vertical-align:middle;padding:1%;border:0;-ms-interpolation-mode:bicubic;}

I found this css last year, it was free with free license, but I cannot find the original site of the coder now.

Tell me if one can do something in the logo area with it.

13

Re: Pan Carousels - Динамический логотип для форума PunBB

create simple HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  
<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}

@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}

.fadein { position:relative; height:332px; width:500px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 3s;  }
.fadein img:nth-child(3) { animation-delay: 6s;  }
</style>
<div class="fadein">
  <img src="http://forum.revestou.fr/img/diapo/apres-incendie-2005.jpg">
  <img src="http://forum.revestou.fr/img/diapo/arbres-blancs-du-lac.jpg">
  <img src="http://forum.revestou.fr/img/diapo/mont-caume-et-pigeonnier.jpg">
</div>
</body>
</html>

View

Если вам долго не отвечают, пишите автору темы в личку или на Email.

14

Re: Pan Carousels - Динамический логотип для форума PunBB

Thank you ! I just settled it in the Announcement area. It is perfect, more simple that what I had tried.
I understand the code better too. I moved the style to the CSS file of the theme. And modified the border etc to match the main site too.

Is it possible to use such a slideshow as a background for the header ? I mean with the site title above it ?

15

Re: Pan Carousels - Динамический логотип для форума PunBB

MaraKat wrote:

Is it possible to use such a slideshow as a background for the header ? I mean with the site title above it ?

Yes, but this opportunity is best done with the help of extensions: Pan Carousels. We are currently working on it.

Если вам долго не отвечают, пишите автору темы в личку или на Email.

16 (edited by PunBB 2016.07.29 10:11)

Re: Pan Carousels - Динамический логотип для форума PunBB

Good evening,
I adapted your code to 12 pictures in the main site (bottom of page) . I modified it to make it responsive and the whole slide-show shrinks with smaller screens without being cut or going overflow...
But ...
On smaller screens, the container keeps its original height and there is a high blank space below the slideshow. I cannot remember how to make the blank space disappear on small screens. Do you have and idea ?

Here is my css code (I mean your css, adapted by me)  :

@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}
.fadein { position:relative; max-width:920px;  height:320px; }
.fadein img { position:absolute;top:0; left:0; width:900px;  height:auto;  overflow: hidden;box-shadow: 5px 5px 20px #404040; 
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
 display: block;
margin:1rem auto;
text-align:center;opacity:0; animation-name: fade; animation-duration: 44s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 4s;  } etc...

17 (edited by PunBB 2016.07.10 12:03)

Re: Pan Carousels - Динамический логотип для форума PunBB

.fadein img {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    padding: 1%;
    border: 0;
}
Если вам долго не отвечают, пишите автору темы в личку или на Email.

18 (edited by PunBB 2016.07.29 10:11)

Re: Pan Carousels - Динамический логотип для форума PunBB

Thanks for the tip, but it is not enough : the blank space disappears, but the ratio between width and height is not kept   PunBB_INFO_ICQ/sad :

original style
Pan Carousels - Динамический логотип для форума PunBB

new style
Pan Carousels - Динамический логотип для форума PunBB

19 (edited by PunBB 2016.07.11 01:02)

Re: Pan Carousels - Динамический логотип для форума PunBB

there are a few rules for the height..

@media only screen and (max-width: 1100px) {
.fadein {
    height: 300px; }
}

@media only screen and (max-width: 748px) {
.fadein {
    height: 250px; }
}

@media only screen and (max-width: 600px) {
.fadein {
    height: 150px; }
}
Если вам долго не отвечают, пишите автору темы в личку или на Email.

20 (edited by PunBB 2016.07.11 10:19)

Re: Pan Carousels - Динамический логотип для форума PunBB

I'm here just gave an example of how to remedy the situation. But you can set a more frequent intervals or thresholds.
Example:
max-width: 1100px
max-width: 1000px
max-width: 900px
max-width: 800px
.....and so on....

Если вам долго не отвечают, пишите автору темы в личку или на Email.