кнопка читать далее

InstantCMS 2.X

решение кнопки

#1 26 февраля 2018 в 22:52
Добрый день! Думаю хорошим решением будет добавить в функционал кнопку читать далее, которая в ленте новостей или постов, при выводе полного текста статьи укорачивала ее, показывая часть, потом сама кнопка при нажатии на которую выводился весь текст прямо в ленте.
В общем не силен в коде, но кое-что нашел, что можно применить:
  1. jQuery(".text_review").each(function(){
  2. var review_full = jQuery(this).html();
  3. var review = review_full;
  4.  
  5. if( review.length > 500 )
  6. {
  7. review = review.substring(0, 500);
  8. jQuery(this).html( review + '<div class="read_more"> читать полностью &rarr;</div>' );
  9. }
  10. jQuery(this).append('<div class="full_text" style="display: none;">' + review_full + '</div>');
  11. });
  12.  
  13. jQuery(".read_more").click(function(){
  14. jQuery(this).parent().html( jQuery(this).parent().find(".full_text").html() );
  15. });
Если вместо text review поставить свой div все работает, только не на всю ленту, а на первый пост.
Задача, как сделать, чтобы кнопка отрабатывала на все посты в одной ленте.
(подставлял в файлы шаблонов вывода контента), кроме того есть еще одна проблема, на сайте установлена автоподгрузка контента.
Прошу помощи в данном вопросе, или может у кого-нибудь имеется решение лучше! Спасибо!
#2 27 февраля 2018 в 00:06
instantcms.ru/addons/combo.html

Вот такой вот есть доделанный, без багов. Для автоматической установки пакет не собран, но если сможете ручками установить (просто файлы закинуть) то могу скинуть
#3 27 февраля 2018 в 13:57
Спасибо Вам за помощь! Буду пробовать!
#5 27 февраля 2018 в 15:07
  1.  
  2. /*window.onload = function(){
  3.   blok = document.getElementById('content_text');
  4.   shadow = document.getElementById('shadow');
  5.   parent = blok.parentNode;
  6.   blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;
  7.  
  8.   if(blok_height > 400){
  9.   blok.style.maxHeight = '400px';
  10.   link = parent.getElementsByClassName('read-next')[0];
  11.   link.style.display = 'inline';
  12.  
  13.   link.onclick = function(){
  14.  
  15.   if(blok.style.maxHeight){
  16.   blok.style.maxHeight = '';
  17.   shadow.style.display ='none';
  18.   link.innerHTML = 'Скрыть';
  19.   } else {
  20.   blok.style.maxHeight = '400px';
  21.   link.innerHTML = 'Читать далее...';
  22.   shadow.style.display ='block';
  23.   }
  24.   return false;
  25.   }
  26.   }
  27.   }*/
  28.  
Это вот убрать надо, смысл с него если оно все равно закоментировано
#6 27 февраля 2018 в 15:54
Пора бы уже подобные плюшки добавлять в саму сборку цмс, ну на крайняк как компоненты дополнения по разумной цене smoke
#7 27 февраля 2018 в 22:03
GWK, у меня без этого куска все работает

instantcms.ru/users/hostelbeat и я — один и тот же человек. Я просто от старого аккаунта доступ утерял по глупости

GWK
ну дак тут админы дружелюбные, сделали бы новый)
#8 1 марта 2018 в 13:44

Для начала в нужном виде вывода контента из папки templates/default/content добавляем примерно такой код:

Код PHP:
<div class="shadow" style="display: none"></div>
<a class="read-next" style="display: none;"><h3 style="text-align: center;"><span style="color: rgb(23, 54, 93);">ЧИТАТЬ ДАЛЕЕ</span><br>
</h3></a>
Ну и после этого в самом конце нужного вам вида контента добавляем это:

Код PHP:
<script>
 
$(document).ready(function(){
var hhh = 300;
$(".content_text .f_content").each(function(){
if ($(this).height() > hhh){
$(this).css("max-height", hhh+"px");
$(this).parent().parent().parent().find(".read-next").css("display", "inline");
$(this).parent().parent().parent().find(".shadow").css("display", "block");
}
});
 
$(".read-next").click(function(){
var block = $(this).parent().find(".content_text .f_content");
var shadow = $(this).parent().find(".shadow");
if (block.css("max-height") == hhh+"px"){
block.css("max-height", "");
shadow.css("display", "none");
$(this).text("Скрыть");
}else{
block.css("max-height", hhh+"px");
$(this).text("Читать полностью");
shadow.css("display", "block");
}
});
});
 
/*window.onload = function(){
  blok = document.getElementById('content_text');
  shadow = document.getElementById('shadow');
  parent = blok.parentNode;
  blok_height = blok.style.height? blok.style.height: blok.offsetHeight;
 
  if(blok_height > 400){
  blok.style.maxHeight = '400px';
  link = parent.getElementsByClassName('read-next')[0];
  link.style.display = 'inline';
 
  link.onclick = function(){
 
  if(blok.style.maxHeight){
  blok.style.maxHeight = '';
  shadow.style.display ='none';
  link.innerHTML = 'Скрыть';
  } else {
  blok.style.maxHeight = '400px';
  link.innerHTML = 'Читать далее...';
  shadow.style.display ='block';
  }
  return false;
  }
  }
  }*/
</script>

GWK

Множите по подробней объяснить что и как заменить чтоб все работало, потому если просто вставить код в default_list.tpl.php то нечего не происходить.
#10 2 марта 2018 в 10:33

instantcms.ru/addons/combo.html

Вот такой вот есть доделанный, без багов. Для автоматической установки пакет не собран, но если сможете ручками установить (просто файлы закинуть) то могу скинуть

Jestik

Если не сложно скиньте.
#11 2 марта 2018 в 10:58
Скинул в лычку.

на днях подготовлю и выложу в дополнениях
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.