Слайдер новостей из темы
Добавляет слайдер, автоматически наполняемый новостями, публикуемыми в заданном топике.
Автор скрипта: Romych
Устанавливать в Объявление или любое место, где хотите видеть новости (низ, верх, сайд-бар, отдельная страница)
Слайдер новостей из топика на форуме (JS, CSS)
Сообщений 1 страница 10 из 11
Поделиться104.11.20 18:50
- Команда ForumD.ru
- Уважение: +8708
- Достижения/подарки: cake 8 emoji_events 16
- Наградные баллы: 1310
- Проверенный спец: FDFD
Поделиться201.09.21 14:57
здравствуйте. а можно ли вывести новости из нескольких тем?
Поделиться301.09.21 20:01
- It-прораб и суетолог
- Уважение: +6829
- Достижения/подарки: cake 7 emoji_events 6
- Наградные баллы: 1250
Batyr J
А если скрипт несколько раз поставить? Или номера айди тем через запятую?
Поделиться401.09.21 20:03
#p160194,Automation Baby написал(а):
Или номера айди тем через запятую?
через запятую не получилось
Поделиться501.09.21 20:09
там изображение и текст перемешались. еще шрифт с тенью не работает
адрес https://tmsat.bbmy.ru
Поделиться602.09.21 14:11
- It-прораб и суетолог
- Уважение: +6829
- Достижения/подарки: cake 7 emoji_events 6
- Наградные баллы: 1250
#p160196,Batyr J написал(а):
там изображение и текст перемешались. еще шрифт с тенью не работает
У вас запрещено на форуме нажимать правую кнопку мыши и я не могу вызвать инструменты разработчика чтобы посмотреть что там не так...
Поделиться702.09.21 15:31
Automation Baby
нажмите CTRL+U
вот код
Код:
<style>
.slider_wrap {margin:100px auto 0;width:580px;height:350px;position:relative;overflow:hidden;-webkit-box-shadow: 0px 7px 10px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 7px 10px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 7px 10px 0px rgba(50, 50, 50, 0.75);}
.slider_wrap figure {width:540px;height:auto;display:none;position:absolute;top:0;left:20px; }
.slider_wrap figure:first-child {display:block;}
.slider_wrap figcaption {background: rgba(250,250,250, .8);bottom: 0;box-sizing: border-box;font-size: 14px;position: absolute;width: 100%;padding: 1rem;-webkit-transition: max-height 0.3s ease-out;overflow: hidden;}
.slider_wrap img {width: 100%;height: 350px;object-fit: contain;}
.datep {filter: contrast(10);}
.slider_wrap span {margin-top:-13px;width:15px;height:26px;display:block;position:absolute;top:50%;cursor:pointer;background:url(https://forumstatic.ru/files/0017/d8/50/94649.png) no-repeat;}
.slider_wrap span.next {right:0;background-position:-15px 0;}
.slider_wrap span.next:hover {background-position:-15px -26px;}
.slider_wrap span.prev {left:0;background-position: 0 0;}
.slider_wrap span.prev:hover {background-position: 0 -26px;}
.publication{width: 100%;text-align: center;position: absolute;font-size: 20px;margin: 0;color: #4682b4;text-shadow: 4px 4px 6px rgba(256, 256, 256, 1), -4px -4px 6px rgba(256, 256, 256, 1), -4px 4px 6px rgba(256, 256, 256, 1), 4px -4px 6px rgba(256, 256, 256, 1);}
@keyframes anim {0% { opacity: 0; filter: blur(4px)}
10% { opacity: 0; }
90% { opacity: 1; }
100% { opacity: 1; filter: blur(0.5px)}}
.publication{animation: anim 4s infinite alternate;}
</style>
<!-- Вывод новостей из темы Обновления -->
<script language="javascript">
var lm = 7,//количество отображаемых сообщений из темы
sort = 'desc',//по убыванию
si = 48,//id темы из которой выводим новости
npk ='https://forumstatic.ru/files/0017/d8/50/39531.jpg'; //новостная картинка по-умолчанию
$(function(){var nf='<div id="slider" class="slider_wrap">',text=[],EndSlider=()=>{nf+='<span class="next"></span><span class="prev"></span></div>';$('#news').append(nf);}
$.getJSON('/api.php?method=post.get&topic_id='+si+'&sort_dir='+sort+'&limit='+lm+'&fields=id,message,posted',function(d){var x=d.response;for(var i in x){var mg=x[i].message.match(/(?:src=\")(https?:\/\/.*?\.(png|jpg|gif|jpeg|webp))(?:\")/gi);mg=(!mg)?npk:mg;var sod=x[i].message.replace(/\<img class\=\"postimg\" loading\=\"lazy\" src\=\"https?\:\/\/(.*?)\.(png|jpg|gif|jpeg|webp)\" alt\=\"https?\:\/\/(.*?)\.(png|jpg|gif|jpeg|webp)\" \/\>/g,''),pd=x[i].id,t=x[i].posted,z=(2<=mg.length<47)?mg.toString().replace(/(src\=|\")/g,'').split(/,/)[0]:mg.toString().replace(/(src\=|\")/g,''),v=sod.slice(0,300);if(v.length<sod.length){v+='<a rel="nofollow" href="/viewtopic.php?pid='+pd+'#p'+pd+'"><strong> ... читать подробнее</strong></a>'};t=new Date(t*1e3).toLocaleString('ru');([i]==0)?nf+='<figure class="active"><a rel="nofollow" href="/viewtopic.php?pid='+pd+'#p'+pd+'"><p><p class="datep"><strong class="publication"></p>'+t+'</strong><img src="'+z+'" alt="" /></p></a><figcaption>'+v+'</figcaption></figure>':nf+='<figure><a rel="nofollow" href="/viewtopic.php?pid='+pd+'#p'+pd+'"><p><p class="datep"><strong class="publication"></p>'+t+'</strong><img src="'+z+'" alt="" /></p></a><figcaption>'+v+'</figcaption></figure>';}EndSlider();});$(window).load(function(){var elWrap=$('#slider'),el=elWrap.find('figure'),indexImg=1,indexMax=el.length,changeF=()=>{el.fadeOut(500).filter(':nth-child('+indexImg+')').fadeIn(500);},autoCange=()=>{indexImg++;if(indexImg>indexMax){indexImg=1;};changeF();},interF=setInterval(autoCange,5000);elWrap.on('mouseenter',function(){clearInterval(interF);}).on('mouseleave',function(){interF=setInterval(autoCange,5000);});$('span.next').click(function(){indexImg++;if(indexImg>indexMax){indexImg=1;};changeF();});$('span.prev').click(function(){indexImg--;if(indexImg<1){indexImg=indexMax;};changeF();});});});
</script>
<article id="news"></article>Отредактировано Batyr J (02.09.21 15:34)
Поделиться802.09.21 18:33
- It-прораб и суетолог
- Уважение: +6829
- Достижения/подарки: cake 7 emoji_events 6
- Наградные баллы: 1250
#p160196,Batyr J написал(а):
там изображение и текст перемешались. еще шрифт с тенью не работает
Понятно, всё дело в том что у вас в сообщениях из темы, откуда подгружаются новости есть заголовки. Вот они и перемешались с текстом и поэтому заголовок со шрифтом с тенью не работает. Самые простые варианты:
1) не форматировать текст в начале чтобы не было подобных конфликтов;
2) добавлять заголовки на картинки.
И старайтесь в сообщениях которые выводятся в слайдер не использовать супер-сложные инструменты форматирования: картинка, текст - никаких заголовков, видео. По крайней мере не в начале сообщения, чтобы оно не отображалось таким вот образом.
Поделиться909.10.21 08:52
Всем привет. Слайдер так и замирает, новости не меняются. только последняя новость стоит и все. даже нажатие на стрелку слева-справа не помогает
вот код
Код:
<style>
.slider_wrap {margin:100px auto 0;width:580px;height:350px;position:relative;overflow:hidden;-webkit-box-shadow: 0px 7px 10px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow: 0px 7px 10px 0px rgba(50, 50, 50, 0.75);box-shadow: 0px 7px 10px 0px rgba(50, 50, 50, 0.75);}
.slider_wrap figure {width:540px;height:auto;display:none;position:absolute;top:0;left:20px; }
.slider_wrap figure:first-child {display:block;}
.slider_wrap figcaption {background: rgba(250,250,250, .8);bottom: 0;box-sizing: border-box;font-size: 14px;position: absolute;width: 100%;padding: 1rem;-webkit-transition: max-height 0.3s ease-out;overflow: hidden;}
.slider_wrap img {width: 100%;height: 350px;object-fit: contain;}
.datep {filter: contrast(10);}
.slider_wrap span {margin-top:-13px;width:15px;height:26px;display:block;position:absolute;top:50%;cursor:pointer;background:url(https://forumstatic.ru/files/0017/d8/50/94649.png) no-repeat;}
.slider_wrap span.next {right:0;background-position:-15px 0;}
.slider_wrap span.next:hover {background-position:-15px -26px;}
.slider_wrap span.prev {left:0;background-position: 0 0;}
.slider_wrap span.prev:hover {background-position: 0 -26px;}
.publication{width: 100%;text-align: center;position: absolute;font-size: 20px;margin: 0;color: #4682b4;text-shadow: 4px 4px 6px rgba(256, 256, 256, 1), -4px -4px 6px rgba(256, 256, 256, 1), -4px 4px 6px rgba(256, 256, 256, 1), 4px -4px 6px rgba(256, 256, 256, 1);}
@keyframes anim {0% { opacity: 0; filter: blur(4px)}
10% { opacity: 0; }
90% { opacity: 1; }
100% { opacity: 1; filter: blur(0.5px)}}
.publication{animation: anim 4s infinite alternate;}
</style>
<!-- Вывод новостей из темы Обновления -->
<script language="javascript">
var lm = 20,//количество отображаемых сообщений из темы
sort = 'desc',//по убыванию
si = 1232,//id темы из которой выводим новости
npk ='https://forumstatic.ru/files/0017/d8/50/39531.jpg'; //новостная картинка по-умолчанию
$(function(){var nf='<div id="slider" class="slider_wrap">',text=[],EndSlider=()=>{nf+='<span class="next"></span><span class="prev"></span></div>';$('#news').append(nf);}
$.getJSON('/api.php?method=post.get&topic_id='+si+'&sort_dir='+sort+'&limit='+lm+'&fields=id,message,posted',function(d){var x=d.response;for(var i in x){var mg=x[i].message.match(/(?:src=\")(https?:\/\/.*?\.(png|jpg|gif|jpeg|webp))(?:\")/gi);mg=(!mg)?npk:mg;var sod=x[i].message.replace(/\<img class\=\"postimg\" loading\=\"lazy\" src\=\"https?\:\/\/(.*?)\.(png|jpg|gif|jpeg|webp)\" alt\=\"https?\:\/\/(.*?)\.(png|jpg|gif|jpeg|webp)\" \/\>/g,''),pd=x[i].id,t=x[i].posted,z=(2<=mg.length<47)?mg.toString().replace(/(src\=|\")/g,'').split(/,/)[0]:mg.toString().replace(/(src\=|\")/g,''),v=sod.slice(0,300);if(v.length<sod.length){v+='<a rel="nofollow" href="/viewtopic.php?pid='+pd+'#p'+pd+'"><strong> ... читать подробнее</strong></a>'};t=new Date(t*1e3).toLocaleString('ru');([i]==0)?nf+='<figure class="active"><a rel="nofollow" href="/viewtopic.php?pid='+pd+'#p'+pd+'"><p><p class="datep"><strong class="publication"></p>'+t+'</strong><img src="'+z+'" alt="" /></p></a><figcaption>'+v+'</figcaption></figure>':nf+='<figure><a rel="nofollow" href="/viewtopic.php?pid='+pd+'#p'+pd+'"><p><p class="datep"><strong class="publication"></p>'+t+'</strong><img src="'+z+'" alt="" /></p></a><figcaption>'+v+'</figcaption></figure>';}EndSlider();});$(window).load(function(){var elWrap=$('#slider'),el=elWrap.find('figure'),indexImg=1,indexMax=el.length,changeF=()=>{el.fadeOut(500).filter(':nth-child('+indexImg+')').fadeIn(500);},autoCange=()=>{indexImg++;if(indexImg>indexMax){indexImg=1;};changeF();},interF=setInterval(autoCange,5000);elWrap.on('mouseenter',function(){clearInterval(interF);}).on('mouseleave',function(){interF=setInterval(autoCange,5000);});$('span.next').click(function(){indexImg++;if(indexImg>indexMax){indexImg=1;};changeF();});$('span.prev').click(function(){indexImg--;if(indexImg<1){indexImg=indexMax;};changeF();});});});
</script>
<article id="news"></article>адрес tmsat.bbmy.ru
Отредактировано Batyr J (09.10.21 08:52)
Поделиться1009.10.21 09:03
вот теперь обновляется. а иногда замирает. в чем может быть причина?
