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

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

 
Посетитель
no avatar
Сообщений: 33
Добрый день! Думаю хорошим решением будет добавить в функционал кнопку читать далее, которая в ленте новостей или постов, при выводе полного текста статьи укорачивала ее, показывая часть, потом сама кнопка при нажатии на которую выводился весь текст прямо в ленте.
В общем не силен в коде, но кое-что нашел, что можно применить:
Код PHP:
  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"> читать полностью →</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 все работает, только не на всю ленту, а на первый пост.
Задача, как сделать , чтобы кнопка отрабатывала на все посты в одной ленте.
(подставлял в файлы шаблонов вывода контента) , кроме того есть еще одна проблема, на сайте установлена автоподгрузка контента.
Прошу помощи в данном вопросе, или может у кого-нибудь имеется решение лучше! Спасибо!
Посетитель
small user social cms
Медаль
Сообщений: 111
Для начала в нужном виде вывода контента из папки templates/default/content добавляем примерно такой код:

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

Код PHP:
  1. <script>
  2.  
  3. $(document).ready(function(){
  4. var hhh = 300;
  5. $(".content_text .f_content").each(function(){
  6. if ($(this).height() > hhh){
  7. $(this).css("max-height", hhh+"px");
  8. $(this).parent().parent().parent().find(".read-next").css("display", "inline");
  9. $(this).parent().parent().parent().find(".shadow").css("display", "block");
  10. }
  11. });
  12.  
  13. $(".read-next").click(function(){
  14. var block = $(this).parent().find(".content_text .f_content");
  15. var shadow = $(this).parent().find(".shadow");
  16. if (block.css("max-height") == hhh+"px"){
  17. block.css("max-height", "");
  18. shadow.css("display", "none");
  19. $(this).text("Скрыть");
  20. }else{
  21. block.css("max-height", hhh+"px");
  22. $(this).text("Читать полностью");
  23. shadow.css("display", "block");
  24. }
  25. });
  26. });
  27.  
  28. /*window.onload = function(){
  29.   blok = document.getElementById('content_text');
  30.   shadow = document.getElementById('shadow');
  31.   parent = blok.parentNode;
  32.   blok_height = blok.style.height ? blok.style.height : blok.offsetHeight;
  33.  
  34.   if(blok_height > 400){
  35.   blok.style.maxHeight = '400px';
  36.   link = parent.getElementsByClassName('read-next')[0];
  37.   link.style.display = 'inline';
  38.  
  39.   link.onclick = function(){
  40.  
  41.   if(blok.style.maxHeight){
  42.   blok.style.maxHeight = '';
  43.   shadow.style.display ='none';
  44.   link.innerHTML = 'Скрыть';
  45.   } else {
  46.   blok.style.maxHeight = '400px';
  47.   link.innerHTML = 'Читать далее...';
  48.   shadow.style.display ='block';
  49.   }
  50.   return false;
  51.   }
  52.   }
  53.   }*/
  54. </script>
Реклама
cms
Посетитель
small user social cms
Медаль
Сообщений: 111
Чуть не забыл. В css добавить еще вот это

Код PHP:
  1. .read-next {
  2. color: blue;
  3. cursor: pointer;
  4. }
  5.  
  6. .content_text {
  7. overflow: hidden;
  8. }
  9.  
  10. .shadow {
  11. background: linear-gradient(rgba(255,255,255,0),#fff);
  12. height: 50px;
  13. margin: -50px 0px 5px 0;
  14. position: relative;
  15. }
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3090
http://addons.instantcms.ru/addons/combo.html

Вот такой вот есть доделанный, без багов. Для автоматической установки пакет не собран, но если сможете ручками установить (просто файлы закинуть) то могу скинуть
Посетитель
small user social cms
Медаль
Сообщений: 111
Jestik:

http://addons.instantcms.ru/addons/combo.html

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

Ну так это мое дополнение, его надо допиливать под текущую версию. Кратко как реализовать - я написал.
Посетитель
no avatar
Сообщений: 33
Спасибо Вам за помощь! Буду пробовать!
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3090
GWK, там другой человек добавлял, и код нашел я, но я не смог его адаптировать под icms
http://instantcms.ru/blogs/chut-chut-blog/stil-spiska-dlja-tipa-kontenta-kombinirovanyi.html
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3090
Код PHP:
  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.  
Это вот убрать надо, смысл с него если оно все равно закоментировано
Посетитель
small user social cms
Медаль
Сообщений: 889
Пора бы уже подобные плюшки добавлять в саму сборку цмс, ну на крайняк как компоненты дополнения по разумной цене smoke
Посетитель
small user social cms
Медаль
Сообщений: 111
Jestik, http://instantcms.ru/users/hostelbeat и я - один и тот же человек. Я просто от старого аккаунта доступ утерял по глупости
Посетитель
small user social cms
Медаль
Сообщений: 111
Jestik:
Это вот убрать надо, смысл с него если оно все равно закоментировано

Ну так уберите, и посмотрите, будет ли работать)
Посетитель
small user social cms
МедальАвторитет форумаПочетный донор проектаКубок зрительских симпатий
Сообщений: 3090
GWK, у меня без этого куска все работает

GWK:
http://instantcms.ru/users/hostelbeat и я - один и тот же человек. Я просто от старого аккаунта доступ утерял по глупости
ну дак тут админы дружелюбные, сделали бы новый)
Посетитель
small user social cms
Медаль
Сообщений: 111
Jestik:

GWK, у меня без этого куска все работает

GWK:
http://instantcms.ru/users/hostelbeat и я - один и тот же человек. Я просто от старого аккаунта доступ утерял по глупости
ну дак тут админы дружелюбные, сделали бы новый)

Да вот не получилось как-то. Переписка длительная была, но никто ничего не смог восстановить
Посетитель
no avatar
Сообщений: 45
GWK:
Для начала в нужном виде вывода контента из папки 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>

Множите по подробней объяснить что и как заменить чтоб все работало, потому если просто вставить код в default_list.tpl.php то нечего не происходить.
Посетитель
small user social cms
Медаль
Сообщений: 111
@nykolai, посмотрите пример реализации здесь: http://instantcms.ru/blogs/chut-chut-blog/stil-spiska-dlja-tipa-kontenta-kombinirovanyi.html
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.