1 (edited by PunBB 2018.02.26 15:29)

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

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

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

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

https://punbb.info/uploads/images/2016/04/26/b4db92eea786f29898ed06ae4b3f4208.png

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

https://punbb.info/uploads/images/2016/04/26/f3ccdd27d2000e3f9255a7e3e2c48800.jpg

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

https://punbb.info/uploads/images/2016/04/26/764fcfe3a9eea2cc5ea9e5537e816a60.jpg

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

Pan Carousels - скачать расширение

2

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

PunBB wrote:

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

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

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

3

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

Yurka.Belov wrote:

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

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

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?

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.03 23: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?

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.

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.

12 (edited by PunBB 2016.07.29 00: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

1

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.

16 (edited by PunBB 2016.07.29 00: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 02:03)

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

.fadein img {
    height: 100%;
    width: 100%;
    vertical-align: middle;
    padding: 1%;
    border: 0;
}

18 (edited by PunBB 2016.07.29 00: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
http://image.prntscr.com/image/e65ec816f5be4166a845a2001cfdc0b7.png

new style
http://image.prntscr.com/image/4d114acd78ad4fbab53e2c1b8900a63d.png

19 (edited by PunBB 2016.07.10 15: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; }
}

20 (edited by PunBB 2016.07.11 00: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....

21 (edited by MaraKat 2016.07.11 09:13)

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

I did not answer immediately, for I was looking for code without mediaqueries.
I found a soluce there : https://www.sitepoint.com/maintain-imag … eb-design/
For the container : height :0 and a padding-top of 33.33%, the percentage being the ratio between height and width of my pictures 300:900=0.3333.
Unfortunately, I was not able to keep the white border in my original css, but I kept the border-shadow.
Here is the result : http://revest-legtux.org/
And below is the final code, yeah !!! Your code, of course with my adaptation.
Do you think this could be an option, full css without JavaScript, for your Pan_Carousel extension ?

Many, many thanks !

@keyframes fade {
  0%   { opacity: 0; }
  11.11%   { opacity: 1; }
  33.33%  { opacity: 1; }
  44.44%  { opacity: 0; }
  100% { opacity: 0; }
}
.fadein {
  display: block;
  width: 90%;
  position: relative;
  height: 0;
  padding: 33.33% 0 0 0;
  overflow: hidden;
  box-shadow: 5px 5px 20px #404040; 
 border-color: #ffffff;
 border-style: solid;
 border-width: 0;
 }
.fadein img { position:absolute;top:0; center:0; with:100%;  height:100%; vertical-align:middle; overflow: hidden;
 display: block;
text-align:center;opacity:0; animation-name: fade; animation-duration: 12s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s;  }
.fadein img:nth-child(2) { animation-delay: 4s;  }
.fadein img:nth-child(3) { animation-delay: 8s;  }

22 (edited by PunBB 2016.07.11 23:13)

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

Yes, I will check and add a module : Only_CSS3

23

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

а можно в 2х словах пояснить куда этот код вставлять и что он дает?

24

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

Какой код? Там в настройках выбираете вариант отображения лого и затем загружаете лого картинку

1

25

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

Реализую ваши подсказки, очень помогает! http://apsnyfishing.ru/index.php

26

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

soul_way wrote:

Реализую ваши подсказки, очень помогает!

почему у вас соединение с базой данных теряется?

27

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

PunBB wrote:

почему у вас соединение с базой данных теряется?

вот я бы знал еще что это такое)

28

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

когда зашел, то было это

https://punbb.info/uploads/images/2017/02/11/screenshot.2017-02-11_18.50.00.png

пришлось раз пять перезагрузить страницу чтобы увидеть форум

29

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

PunBB wrote:

когда зашел, то было это

пришлось раз пять перезагрузить страницу чтобы увидеть форум

странно, у меня ниразу не было такого

30

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

soul_way, если вдруг появится, то откройте файл config.php, найдите строку

//define('FORUM', 1);

и сделайте так

define('FORUM', 1);

Это покажет вам в чем проблема. Если самому будет сложно, сделайте скриншот и скиньте мне в чат. Профиксим.

1